Multi Page Applications in Flutter

In Flutter, multi-page applications can be built using the Navigator widget and named routes. The Navigator widget manages a stack of screens, allowing users to navigate back and forth between screens as they use the app.

Here's an example of how to build a multi-page application in Flutter using named routes

Define your named routes and their corresponding screens in your MaterialApp widget in main.dart

​import 'package:flutter/material.dart';
import 'package:flutter_blog/screens/home_screen.dart';
import 'package:flutter_blog/screens/post_screen.dart';
import 'package:flutter_blog/screens/settings_screen.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Blog',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/post': (context) => PostScreen(),
        '/settings': (context) => SettingsScreen(),
      },
    );
  }
}
In this example, we have defined three named routes: '/' for the home screen, '/post' for the post screen, and '/settings' for the settings screen.

Navigate to a named route using Navigator.pushNamed()

​Navigator.pushNamed(context, '/post');

In this example, we are navigating to the post screen using the '/' route.

Receive arguments from a named route using ModalRoute.of() and settings.arguments

​class PostScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context)!.settings.arguments as Map<String, dynamic>;
    final post = args['post'];
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Blog'),
      ),
      body: Center(
        child: Text(post.title),
      ),
    );
  }
}
In this example, we are receiving a post object as an argument from the '/' route and displaying its title in the post screen.

Navigate back to the previous screen using Navigator.pop()

​Navigator.pop(context);

In this example, we are navigating back to the home screen from the post screen.

Pass arguments to a named route using Navigator.pushNamed() and arguments

​Navigator.pushNamed(
  context,
  '/post',
  arguments: {'post': post},
);
In this example, we are passing a post object as an argument to the post screen using the '/post' route.

Add a button to navigate to the settings screen:

​ElevatedButton(
  onPressed: () {
    Navigator.pushNamed(context, '/settings');
  },
  child: Text('Settings'),
),
In this example, we are adding an ElevatedButton to the home screen that navigates to the settings screen when pressed.

Run your app and test the multi-page navigation

​flutter run
This is just a basic example of how to build a multi-page application in Flutter using named routes. You can customize the named routes to fit your app's specific needs, such as adding more screens or passing different arguments between screens.