Building Your First Flutter App: Step-by-Step Tutorial

Flutter has rapidly become one of the most popular frameworks for building cross-platform apps. With a single codebase, you can build applications for Android, iOS, web, and desktop. If you’re new to Flutter, this step-by-step tutorial will walk you through creating your first Flutter app.

---

Step 1: Install Flutter and Set Up Environment

• Download Flutter SDK from the official website.
• Add Flutter to your system’s PATH.
• Install Android Studio or Visual Studio Code as your IDE.
• Run the following command to verify your installation:

flutter doctor

This will show any missing dependencies (like Android SDK or Xcode for iOS).

---

Step 2: Create a New Flutter Project

Once Flutter is set up, create a new project with:

flutter create my_first_app
cd my_first_app

This generates a basic Flutter template with everything you need to get started.

---

Step 3: Explore the Project Structure

Inside your project, you’ll find:

• lib/ → Main Dart code folder.
• main.dart → Entry point of your app.
• pubspec.yaml → Dependencies and assets configuration.

---

Step 4: Run Your First App

To run the app on an emulator or device:

flutter run

This will launch the default counter app that Flutter provides as a starting point.

---

Step 5: Edit the Main Dart File

Open lib/main.dart and replace the default code with something simpler:

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!",
            style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
          ),
        ),
      ),
    );
  }
}

Now your app will display a “Hello, Flutter!” message.

---

Step 6: Add Interactivity

Let’s make the app interactive with a button:

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int counter = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("My First Flutter App")),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text("You pressed the button this many times:"),
              Text(
                "$counter",
                style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    counter++;
                  });
                },
                child: Text("Press Me"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Now, each time you tap the button, the counter increases.

---

Step 7: Hot Reload & Iteration

One of Flutter’s best features is Hot Reload. When you save changes in your code, the app updates instantly without restarting. This speeds up the development process dramatically.

---

Step 8: Build and Test Your App

• Test on both Android Emulator and iOS Simulator.
• Use flutter build apk to generate an APK for Android.
• For iOS, use Xcode to build after flutter build ios.

---

Conclusion

Congratulations! 🎉 You’ve just built your first Flutter app. You now know how to:

• Set up Flutter
• Create a new project
• Build UI with widgets
• Add interactivity
• Run your app on multiple devices

From here, you can start exploring more advanced concepts like state management, navigation, APIs, and animations to make your apps production-ready.