**Course Title:** Flutter Development: Build Beautiful Mobile Apps **Section Title:** Flutter Widgets and Layouts **Topic:** Build a multi-screen app using various layout widgets and navigation.(Lab topic) **Objective:** By the end of this topic, students will be able to design and build a multi-screen app using various layout widgets and navigation, applying the concepts learned in the previous topics. **Prerequisites:** - Introduction to Flutter and Development Environment - Setting up the Flutter development environment (Flutter SDK, IDE setup) - Introduction to Dart programming language - Creating your first Flutter application - Understanding Flutter widgets: Stateless and Stateful widgets - Using layout widgets: Column, Row, Stack, and Container - Creating responsive layouts for different screen sizes - Best practices for widget composition **Lab Topic:** In this lab topic, we will build a multi-screen app using various layout widgets and navigation. We will create a simple e-commerce app with multiple screens, including a home screen, product details screen, and cart screen. **Step 1: Plan the App Structure** Before we start building the app, let's plan the app structure. We will create a new Flutter project and add the following screens: - Home Screen - Product Details Screen - Cart Screen - Checkout Screen We will use the following layout widgets: - Column - Row - Stack - Container - Scaffold **Step 2: Create the Home Screen** Create a new file called `home_screen.dart` and add the following code: ```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: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text('Welcome to our e-commerce app'), SizedBox(height: 20), ElevatedButton( onPressed: () { Navigator.push( context, MaterialPageRoute(builder: (context) => ProductDetailsScreen()), ); }, child: Text('View Products'), ), ], ), ), ); } } ``` **Step 3: Create the Product Details Screen** Create a new file called `product_details_screen.dart` and add the following code: ```dart import 'package:flutter/material.dart'; class ProductDetailsScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Product Details'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text('Product Name: Flutter'), SizedBox(height: 20), Text('Product Description: Flutter is an open-source mobile app development framework created by Google.'), SizedBox(height: 20), ElevatedButton( onPressed: () { Navigator.push( context, MaterialPageRoute(builder: (context) => CartScreen()), ); }, child: Text('Add to Cart'), ), ], ), ), ); } } ``` **Step 4: Create the Cart Screen** Create a new file called `cart_screen.dart` and add the following code: ```dart import 'package:flutter/material.dart'; class CartScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Cart'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text('You have added Flutter to your cart'), SizedBox(height: 20), ElevatedButton( onPressed: () { Navigator.push( context, MaterialPageRoute(builder: (context) => CheckoutScreen()), ); }, child: Text('Checkout'), ), ], ), ), ); } } ``` **Step 5: Create the Checkout Screen** Create a new file called `checkout_screen.dart` and add the following code: ```dart import 'package:flutter/material.dart'; class CheckoutScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Checkout'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text('Thank you for shopping with us'), SizedBox(height: 20), ElevatedButton( onPressed: () { Navigator.pop(context); }, child: Text('Continue Shopping'), ), ], ), ), ); } } ``` **Step 6: Add Navigation** Add navigation between the screens using the `Navigator` widget. Update the `home_screen.dart` file to navigate to the `product_details_screen` when the "View Products" button is pressed: ```dart ElevatedButton( onPressed: () { Navigator.push( context, MaterialPageRoute(builder: (context) => ProductDetailsScreen()), ); }, child: Text('View Products'), ) ``` **Step 7: Run the App** Run the app on a physical device or emulator to see the multi-screen app in action. **Key Concepts:** - Layout widgets: Column, Row, Stack, and Container - Navigation: Navigator widget - Screen structure: Home Screen, Product Details Screen, Cart Screen, Checkout Screen **Practical Takeaways:** - Use layout widgets to create responsive and visually appealing screens. - Use navigation to create a seamless user experience. - Plan the app structure before starting to build the app. **External Resources:** - Flutter documentation: [Navigation](https://flutter.dev/docs/navigating) - Flutter documentation: [Layout](https://flutter.dev/docs/layout) **Leave a comment or ask for help:** If you have any questions or need further clarification on any of the concepts, please leave a comment below.