How to Build Your First Flutter App From Scratch Step by Step?

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:

Understand what Flutter is and how it works
Set up Flutter on your system
Create your first Flutter project
Build a simple app UI
Run and test your app

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:

Android
iOS
Web
Desktop

With Flutter:

You write code once
Run it on multiple platforms

This saves time and effort and improves development speed.

Why Use Flutter for App Development?

Here are some reasons why Flutter is widely used:

Fast development with hot reload
Beautiful UI with customizable widgets
Single codebase for multiple platforms
Strong community support

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

Go to the official Flutter website
Download the Flutter SDK for your operating system (Windows, macOS, Linux)

Set Environment Path

Extract the Flutter folder
Add Flutter to your system PATH

Verify Installation

Run this command in terminal:

flutter doctor

This command checks:

Flutter installation
Android Studio setup
Connected devices

Fix any issues shown in the result.

Step 2: Install Required Tools

To build and run Flutter apps, you need:

Android Studio or VS Code
Flutter plugin
Dart plugin

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:

lib → contains main app code
main.dart → starting point of the app
pubspec.yaml → manages dependencies

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

Creates a basic app layout
Adds an AppBar
Displays text in the center

Step 6: Run Your Flutter App

Now run your app.

Use command:

flutter run

Make sure:

Emulator is running OR
Device is connected

You will see your app on the screen.

Step 7: Understand Flutter Widgets

In Flutter, everything is a widget.

Examples:

Text
Button
Column
Row
Container

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:

Colors
Fonts
Padding

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

Not installing dependencies correctly
Ignoring flutter doctor errors
Not understanding widgets properly
Writing too much code in one file

Best Practices for Flutter Development

Keep code clean and organized
Use widgets properly
Test app regularly
Use meaningful variable names

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.