Kako navigacija funkcionira u Flutteru?

Question

IT Interview Practice · Accepted Answer

**Navigacija** u Flutteru omogućava premještanje između ekrana (stranica/ruta) — koristeći **Navigator** (stack ruta) za osnovnu navigaciju, ili deklarativne pakete za rutiranje u složenijim aplikacijama. Razumijevanje navigacije je bitno za izgradnju aplikacija s više ekrana.

## Osnovna navigacija s Navigator (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
```

## Proslijeđivanje podataka između ekrana

```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)
```

## Imenske rute i moderna rutiranje

```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
```

## Zašto je to važno

Razumijevanje navigacije je bitno jer **većina aplikacija ima više ekrana**, a premještanje između njih je temeljno za funkcionalnost aplikacije, pa je to neizbježno znanje iz Fluttera.

Temeljni koncept — **Navigator Fluttera koji upravlja stackom ruta** (ekrana), gdje **push** omogućava navigaciju naprijed (dodavanje ekrana na vrh) i **pop** omogućava vraćanje natrag (uklanjanje gornjeg ekrana) — predstavlja temeljni mentalni model navigacije, a metafora stacka (podudaranje sa načinom na koji korisnici navigiraju naprijed i natrag kroz aplikaciju) čini je intuitivnom.

Razumijevanje **osnovne navigacije** (push/pop) je nužno za svaku aplikaciju s više ekrana.

Razumijevanje **proslijeđivanja podataka između ekrana** (slanje podataka naprijed preko konstruktora i vraćanje rezultata pri popanju, jer push vraća Future) je bitno jer ekrani često trebaju dijeliti podatke (proslijeđivanje stavke na detaljan ekran, vraćanje izbora).

Razumijevanje **imenskih ruta** (definiranje ruta po imenu za čitaviju organizaciju s više ekrana) i posebno **moderne deklarativne rutiranja** (paketi poput **go_router**, koji se preporučuje za aplikacije koje nisu trivijalne, pružajući URL rutiranje, duboko linkiranje, web podršku i ugniježđenu navigaciju) odražava trenutne najbolje prakse — kako aplikacije rastu, deklarativna rutiranja bolje rukuje složenošću nego imperativno push/pop.

Budući da praktički sve aplikacije imaju više ekrana i navigiranje između njih (s proslijeđivanjem podataka) je temeljno za funkcionalnost aplikacije, i budući da razumijevanje modela Navigator stacka, proslijeđivanja podataka i moderne rutiranja (go_router) je nužno za izgradnju aplikacija s više ekrana, razumijevanje navigacije u Flutteru je bitno, temeljno znanje — jezična sposobnost koja je potrebna u gotovo svakoj Flutter aplikaciji i nužna za izgradnju iskustava s više ekrana koja prave aplikacije zahtijevaju.

Osnovna navigacija s Navigator (stack)

Proslijeđivanje podataka između ekrana

Imenske rute i moderna rutiranje

Zašto je to važno

Povezana pitanja