DEV Community

Jayesh Prajapati
Jayesh Prajapati

Posted on

Getting Started with Mobile App Development Using Flutter — Step by Step Guide

Flutter is an open-source UI toolkit by Google that allows you to build Android, iOS, and web apps using a single codebase. In this guide, we’ll walk you through installing and setting up Flutter and creating your first simple app.

1. What is Flutter?

Flutter uses the Dart programming language and is a widgets-based framework, which means the UI is fully customizable.

Benefits:

Single codebase → Android + iOS + Web

Fast development → Hot Reload

Beautiful UI → Material & Cupertino widgets

2. System Requirements

Windows:

Windows 10/11

Disk Space: 1.64 GB (Flutter SDK)

RAM: 8 GB recommended

Tools: PowerShell 5.0+, Git

Mac:

macOS (64-bit)

Xcode (for iOS builds)

Linux:

Ubuntu 20+

Git, curl, unzip installed

3. Installing Flutter SDK

Windows Example:

Download the latest Flutter SDK from the official website

Extract the zip folder (e.g., C:\src\flutter).

Add C:\src\flutter\bin to your system PATH.

Open CMD and run:

flutter doctor

This checks dependencies and highlights any missing setup steps.

Mac/Linux: Similar steps, just different paths.

4. Setting Up an IDE

Option 1: VS Code (recommended)

Install VS Code

Add Flutter & Dart extensions

Option 2: Android Studio

Install Android Studio

Add Flutter plugin

Set up an Android Emulator

5. Creating Your First Flutter App

Open terminal or CMD.

Run:

flutter create hello_flutter

Navigate to the project:

cd hello_flutter

Run the app:

flutter run

Example Code — main.dart

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('Hello Flutter')),
        body: Center(child: Text('Welcome to Flutter!')),
      ),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

6. Hot Reload & Hot Restart

Hot Reload: Save code → changes appear instantly

Hot Restart: Restart the app → resets the state

Tip: Hot Reload is your best friend for fast experimentation.

  1. Next Steps

Explore Flutter widgets (Text, Column, Row, Stack)

Learn State Management (Provider / BLoC)

Build small apps (Counter, To-Do, Calculator)

If you found this guide helpful, consider supporting me on Buy Me a Coffee! ☕

Top comments (0)