Build Your First Flutter App in 2025 – Step-by-Step Guide for Absolute Beginners
Introduction
Flutter is Google’s powerful framework for building cross-platform apps with a single codebase. Whether you're targeting Android, iOS, web, or desktop, Flutter makes the process smooth and fast. In this beginner’s tutorial, you’ll learn how to build a simple Flutter app from scratch and run it on your emulator or physical device.
Step 1: Install Flutter SDK
Visit flutter.dev and download the SDK for your OS (Windows, macOS, or Linux). After downloading:
Extract the zip
Add the Flutter folder to your system PATH
Run flutter doctor in your terminal to verify installation
Step 2: Set Up an Editor
Install either:
Visual Studio Code (lightweight, fast)
Android Studio (includes Android SDK and emulator)
Install the Flutter and Dart plugins from your editor’s extensions or plugins section.
Step 3: Create a New Flutter Project
Open your terminal or VS Code terminal, and run:
flutter create my_first_app
Navigate into your project directory:
cd my_first_app
Open the folder in your editor of choice.
Step 4: Understand the Folder Structure
Here’s what matters for now:
lib/main.dart – This is the entry point of your appandroid/, ios/ – Platform-specific codepubspec.yaml – Used for dependencies and assets
Step 5: Replace the Default Code
Open lib/main.dart and delete everything. Replace it with this simple code:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My First Flutter App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomeScreen(),
);
}
}
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: Center(
child: Text(
'Hello, Flutter!',
style: TextStyle(fontSize: 24),
),
),
);
}
}
Step 6: Run the App
Make sure you have an emulator running or a physical device connected.
Then run:
flutter run
Your app will compile and launch with a simple screen that says “Hello, Flutter!”
Step 7: Add Some Interactivity
Now, let’s add a button that updates a counter.
Replace HomeScreen with this version:
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('My Flutter Counter App'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('You pressed the button this many times:'),
Text(
'$_counter',
style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: _incrementCounter,
child: Text('Press Me'),
),
],
),
),
);
}
}
Now, your app has a button that increases a number every time it’s pressed.
Step 8: What’s Next?
Explore adding more widgets like TextField, Image, or ListView. Flutter’s widget library is extensive and beginner-friendly.
You can also learn how to:
Use external packages from pub.dev
Navigate between multiple screens
Fetch and display data from APIs
Conclusion
You’ve just built your first Flutter app in 2025 using the latest stable tools. With this foundation, you're ready to explore more advanced UI design, state management, and real-world app architecture. Flutter empowers you to build fast, beautiful apps that run on multiple platforms with a single codebase.
You can join our indemand flutter course, take demo now.