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