Learn Navigator 1.0 in Flutter (Imperative Navigation) #

Navigator 1.0 is Flutter’s traditional, imperative navigation system. It manages app screens using a stack-based approach, where each screen is a Route. You explicitly push and pop routes to move between screens.

This approach is simple, widely used, and ideal for small to medium-sized apps.

---

Core Concept Navigator 1.0 #

• Flutter maintains a navigation stack
• Each screen = a Route
• New screens are pushed onto the stack
• Screens are popped to go back

Think of it like a stack of pages:

Home → Profile → Settings

---

Basic Terminology Navigator 1.0 #

Term	Description
Navigator	Manages routes (screens)
Route	A screen/page (usually MaterialPageRoute)
push()	Open a new screen
pop()	Go back to previous screen
pushReplacement()	Replace current screen
pushAndRemoveUntil()	Clear previous routes

---

Basic Example #

Navigating to a New Screen #

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondScreen()),
);

Going Back #

Navigator.pop(context);

---

Passing Data Between Screens #

Send Data #

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => DetailsScreen(name: 'Shoaib'),
  ),
);

Receive Data #

class DetailsScreen extends StatelessWidget {
  final String name;

  const DetailsScreen({required this.name});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Text(name)),
    );
  }
}

---

Returning Data from a Screen #

Return Data #

Navigator.pop(context, 'Success');

Receive Returned Data #

final result = await Navigator.push(
  context,
  MaterialPageRoute(builder: (_) => ResultScreen()),
);

print(result);

---

Named Routes (Navigator 1.0) #

Define Routes #

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => HomeScreen(),
    '/profile': (context) => ProfileScreen(),
  },
);

Navigate Using Route Name #

Navigator.pushNamed(context, '/profile');

Pass Arguments #

Navigator.pushNamed(
  context,
  '/profile',
  arguments: 'Shoaib',
);

---

Route Management Methods #

Replace Current Screen #

Navigator.pushReplacement(
  context,
  MaterialPageRoute(builder: (_) => LoginScreen()),
);

Clear Navigation Stack #

Navigator.pushAndRemoveUntil(
  context,
  MaterialPageRoute(builder: (_) => HomeScreen()),
  (route) => false,
);

---

Dialogs & Bottom Sheets (Also Navigator 1.0) #

Dialogs and bottom sheets also use Navigator internally.

showDialog(
  context: context,
  builder: (_) => AlertDialog(
    title: Text('Alert'),
    content: Text('Something went wrong'),
  ),
);

---

Advantages of Navigator 1.0 #

• Simple and easy to learn
• Fully imperative (direct control)
• Great for small & medium apps
• Works well with existing Flutter widgets

---

Limitations of Navigator 1.0 #

• Hard to manage complex navigation flows
• Not URL-friendly (for web)
• Deep linking is difficult
• Navigation logic spread across UI

---

When to Use Navigator 1.0 #

Use Navigator 1.0 when:

• You are building mobile-first apps
• App has simple navigation
• You want quick implementation
• You are a Flutter beginner

---

Navigator 1.0 vs Navigator 2.0 (Quick Comparison) #

Feature	Navigator 1.0	Navigator 2.0
Style	Imperative	Declarative
Complexity	Simple	Complex
Deep Linking	Poor	Excellent
Web Support	Limited	Strong

---

Best Practices #

• Use named routes for large apps
• Centralize route definitions
• Avoid navigation logic inside business logic
• Use pushReplacement for auth flows