**Course Title:** Mastering Dart: From Fundamentals to Flutter Development **Section Title:** Layout and Navigation in Flutter **Topic:** Develop a multi-screen Flutter application that utilizes different layouts and navigation methods.(Lab topic) **Introduction** In the previous topics, you've learned about Flutter's layout and navigation fundamentals, including the use of layout widgets (Row, Column, Stack, etc.) and Material Design and Cupertino widgets. Now, it's time to put these concepts into practice by building a multi-screen Flutter application. In this lab, you'll create a fully functional app with multiple screens, utilizing different layouts and navigation methods. **Prerequisites** Before starting this lab, make sure you have a good understanding of the following concepts: * Flutter's layout widgets (Row, Column, Stack, etc.) * Material Design and Cupertino widgets * Navigation and routing in Flutter * Managing app states with Navigator and routes **Project Overview** Your task is to develop a simple e-commerce app that allows users to browse products and navigate between different screens. The app should have the following features: * A home screen that displays a list of products * A product detail screen that displays the product information * A cart screen that displays the items added to the cart * Navigation between screens using buttons and gestures **Step 1: Create a new Flutter project** Create a new Flutter project using your preferred IDE or the command line. If you're using an IDE, follow these steps: * Open your IDE and create a new Flutter project * Choose the "Flutter" template and click "Next" * Enter the project name and location, then click "Finish" Alternatively, you can create a new Flutter project using the command line: ```bash flutter create multi_screen_app ``` **Step 2: Design the app layout** Design the layout for each screen in your app. You can use sketching tools or simply draw a wireframe to visualize the layout. **Home Screen** * Use a `ListView` to display a list of products * Use a `Card` widget to display each product * Add a "View Cart" button at the top right corner of the screen **Product Detail Screen** * Use a `Column` widget to display the product information * Use a `Text` widget to display the product name, description, and price * Add a "Add to Cart" button at the bottom of the screen **Cart Screen** * Use a `ListView` to display the items added to the cart * Use a `Card` widget to display each item * Add a "Checkout" button at the bottom of the screen **Step 3: Implement the app layout** Implement the layout for each screen in your app using Flutter widgets. Start with the home screen: ```dart // 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: ListView.builder( itemCount: 10, itemBuilder: (context, index) { return Card( child: Padding( padding: const EdgeInsets.all(16.0), child: Row( children: [ Image.asset('assets/product_image.png'), Expanded( child: Text( 'Product $index', style: TextStyle(fontSize: 20), ), ), Text( '\$10.99', style: TextStyle(fontSize: 20), ), ], ), ), ); }, ), floatingActionButton: FloatingActionButton( onPressed: () { Navigator.push( context, MaterialPageRoute(builder: (context) => CartScreen()), ); }, tooltip: 'View Cart', child: Icon(Icons.shopping_cart), ), ); } } ``` Implement the product detail screen and cart screen similarly. **Step 4: Implement navigation and routing** Implement navigation and routing between screens using Navigator and routes. Add a "View Cart" button to the home screen that navigates to the cart screen: ```dart // home_screen.dart FloatingActionButton( onPressed: () { Navigator.push( context, MaterialPageRoute(builder: (context) => CartScreen()), ); }, tooltip: 'View Cart', child: Icon(Icons.shopping_cart), ) ``` Add a "Back" button to the cart screen that navigates back to the home screen: ```dart // cart_screen.dart AppBar( leading: IconButton( icon: Icon(Icons.arrow_back), onPressed: () { Navigator.pop(context); }, ), title: Text('Cart Screen'), ) ``` **Step 5: Run the app** Run the app on a simulator or physical device to test the layout and navigation. **Conclusion** In this lab, you've successfully developed a multi-screen Flutter application that utilizes different layouts and navigation methods. You've learned how to design and implement app layouts, implement navigation and routing between screens, and use Material Design and Cupertino widgets. **What's Next?** In the next topic, you'll learn about state management and its importance in Flutter. You'll learn how to use state management solutions such as Provider and Riverpod to manage app state and build more complex Flutter apps. **External Resources** * Flutter Documentation: [https://flutter.dev/docs](https://flutter.dev/docs) * Flutter Cookbook: [https://flutter.dev/docs/cookbook](https://flutter.dev/docs/cookbook) * Flutter GitHub Repository: [https://github.com/flutter/flutter](https://github.com/flutter/flutter) **Leave a Comment or Ask for Help** If you have any questions or need help with this lab, leave a comment below. I'll do my best to respond promptly and provide assistance.