**Create a Multi-Screen App with Complex Navigation and Data Passing between Screens (Lab Topic)** **Objective:** In this lab topic, you will create a multi-screen app with complex navigation and data passing between screens. You will learn how to implement navigation flows, pass data between screens, and use Flutter's Navigator 2.0 for declarative routing. **Prerequisites:** - Completion of the previous topics in the Navigation and Routing section - Basic understanding of Flutter and its ecosystem - Familiarity with Dart programming language **Step 1: Setting up the Project** 1. Create a new Flutter project using the command `flutter create multi_screen_app`. 2. Open the `lib/main.dart` file and replace the existing code with the following: ```dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Multi Screen App', home: HomeScreen(), ); } } class HomeScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Home Screen'), ), body: Center( child: ElevatedButton( onPressed: () { Navigator.push( context, MaterialPageRoute(builder: (context) => DetailScreen()), ); }, child: Text('Go to Detail Screen'), ), ), ); } } class DetailScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Detail Screen'), ), body: Center( child: ElevatedButton( onPressed: () { Navigator.pop(context); }, child: Text('Go Back'), ), ), ); } } ``` This code sets up a basic Flutter app with two screens: Home Screen and Detail Screen. The Home Screen has a button that navigates to the Detail Screen, and the Detail Screen has a button that navigates back to the Home Screen. **Step 2: Implementing Complex Navigation Flows** 1. Create a new file called `navigation_flow.dart` and add the following code: ```dart import 'package:flutter/material.dart'; class NavigationFlow extends StatefulWidget { @override _NavigationFlowState createState() => _NavigationFlowState(); } class _NavigationFlowState extends State<NavigationFlow> { int _currentIndex = 0; final _screens = [ HomeScreen(), DetailScreen(), AnotherScreen(), ]; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Navigation Flow'), ), body: _screens[_currentIndex], bottomNavigationBar: BottomNavigationBar( currentIndex: _currentIndex, onTap: (index) { setState(() { _currentIndex = index; }); }, items: [ BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'), BottomNavigationBarItem(icon: Icon(Icons.info), label: 'Detail'), BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Another'), ], ), ); } } ``` This code implements a navigation flow with three screens: Home Screen, Detail Screen, and Another Screen. The navigation flow uses a bottom navigation bar to switch between screens. **Step 3: Passing Data between Screens** 1. Create a new file called `data_passing.dart` and add the following code: ```dart import 'package:flutter/material.dart'; class DataPassing extends StatefulWidget { @override _DataPassingState createState() => _DataPassingState(); } class _DataPassingState extends State<DataPassing> { String _data = ''; void _updateData(String newData) { setState(() { _data = newData; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Data Passing'), ), body: Center( child: ElevatedButton( onPressed: () { _updateData('New Data'); }, child: Text('Update Data'), ), ), ); } } ``` This code demonstrates how to pass data between screens using a stateful widget. The `DataPassing` widget has a button that updates the `_data` variable when pressed. **Step 4: Using Flutter's Navigator 2.0 for Declarative Routing** 1. Create a new file called `navigator_2_0.dart` and add the following code: ```dart import 'package:flutter/material.dart'; class Navigator2_0 extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Navigator 2.0', home: HomeScreen(), routes: { '/detail': (context) => DetailScreen(), '/another': (context) => AnotherScreen(), }, ); } } ``` This code demonstrates how to use Flutter's Navigator 2.0 for declarative routing. The `Navigator2_0` widget defines routes for the `Home Screen`, `Detail Screen`, and `Another Screen`. **Conclusion:** In this lab topic, you learned how to create a multi-screen app with complex navigation and data passing between screens. You implemented navigation flows, passed data between screens, and used Flutter's Navigator 2.0 for declarative routing. **Practical Takeaways:** * Use stateful widgets to pass data between screens. * Implement navigation flows using bottom navigation bars or tabs. * Use Flutter's Navigator 2.0 for declarative routing. * Use routes to define navigation flows. **Exercise:** Create a new Flutter project and implement a navigation flow with three screens: Home Screen, Detail Screen, and Another Screen. Pass data between screens using stateful widgets. Use Flutter's Navigator 2.0 for declarative routing. **External Resources:** * Flutter documentation: [Navigator 2.0](https://api.flutter.dev/flutter/material/Navigator2-class.html) * Flutter documentation: [Stateful widgets](https://api.flutter.dev/flutter/dartWidgets/StatefulWidget-class.html) **Leave a comment or ask for help if you have any questions or need further clarification on any of the concepts covered in this lab topic.**