Building Your First Flutter App Step-by-Step
Absolutely! Here's a step-by-step guide to building your first Flutter app — from setup to running a simple app.
🚀 Building Your First Flutter App Step-by-Step
1. Set Up Your Development Environment
a) Install Flutter SDK
Download from flutter.dev
Follow instructions for your OS (Windows, macOS, Linux)
Add Flutter to your system PATH
b) Install an IDE
Visual Studio Code (with Flutter and Dart extensions)
Android Studio (recommended for Android emulator)
c) Verify Installation
Open terminal and run:
bash
Copy
Edit
flutter doctor
Fix any missing dependencies.
2. Create a New Flutter Project
In your terminal:
bash
Copy
Edit
flutter create my_first_app
cd my_first_app
This scaffolds a basic Flutter app.
3. Run the Default App
Connect a device or start an emulator/simulator.
Run:
bash
Copy
Edit
flutter run
You’ll see a demo Flutter app running on your device/emulator.
4. Explore the Main File
Open lib/main.dart. Here’s the default code explained briefly:
dart
Copy
Edit
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
appBar: AppBar(title: const Text('Hello Flutter')),
body: const Center(child: Text('Welcome to Flutter!')),
),
);
}
}
runApp() starts your app.
MaterialApp sets the app’s theme.
Scaffold gives structure with an AppBar and Body.
Center and Text widgets show text.
5. Modify the App
Change the text inside Text widget:
dart
Copy
Edit
body: const Center(child: Text('My First Flutter App')),
Save the file. If your app is running, it will hot reload automatically with changes.
6. Add a Button
Replace the body with a button that shows a message when clicked:
dart
Copy
Edit
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
String message = 'Welcome to Flutter!';
void _updateMessage() {
setState(() {
message = 'You pressed the button!';
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
appBar: AppBar(title: const Text('Hello Flutter')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(message),
ElevatedButton(
onPressed: _updateMessage,
child: const Text('Press Me'),
),
],
),
),
),
);
}
}
7. Understand the Concepts
StatelessWidget: Widget that doesn’t change (static UI).
StatefulWidget: Widget with a mutable state that can update UI.
setState() tells Flutter to rebuild UI with new data.
Column arranges widgets vertically.
ElevatedButton is a clickable button.
8. Next Steps
Explore layouts with Row, Stack, Container
Add images and assets
Use navigation to move between screens
Fetch data from APIs
Learn about state management (Provider, Riverpod, Bloc)
Summary
Step Description
Setup Install Flutter SDK & IDE
Create Project flutter create my_first_app
Run App Use flutter run
Edit UI Modify widgets in main.dart
Add Interaction Use StatefulWidget & setState()
Learn More Explore layouts, navigation, state
Learn Flutter Training in Hyderabad
Read More
What is Flutter? An Introduction for Beginners
Comments
Post a Comment