Introduction

Building your first mobile app can feel confusing, especially if you are new to development. But with Flutter, creating beautiful and high-performance mobile apps becomes much easier.

Flutter is an open-source UI toolkit by Google that allows you to build Android and iOS apps using a single codebase. This makes it one of the most popular frameworks for modern app development.

In this step-by-step guide, you will learn how to build your first Flutter app from scratch in simple words. This article is beginner-friendly and uses natural explanations so anyone can follow along.

By the end of this guide, you will:

Let’s get started.

What Is Flutter?

Flutter is a cross-platform mobile app development framework created by Google.

It uses the Dart programming language and allows developers to build apps for:

With Flutter:

This saves time and effort and improves development speed.

Why Use Flutter for App Development?

Here are some reasons why Flutter is widely used:

Flutter is ideal for beginners as well as professional developers.

Step 1: Install Flutter on Your System

Before building an app, you need to install Flutter.

Download Flutter SDK

Set Environment Path

Verify Installation

Run this command in terminal:

flutter doctor

This command checks:

Fix any issues shown in the result.

Step 2: Install Required Tools

To build and run Flutter apps, you need:

These tools help you write, run, and debug your app easily.

Step 3: Create Your First Flutter Project

Now let’s create a new Flutter project.

Run this command:

flutter create my_first_app

Then navigate to the project folder:

cd my_first_app

Open this folder in your code editor.

Step 4: Understand Project Structure

Flutter projects come with a predefined structure.

Important folders:

The main file is:

lib/main.dart

Step 5: Write Your First Flutter Code

Open main.dart and update the code.

Here is a simple example:

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 World!'),
        ),
      ),
    );
  }
}

What This Code Does

Step 6: Run Your Flutter App

Now run your app.

Use command:

flutter run

Make sure:

You will see your app on the screen.

Step 7: Understand Flutter Widgets

In Flutter, everything is a widget.

Examples:

Widgets help you build UI easily.

Example

Column(
  children: [
    Text('Welcome'),
    ElevatedButton(
      onPressed: () {},
      child: Text('Click Me'),
    ),
  ],
)

Step 8: Add Styling to Your App

You can customize your UI using:

Example:

Text(
  'Hello Flutter',
  style: TextStyle(
    fontSize: 24,
    color: Colors.blue,
  ),
)

Step 9: Add Interaction (Button Click)

Let’s make your app interactive.

ElevatedButton(
  onPressed: () {
    print('Button Clicked');
  },
  child: Text('Press Me'),
)

This adds basic user interaction.

Step 10: Build a Simple Counter App

Now let’s create a small project.

int counter = 0;

ElevatedButton(
  onPressed: () {
    counter++;
  },
  child: Text('Increase'),
)

This is the base of many beginner Flutter apps.

Common Mistakes Beginners Make

Best Practices for Flutter Development

Summary

Building your first Flutter app from scratch is easier than it looks. Flutter allows you to create powerful, cross-platform mobile applications using a single codebase. By installing Flutter, setting up tools, creating a project, and understanding widgets, you can quickly build and run your first app. With practice and the right approach, Flutter can help you become a skilled mobile app developer and build modern, high-performance applications for Android and iOS.