Flutter Tutorial for Beginners: Build Your First App Step by Step

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. Whether you're a seasoned developer or just getting started, Flutter makes it easy to create stunning apps quickly.

In this guide, we’ll walk through setting up Flutter and building your very first app — a simple, interactive counter. By the end, you’ll have a fully working app and a solid foundation for further Flutter adventures!

What is Flutter?

Flutter allows you to build beautiful, fast apps for any screen. Powered by the Dart language, it enables you to write one codebase and deploy everywhere — iOS, Android, web, desktop, and even embedded devices.

Why Flutter?

Flutter stands out among cross-platform frameworks for several reasons:

One codebase, many platforms: Write once and deploy to Android, iOS, web, desktop, and more.
Beautiful and expressive UIs: Create eye-catching apps with Flutter’s extensive widget library.
Faster development: Hot reload means you see changes instantly without restarting your app.
Great performance: Flutter compiles to native machine code for smooth animations and fast execution.
Backed by Google: Strong community support and rapid growth.

About Dart

Flutter apps are built using Dart, a modern, easy-to-learn language developed by Google.

Why Dart?

Optimized for UI: Dart was designed for building fast and expressive user interfaces.
Familiar syntax: Easy to pick up for anyone with experience in JavaScript, Java, or C#.
Compiled for speed: Produces fast native code for mobile, and JavaScript for web.
Null safety: Helps prevent common bugs at compile time.
Excellent tooling: Includes a great package manager, formatter, linter, and IDE support.

Prerequisites

Basic knowledge of programming (no prior Dart or mobile experience required!)
A computer running Windows, macOS, or Linux
At least 2GB of free disk space
An editor: VS Code or Android Studio

Installing Flutter

Flutter can be installed on macOS, Linux, or Windows.

Follow the steps for your operating system:

On macOS

Using Homebrew:

brew install --cask flutter

Or manual install:

Download the Flutter SDK
Extract it to a folder, for example: ~/development/flutter
Add Flutter to your PATH (add this line to your .zshrc or .bash_profile):
```
 export PATH="$PATH:$HOME/development/flutter/bin"
```

On Linux

Using Snap:

sudo snap install flutter --classic

Or manual install:

Download the Flutter SDK
Extract to a directory, for example: ~/development/flutter
Add Flutter to your PATH (add this to your .bashrc or .zshrc):
```
 export PATH="$PATH:$HOME/development/flutter/bin"
```

On Windows

Download the Flutter SDK ZIP
Extract it to C:\src\flutter
Add C:\src\flutter\bin to your system PATH:
- Open “Edit environment variables” from the Start menu
- Edit your Path variable and add C:\src\flutter\bin

Check your installation

Open your terminal (or command prompt) and run:

flutter doctor

This will check your environment and display any missing dependencies.

root@lpt-pun-00547: flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.29.3, on Ubuntu 20.04.6 LTS 5.15.0-139-generic, locale en_IN)[✓] Android toolchain - develop for Android devices (Android SDK version 36.0.0)
[✓] Chrome - develop for the web[✓] Linux toolchain - develop for Linux desktop
[✓] Android Studio (version 2025.1.1)[✓] IntelliJ IDEA Community Edition (version 2025.1)
[✓] VS Code (version 1.102.0)[✓] Connected device (2 available)
[✓] Network resources
• No issues found!

Choosing a Flutter Version (Channels)

Flutter is actively updated and offers multiple “channels”:

Stable: Most reliable, best for beginners and production.
Beta: Updated monthly, features that will eventually be in stable.
Dev & Master: For testing the newest features, may be unstable.

Tip:
Use the stable channel for your first app. To check or switch:
flutter channel
flutter channel stable
flutter upgrade
To check your version:
flutter --version

Creating a New Flutter Project

Open your terminal and run:

flutter create my_first_app

This will create a new folder called my_first_app with a sample app inside.

Navigate into your project folder:

cd my_first_app

Exploring the Project Structure

Here’s a quick overview of the important files and folders:

my_first_app/
├── android/        # Android native code
├── ios/            # iOS native code
├── lib/
│   └── main.dart   # Main Dart code (your app starts here)
├── pubspec.yaml    # Project metadata & dependencies
└── test/           # Tests

lib/main.dart — This is the entry point for your Flutter app.
pubspec.yaml — Where you add packages (dependencies).

Building Your First App

Open lib/main.dart in your code editor.

Replace the contents with the following code:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @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: Text(widget.title),
      ),
      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.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Running Your App

Connect a Device or Start an Emulator
- For Android: Open an emulator from Android Studio, or connect a real device with USB debugging enabled.
- For iOS: Open a simulator from Xcode, or connect your iPhone.
Run the App

In the terminal:
```
    flutter run
```
Or, click the “Run” button in VS Code/Android Studio.

Conclusion and Next Steps

Congratulations! 🎉 You’ve built and run your first Flutter app.
This is just the beginning — Flutter is a powerful toolkit with endless possibilities. Here’s what you can try next:

Explore more widgets like ListView, Image, and Form.
Learn about navigation (moving between screens).
Play with themes and custom styles.
Try publishing your app to the Play Store or App Store!

Resources:

If you enjoyed this guide, follow me for more Flutter tutorials and tips!

Getting Started with Flutter: Build Your First App

Table of contents