🛣️Navigation

Navigation is the mechanism of moving between different screens in your application. Flutter provides a robust navigation and routing system to manage the transition between different pages.

1. The Navigator Widget 🧭

The Navigator widget is at the core of Flutter's navigation system. It manages a stack of Route objects and provides methods to manipulate the stack, like push and pop.

2. Basic Navigation 🔄

Let's start with a simple example of navigating between two screens.

Code

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondPage()),
            );
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Back to First Page'),
        ),
      ),
    );
  }
}

Result

3. Named Routes 📜

Named routes provide a way to define a mapping between a named identifier and a route. This is useful for more structured navigation and handling deep links.

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => FirstPage(),
    '/second': (context) => SecondPage(),
  },
);

4. Passing Data Between Routes 🔄

You can pass data between routes by passing arguments to the Navigator.push method.

// Define a constructor for SecondPage to accept data
class SecondPage extends StatelessWidget {
  final String data;

  SecondPage({required this.data});

  // ...
}

// Now pass data while navigating
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SecondPage(data: 'Hello from First Page!'),
  ),
);

Assignments 📝

Let's reinforce your understanding with some practical exercises:

• Create an app with at least three screens and implement navigation between them.

• Pass data from one screen to another and display it.

• Implement a 'back' button to navigate to the previous screen.

• Explore and implement a drawer navigation or tab navigation in your app.

By tackling these assignments, you’ll get hands-on experience with Flutter's navigation system.

Up next, working with assets!