First Flutter App: A Step-by-Step Tutorial

Want to build beautiful mobile apps with just one codebase? Flutter is the way to go! It lets you create apps for Android, iOS, web, and desktop using a single programming language — Dart.

In this tutorial, we’ll help you build your first Flutter app step by step, even if you're new to it.

---

🛠️ What You’ll Learn

• Installing Flutter

• Setting up an IDE

• Creating your first app

• Understanding the project structure

• Running the app

• Making simple changes

---

✅ Step 1: Install Flutter

🔗 Download Flutter SDK

Visit: https://flutter.dev/docs/get-started/install

Choose your OS (Windows, macOS, Linux) and follow the steps to:

• Download the SDK

• Add it to your system path

• Run flutter doctor in terminal to check setup

flutter doctor

✅ This command checks if everything is installed correctly.

---

💻 Step 2: Install IDE (VS Code or Android Studio)

🔹 Option 1: Visual Studio Code

• Install VS Code

• Add Flutter and Dart extensions

🔹 Option 2: Android Studio

• Install Android Studio

• Install Flutter & Dart plugins

---

📱 Step 3: Set Up Android/iOS Emulator

You can either:

• Use an Android Virtual Device (AVD)

• Connect a real phone via USB

Make sure your device is detected:

flutter devices

---

🚀 Step 4: Create Your First Flutter App

In terminal or command prompt:

flutter create my_first_app
cd my_first_app

This creates a new project folder named my_first_app.

---

🔍 Step 5: Explore main.dart

Open lib/main.dart in your editor. You’ll see default code:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("My First App")),
      body: Center(child: Text("Hello Flutter!")),
    );
  }
}

---

▶️ Step 6: Run Your App

Make sure your emulator/phone is running.

Then run:

flutter run

You’ll see a simple app with a title bar and text “Hello Flutter!”

---

🧪 Step 7: Make a Change

Let’s change the text:

body: Center(child: Text("Welcome to Flutter!")),

Now save the file. Flutter will hot reload the app instantly!

---

🎨 Step 8: Add a Button

Let’s add a button under the text.

Replace body: section with:

body: Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text("Welcome to Flutter!"),
      ElevatedButton(
        onPressed: () {
          print("Button clicked!");
        },
        child: Text("Click Me"),
      )
    ],
  ),
),

✅ Save and see the updated UI.

---

📦 Step 9: Add a Package

Let’s use a third-party package called google_fonts.

In pubspec.yaml, add under dependencies:

dependencies:
  flutter:
    sdk: flutter
  google_fonts: ^6.1.0

Then run:

flutter pub get

Use it in code:

import 'package:google_fonts/google_fonts.dart';

Text(
  "Styled Text",
  style: GoogleFonts.lato(fontSize: 24),
)

---

📱 Final Code (Summary)

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("First Flutter App")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "Hello Flutter!",
              style: GoogleFonts.poppins(fontSize: 24),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                print("Clicked!");
              },
              child: Text("Click Me"),
            )
          ],
        ),
      ),
    );
  }
}

---

🎯 What You Learned

• How to set up Flutter

• How to create and run a Flutter app

• How to add text, buttons, and use packages

• Basic UI layout using Column, Text, and ElevatedButton

---

🚀 Next Steps

• Learn about Stateful Widgets

• Try navigation between pages

• Build a To-Do app or Quiz app

• Explore more Flutter UI widgets like ListView, Container, Image

---

🧠 Final Tip

Flutter is easy to start with and powerful to grow with. Just build small apps and keep experimenting!

Learn Flutter Training Course

Read More 

AWS Data Engineering course

Selenium with Python Training Course

Selenium with Java Training Course

Generative AI Course