Building Multi-Page Apps in Flutter

Building multi-page apps is a common use case in Flutter development. Flutter uses a simple and intuitive routing mechanism to navigate between different pages in your app.

Step 1: Create Pages

Each page in Flutter is a widget. You can create new pages by defining a class for each screen in your app. For example:

            
            class FirstPage extends StatelessWidget {
                @override
                Widget build(BuildContext context) {
                    return Scaffold(
                        appBar: AppBar(title: Text('First Page')),
                        body: Center(child: Text('Welcome to the First Page')),
                    );
                }
            }
            
        

Step 2: Navigate Between Pages

You can use Navigator.push to navigate between pages:

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

Step 3: Passing Data Between Pages

You can pass data between pages by using the constructor of the target page:

            
            class SecondPage extends StatelessWidget {
                final String message;

                SecondPage({required this.message});

                @override
                Widget build(BuildContext context) {
                    return Scaffold(
                        appBar: AppBar(title: Text('Second Page')),
                        body: Center(child: Text(message)),
                    );
                }
            }
            
        

Now, when you navigate to the SecondPage, you can pass a message to it:

            
            Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => SecondPage(message: 'Hello from First Page')),
            );