In this section, we will guide you through building a simple Flutter app. Flutter is a UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase. This topic will cover the following:

1. Setting up Flutter
2. Creating a new Flutter project
3. Understanding the project structure
4. Building the UI
5. Running the app

Before we start building our Flutter app, we need to set up the Flutter SDK on our development environment.

1. Download Flutter SDK:

   • Visit the Flutter website and download the SDK for your operating system.

2. Extract the SDK:

   • Extract the downloaded file to a suitable location on your system.

3. Update your path:

   • Add the Flutter bin directory to your system's PATH environment variable.

4. Run Flutter Doctor:

   • Open a terminal and run the following command to check if there are any dependencies you need to install:

     flutter doctor
     

Once Flutter is set up, we can create a new Flutter project.

1. Open a terminal and run:

   flutter create my_first_flutter_app
   

2. Navigate to the project directory:

   cd my_first_flutter_app
   

3. Open the project in your preferred IDE (e.g., VS Code, Android Studio):

   code .
   

A Flutter project has a specific structure. Here are the key directories and files:

• lib/: Contains the Dart code for your application.
• test/: Contains the test files for your application.
• android/: Contains the Android-specific code.
• ios/: Contains the iOS-specific code.
• pubspec.yaml: A configuration file for your project, including dependencies.

Let's build a simple UI for our Flutter app. We will create a basic app that displays "Hello, Flutter!" on the screen.

1. Open lib/main.dart and replace its content with the following code:

   import 'package:flutter/material.dart';
   
   void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter Demo',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),
         home: MyHomePage(),
       );
     }
   }
   
   class MyHomePage extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text('My First Flutter App'),
         ),
         body: Center(
           child: Text(
             'Hello, Flutter!',
             style: TextStyle(fontSize: 24),
           ),
         ),
       );
     }
   }
   

• main() function: The entry point of the application. It calls runApp() with MyApp as an argument.
• MyApp class: A stateless widget that sets up the MaterialApp and its theme.
• MyHomePage class: Another stateless widget that builds the main UI of the app, including an AppBar and a centered text widget.

Now that we have our UI set up, let's run the app.

1. Connect a physical device or start an emulator.
2. Run the following command in the terminal:

   flutter run
   

You should see the app running on your device or emulator, displaying "Hello, Flutter!".

In this section, we covered the basics of setting up Flutter, creating a new project, understanding the project structure, building a simple UI, and running the app. This foundational knowledge will help you as you continue to explore and build more complex Flutter applications. In the next section, we will delve into more advanced features of Flutter and Dart for web development.