Flutter ਵਿੱਚ navigation ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ?

Question

Accepted Answer

**Navigation** Flutter ਵਿੱਚ screens (pages/routes) ਦੇ ਵਿਚਕਾਰ ਜਾਣਾ ਹੈ — **Navigator** (routes ਦਾ stack) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬੁਨਿਆਦੀ navigation ਲਈ, ਜਾਂ ਵਧੇਰੇ ਗੁੰਝਲਦਾਰ apps ਲਈ declarative routing packages ਦੀ ਵਰਤੋਂ ਕਰਕੇ। Navigation ਨੂੰ ਸਮਝਣਾ multi-screen apps ਬਣਾਉਣ ਲਈ ਜ਼ਰੂਰੀ ਹੈ।

## Navigator ਨਾਲ ਬੁਨਿਆਦੀ navigation (ek stack)

```dart
// the Navigator manages a STACK of routes (screens)
// PUSH a new screen onto the stack (navigate to it)
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondScreen()),
);

// POP — go back (remove the top screen, return to the previous)
Navigator.pop(context);
```

```text
Think of navigation as a STACK of screens:
  → PUSH adds a screen on top (navigate forward)
  → POP removes the top screen (go back)
  → the back button / gesture also pops
```

## Screens ਦੇ ਵਿਚਕਾਰ data ਭੇਜਣਾ

```dart
// pass data forward (via the constructor)
Navigator.push(context, MaterialPageRoute(
  builder: (context) => DetailScreen(itemId: 42),
));

// return data back when popping
Navigator.pop(context, result);          // return a result
final result = await Navigator.push(...); // receive it (push returns a Future)
```

## Named routes ਅਤੇ ਆਧੁਨਿਕ routing

```dart
// NAMED routes — define routes by name (cleaner for many screens)
Navigator.pushNamed(context, '/details');
// configured in MaterialApp(routes: {...})

// MODERN: declarative routing packages (go_router) for complex apps:
//   → URL-based routing, deep linking, web support, nested navigation
//   → go_router is the recommended approach for non-trivial apps
```

## ਇਹ ਮਹੱਤਵਪੂਰਨ ਕਿਉਂ ਹੈ

Navigation ਨੂੰ ਸਮਝਣਾ ਜ਼ਰੂਰੀ ਹੈ ਕਿਉਂਕਿ **ਬਹੁਤੀਆਂ apps ਦੀਆਂ ਮਲਟੀਪਲ screens ਹਨ**, ਅਤੇ ਉਨ੍ਹਾਂ ਵਿਚਕਾਰ ਜਾਣਾ app ਦੀ functionality ਲਈ ਬੁਨਿਆਦੀ ਹੈ, ਇਸ ਲਈ ਇਹ Flutter ਲਈ ਜ਼ਰੂਰੀ ਜਾਣਕਾਰੀ ਹੈ।

ਮੁੱਢਲਾ ਸੰਕਲਪ — Flutter ਦਾ **Navigator routes ਦਾ ਇੱਕ stack manage ਕਰਨਾ** (screens), ਜਿੱਥੇ ਤੁਸੀਂ **push** ਕਰਦੇ ਹੋ ਅੱਗੇ navigate ਕਰਨ ਲਈ (ਇੱਕ screen ਨੂੰ ਉੱਪਰ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ) ਅਤੇ **pop** ਕਰਦੇ ਹੋ ਵਾਪਸ ਜਾਣ ਲਈ (ਸਭ ਤੋਂ ਉੱਪਰਲੀ screen ਹਟਾਈ ਜਾਂਦੀ ਹੈ) — ਇਹ navigation ਲਈ ਮੌਲਿਕ ਮਾਨਸਿਕ ਮਾਡਲ ਹੈ, ਅਤੇ stack metaphor (ਜਿਸ ਤਰੀਕੇ ਉਪਭੋਗਤਾ app ਵਿੱਚ ਅੱਗੇ ਅਤੇ ਪਿੱਛੇ navigate ਕਰਦੇ ਹਨ ਉਸ ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਹੈ) ਇਸ ਨੂੰ intuitive ਬਣਾਦਿੰਦਾ ਹੈ।

**ਬੁਨਿਆਦੀ navigation** (push/pop) ਨੂੰ ਸਮਝਣਾ ਕਿਸੇ ਵੀ multi-screen app ਲਈ ਜ਼ਰੂਰੀ ਹੈ।

**Screens ਦੇ ਵਿਚਕਾਰ data ਭੇਜਣਾ** (constructors ਦੁਆਰਾ data ਨੂੰ ਅੱਗੇ ਭੇਜਣਾ ਅਤੇ popping ਸਮੇਂ results ਵਾਪਸ ਕਰਣਾ, ਕਿਉਂਕਿ push ਇੱਕ Future ਵਾਪਸ ਕਰਦਾ ਹੈ) ਨੂੰ ਸਮਝਣਾ ਜ਼ਰੂਰੀ ਹੈ ਕਿਉਂਕਿ screens ਨੂੰ ਆਮ ਤੌਰ 'ਤੇ data share ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ (ਇੱਕ item ਨੂੰ detail screen ਨੂੰ ਭੇਜਣਾ, ਇੱਕ selection ਵਾਪਸ ਕਰਨਾ)।

**Named routes** (cleaner organization ਲਈ routes ਨੂੰ name ਦੁਆਰਾ define ਕਰਨਾ ਜਦੋਂ ਬਹੁਤ ਸਾਰੀਆਂ screens ਹੋਣ) ਅਤੇ ਖਾਸ ਕਰਕੇ **ਆਧੁਨਿਕ declarative routing** (packages ਜਿਵੇਂ **go_router**, ਜੋ non-trivial apps ਲਈ recommended ਹੈ, URL-based routing, deep linking, web support, ਅਤੇ nested navigation ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ) ਨੂੰ ਸਮਝਣਾ ਮੌਜੂਦਾ best practices ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ — ਜਿਵੇਂ-ਜਿਵੇਂ apps ਵੱਡੇ ਹੁੰਦੇ ਹਨ, declarative routing imperative push/pop ਨਾਲੋਂ complexity ਨੂੰ ਬਿਹਤਰ ਤਰੀਕੇ ਨਾਲ handle ਕਰਦਾ ਹੈ।

ਲਗਭਗ ਸਭ apps ਦੀਆਂ multi-screen ਹਨ ਅਤੇ ਉਨ੍ਹਾਂ ਵਿਚਕਾਰ navigate ਕਰਨਾ (data passing ਦੇ ਨਾਲ) app ਦੀ functionality ਲਈ ਬੁਨਿਆਦੀ ਹੈ, ਅਤੇ ਕਿਉਂਕਿ Navigator stack model, data passing, ਅਤੇ modern routing (go_router) ਨੂੰ ਸਮਝਣਾ multi-screen apps ਬਣਾਉਣ ਲਈ ਜ਼ਰੂਰੀ ਹੈ, Flutter ਵਿੱਚ navigation ਨੂੰ ਸਮਝਣਾ ਜ਼ਰੂਰੀ, ਮੌਲਿਕ ਜਾਣਕਾਰੀ ਹੈ — ਇੱਕ ਮੂਲ capability ਜੋ ਲਗਭਗ ਹਰੇਕ Flutter app ਵਿੱਚ ਜ਼ਰੂਰੀ ਹੈ ਅਤੇ ਮਲਟੀ-screen experiences ਬਣਾਉਣ ਲਈ ਜ਼ਰੂਰੀ ਹੈ ਜੋ ਅਸਲ ਦੀਆਂ applications ਨੂੰ ਚਾਹੀਦੇ ਹਨ।