Simple Flutter App Tutorial
Using Android Studio + Flutter
Beginner hands-on lab: Button changes text
Target duration: 30 to 45 minutes
Difficulty level: Beginner
Flutter Beginner Tutorial | Android Studio + Flutter
1. Tutorial Objective
By the end of this tutorial, students will be able to:
Install and set up Flutter in Android Studio.
Create a new Flutter project.
Run the app using Chrome or Android Emulator.
Create a simple button that changes text when clicked.
2. Required Software
Software Purpose Official Link
Main editor for creating and running
Android Studio [Link]
Flutter projects.
Framework and tools needed to [Link]
Flutter SDK
build Flutter apps. install/windows
Easy option to run Flutter app on
Google Chrome [Link]
web during practice.
Flutter Beginner Tutorial | Android Studio + Flutter
3. Install Android Studio
1. Open your browser.
2. Go to [Link]
3. Click Download Android Studio.
4. Open the downloaded installer.
5. Click Next until the installation is complete.
6. Open Android Studio.
4. Install Flutter SDK
1. Open your browser.
2. Go to [Link]
3. Download the Flutter SDK zip file.
4. Right-click the zip file and choose Extract All.
5. Extract the Flutter folder to C:/src/flutter.
Important: The Flutter SDK path should be C:/src/flutter. Do not choose C:/src/flutter/bin.
5. Install Flutter Plugin in Android Studio
1. Open Android Studio.
2. Click File > Settings.
3. Choose Plugins.
4. Click Marketplace.
5. Search for Flutter.
6. Click Install.
7. Restart Android Studio after installation.
6. Create a New Flutter Project
1. Open Android Studio.
2. Click File > New > New Flutter Project.
3. Select Flutter.
4. Enter Flutter SDK path: C:/src/flutter.
5. Enter project name: simple_button_app.
6. Click Create.
Flutter Beginner Tutorial | Android Studio + Flutter
7. Run the App
Option A: Run using Chrome
1. At the top of Android Studio, find the device dropdown.
2. Choose Chrome (web).
3. Click the Run button.
4. The Flutter app will open in Google Chrome.
Option B: Run using Android Emulator
1. Click Tools > Device Manager.
2. Click Create Device.
3. Choose Pixel 6 or Pixel 7.
4. Choose API 35 or API 36. If needed, click Download.
5. Click Next > Finish.
6. Click the Play button to start the emulator.
7. Select the emulator from the device dropdown and click Run.
Flutter Beginner Tutorial | Android Studio + Flutter
8. Edit [Link]
Open the file below:
lib > [Link]
Delete the existing code and paste the code below:
import 'package:flutter/[Link]';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({[Link]});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
String message = "Hello Student!";
void changeText() {
setState(() {
message = "Button has been clicked!";
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text("Simple Flutter App"),
),
body: Center(
child: Column(
mainAxisAlignment: [Link],
children: [
Text(
message,
style: const TextStyle(fontSize: 24),
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: changeText,
child: const Text("Click Me"),
),
],
),
),
),
);
}
}
Flutter Beginner Tutorial | Android Studio + Flutter
9. Expected Output
Before clicking the button: Hello Student!
After clicking the button: Button has been clicked!
10. Simple Code Explanation
Code Explanation
main() The starting point of the app.
runApp() Runs the Flutter application.
MaterialApp Main structure of the Flutter app.
Scaffold Provides the page layout.
AppBar Creates the top title bar.
Text Displays text on the screen.
ElevatedButton Creates a button.
setState() Updates the screen when data changes.
11. Student Activity
Ask students to modify the app:
Change the app title to My First Flutter App.
Change the first message to Welcome to Flutter.
Change the button text to Press Here.
Change the message after clicking the button to My app is working!
Flutter Beginner Tutorial | Android Studio + Flutter
12. Summary
In this tutorial, students learned how to install Android Studio, set up Flutter, create a Flutter project,
run the app, and write simple Flutter code using a button and text.
Flutter Beginner Tutorial | Android Studio + Flutter