**Course Title:** Mastering Dart: From Fundamentals to Flutter Development **Section Title:** Introduction to Flutter: Setting Up and Building Widgets **Topic:** Set up a Flutter project and build a simple user interface using various widgets.(Lab topic) ### Objective By the end of this lab, you will be able to set up a new Flutter project, understand the basic structure of a Flutter project, and create a simple user interface using various widgets. ### Setting up a new Flutter project To create a new Flutter project, you can use the following methods: #### Using the Command Line You can create a new Flutter project using the command line by running the following command: ```dart flutter create my_app ``` Replace `my_app` with the name of your app. #### Using an IDE If you are using an IDE like Android Studio or Visual Studio Code, you can create a new Flutter project by following these steps: 1. Open your IDE. 2. Click on "Start a new Flutter project". 3. Choose the project location and name. 4. Click on "Next" and then "Finish". #### Project Structure When you create a new Flutter project, you will see the following structure: ```dart my_app/ ├── android/ ├── assets/ ├── ios/ ├── lib/ ├── test/ ├── .gitignore ├── .pubspec.yaml ├── pubspec.lock └── .vscode/ ``` * `android/` and `ios/` folders contain the platform-specific code for Android and iOS respectively. * `assets/` folder contains the assets of the project such as images and fonts. * `lib/` folder contains the main code of the project. * `test/` folder contains the unit tests and integration tests of the project. * `.gitignore` file specifies the files that should be ignored by Git. * `.pubspec.yaml` file specifies the dependencies of the project. * `pubspec.lock` file specifies the version of the dependencies that are used in the project. ### Building a simple user interface Let's create a simple user interface using various widgets. In the `lib/` folder, open the `main.dart` file and replace the existing code with the following code: ```dart import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'My App', theme: ThemeData( primarySwatch: Colors.blue, ), home: const MyHomePage(), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({Key? key}) : super(key: key); @override State<MyHomePage> createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Counter App'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ const Text( 'You have pushed the button this many times:', ), Text( '$_counter', style: Theme.of(context).textTheme.displayLarge, ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: const Icon(Icons.add), ), ); } } ``` In this code, we have created a simple counter app that displays the number of times a button is pressed. #### Widgets Used * `MaterialApp`: This widget is the top-level widget of a Flutter app. * `Scaffold`: This widget provides a basic material design visual layout structure. * `AppBar`: This widget displays a horizontal bar at the top of the app bar that can have a leading (left) widget, a title, and action items. * `Text`: This widget displays a piece of text. * `Column`: This widget displays a vertical array of children. * `FloatingActionButton`: This widget displays a floating action button. * `Icon`: This widget displays an icon. #### Key Concepts * `StatelessWidget` and `StatefulWidget` are the two types of widgets in Flutter. `StatelessWidget` is a widget that cannot change its configuration once it's been created, while `StatefulWidget` is a widget that can change its configuration. * `build` method is a method that builds the widget. * `Scaffold` is a widget that provides a basic material design visual layout structure. * `AppBar` is a widget that displays a horizontal bar at the top of the app bar. * `Text` is a widget that displays a piece of text. ### Practical Takeaways * Create a new Flutter project using the command line or an IDE. * Understand the basic structure of a Flutter project. * Create a simple user interface using various widgets. * Use `StatelessWidget` and `StatefulWidget` to create widgets. * Use `build` method to build the widget. ### External Resources * [Flutter documentation](https://docs.flutter.dev/) * [Flutter widgets catalog](https://docs.flutter.dev/flutter/widgets/widgets-library) ### Comments and Help If you have any questions or need help with the lab, please leave a comment below. We will be happy to help.