Running Your First Flutter App

Overview

This guide will walk you through creating and running your first Flutter application. You'll set up a new project, build a basic user interface, and run your app on an emulator or physical device.

Prerequisites

Before you start, ensure that:

• Flutter is installed and correctly set up on your machine.
• You have an IDE installed (Visual Studio Code or Android Studio) with the Flutter and Dart plugins.
• An emulator or a physical device is available for testing.

Creating a New Flutter Project

1. Open Your Terminal or Command Prompt

   Depending on your operating system, open the terminal (macOS/Linux) or command prompt (Windows).

2. Navigate to Your Projects Directory

   Change to the directory where you want to create your Flutter project:

   cd path/to/your/projects/directory

3. Create a New Flutter Project

   Run the following command to create a new Flutter project:

   flutter create my_first_flutter_app

   Replace my_first_flutter_app with your desired project name.

4. Navigate into the Project Directory

   cd my_first_flutter_app

Understanding the Project Structure

Your new Flutter project will include several important files and directories:

• lib/main.dart: The main entry point of your Flutter application. This file contains the default Flutter application code.
• pubspec.yaml: The project’s configuration file where dependencies and project metadata are defined.
• android/: Contains Android-specific code and configuration.
• ios/: Contains iOS-specific code and configuration.

Building and Running Your App

1. Open the Project in Your IDE

   • Visual Studio Code: Open Visual Studio Code and select File -> Open Folder, then choose the my_first_flutter_app directory.
   • Android Studio: Open Android Studio, select Open, and choose the my_first_flutter_app directory.

2. Launch an Emulator or Connect a Device

   • Android Emulator:
     • Open Android Studio, go to AVD Manager, and start an emulator.
   • iOS Simulator (macOS only):
     • Open Xcode, go to Xcode -> Open Developer Tool -> Simulator, and launch a simulator.
   • Physical Device:
     • Connect your device via USB and ensure USB debugging (for Android) or developer mode (for iOS) is enabled.

3. Run Your App

   • Visual Studio Code:
     • Open the terminal in VS Code (Ctrl+`).
     • Run the following command:

       flutter run

   • Android Studio:
     • Click on the green Run button (▶) or select Run -> Run 'main.dart' from the menu.

4. View Your App

   Your Flutter app should start running on the selected emulator or physical device. You’ll see a default Flutter demo app with a counter, which you can interact with.

Modifying the Default App

1. Open lib/main.dart

   • Locate the lib/main.dart file in your project directory. This file contains the basic code for the default Flutter app.

2. Modify the Code

   Change the code in main.dart to customize the app. For example, you can replace the default content with a simple text widget:

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

3. Hot Reload

   With your app running, you can use Flutter’s Hot Reload feature to instantly see changes. Save your main.dart file, and the app will automatically update with your changes.

Summary

Congratulations! You’ve created, built, and run your first Flutter application. You also learned how to modify the default app and use Hot Reload to streamline your development process. Continue exploring Flutter’s widgets and features to build more complex applications.

For more detailed documentation and tutorials, refer to the official Flutter documentation.