Flutter - Flutter Navigation and Routing

7. Flutter Navigation and Routing

Navigation and routing are fundamental concepts in mobile app development, and Flutter provides a powerful and flexible navigation system for building multi-screen applications. In this detailed Flutter navigation and routing tutorial, we will cover various aspects, including basic navigation, passing data between screens, named routes, and creating a navigation drawer.

1. Basic Navigation

Creating a New Flutter Project:

Begin by creating a new Flutter project using the following command:

flutter create navigation_example

Adding Screens:

Create two Dart files for our screens: 'home_screen.dart' and 'second_screen.dart'. You can place these files in the 'lib' directory of your project.

'lib/home_screen.dart'

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Navigate to the second screen
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
          child: Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

'lib/second_screen.dart'

import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Navigate back to the home screen
            Navigator.pop(context);
          },
          child: Text('Back to Home'),
        ),
      ),
    );
  }
}

Routing:

In the 'main.dart' file, set up routing for the two screens.

'lib/main.dart'

import 'package:flutter/material.dart';
import 'package:navigation_example/home_screen.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Navigation Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

Now, when you run the app ('flutter run'), you can navigate from the Home Screen to the Second Screen by pressing the "Go to Second Screen" button and return to the Home Screen by pressing "Back to Home."

2. Passing Data Between Screens

To pass data between screens, you can use constructor parameters. Let's modify the Second Screen to receive and display a message from the Home Screen.

Modifying 'second_screen.dart'

class SecondScreen extends StatelessWidget {
  final String message;

  SecondScreen({required this.message});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Message from Home Screen:',
              style: TextStyle(fontSize: 18),
            ),
            Text(
              message,
              style: TextStyle(fontSize: 24),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text('Back to Home'),
            ),
          ],
        ),
      ),
    );
  }
}

Modifying 'home_screen.dart'

Update the Home Screen to pass a message when navigating to the Second Screen.

ElevatedButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => SecondScreen(message: 'Hello from Home!'),
      ),
    );
  },
  child: Text('Go to Second Screen'),
)

3. Named Routes

Named routes provide a more organized way to handle navigation. Let's create named routes for our screens.

Modifying 'main.dart'

import 'package:flutter/material.dart';
import 'package:navigation_example/home_screen.dart';
import 'package:navigation_example/second_screen.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Navigation Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/second': (context) => SecondScreen(message: 'Hello from Named Route!'),
      },
    );
  }
}

Now, you can navigate to the Second Screen using the named route.

ElevatedButton(
  onPressed: () {
    Navigator.pushNamed(context, '/second');
  },
  child: Text('Go to Second Screen (Named Route)'),
)

4. Navigation Drawer

A navigation drawer is a common UI pattern in mobile apps. Let's add a navigation drawer to our app.

Modifying 'home_screen.dart'

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Text(
                'Navigation Example',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                ),
              ),
            ),
            ListTile(
              title: Text('Second Screen (Drawer)'),
              onTap: () {
                Navigator.pushNamed(context, '/second');
              },
            ),
          ],
        ),
      ),
      body: Center(
        child: Text('Welcome to the Home Screen!'),
      ),
    );
  }
}

Conclusion:

In this Flutter Navigation and Routing tutorial, you've learned how to:

Perform basic navigation between screens.
Pass data between screens.
Implement named routes for structured navigation.
Create a navigation drawer for app navigation.

These skills are essential for building complex and user-friendly Flutter applications. Feel free to experiment with these concepts to create more advanced navigation flows in your apps.

100+ Popular IT Courses to Learn.

15+ Categories. 500+ IT Courses to Learn.

Leadership Program

100+ Popular IT Courses to Learn.

15+ Categories. 500+ IT Courses to Learn.

Leadership Program

Tutorials

Flutter Navigation and Routing

7. Flutter Navigation and Routing

Drop us a line