Unit-3: Getting Started with
Flutter 3
Unit Structure
3.1 Learning Objectives
3.2 Introduction
3.3 Hardware and Software requitement to install Flutter
3.4 Install the Flutter SDK
3.5 Update your Windows PATH variable
3.6 Configure Android Development
3.7 Configure your target Android device
3.8 Agree to Android licenses
3.9 Check your development setup
3.10 Creating Your First Flutter App
3.11 Writing Your First Flutter Code
3.12 Key Concepts
3.13 Let us sum up
3.14 Further Reading
3.15 Assignment
24
3.1 LEARNING OBJECTIVE
After studying this unit student should be able to:
• Install and configure Flutter SDK on their system (Windows, macOS, or Linux)
and set up development tools like Android Studio or Visual Studio Code.
• Create a new Flutter project from the command line and understand the basic
structure of a Flutter project.
• Build and run a Flutter application on an emulator or physical device, and
understand the difference between hot reload and hot restart.
• Modify the default Flutter project to display custom content and become familiar
with writing and editing Dart code.
• Understand the role of widgets in Flutter and differentiate between stateless and
stateful widgets.
• Leverage Flutter’s hot reload feature to rapidly develop and debug Flutter
applications without losing the application state.
• Understand the key files and directories in a Flutter project, including
lib/main.dart, pubspec.yaml, and the platform-specific directories.
3.2 INTRODUCTION
Flutter has rapidly emerged as one of the most popular frameworks for building
cross-platform applications with a single codebase. Whether you're targeting
Android, iOS, web, or desktop, Flutter allows developers to build natively compiled
apps with expressive and flexible UI. Its development speed, performance, and
beautiful design make it a preferred choice for startups and large enterprises alike. In
this chapter, we will walk through the steps of getting started with Flutter, from
installation to writing your first app. We will learn Start building Flutter Android apps
on Windows
3.3 H/W AND S/W REQUIREMENT TO INSTALL FLUTTER
To install and run Flutter, your Windows environment must meet the following
hardware and software requirements.
Hardware requirements
25
Your Windows Flutter development environment must meet the following minimal
hardware requirements.
Requirement Minimum Recommended
x86_64 CPU Cores 4 8
Memory in GB 8 16
Display resolution in pixels WXGA (1366 x 768) FHD (1920 x 1080)
Free disk space in GB 11.0 60.0
Software requirements
To write and compile Flutter code for Android, you must have the following version of
Windows and the listed software packages.
Operating system
Flutter supports 64-bit version of Microsoft Windows 10 or later. These versions of
Windows should include the required Windows PowerShell 5 or later.
Development tools
Download and install the Windows version of the following packages:
• Git for Windows 2.27 or later to manage source code.
• Android Studio 2023.3.1 (Jellyfish) or later to debug and compile Java or
Kotlin code for Android. Flutter requires the full version of Android Studio.
When you run the current version of flutter doctor, it might list a different version of
one of these packages. If it does, install the version it recommends.
Configure a text editor or IDE
You can build apps with Flutter using any text editor or integrated development
environment (IDE) combined with Flutter's command-line tools.
Using an IDE with a Flutter extension or plugin provides code completion, syntax
highlighting, widget editing assists, debugging, and other features.
Popular options include:
• Visual Studio Code 1.77 or later with the Flutter extension for VS Code.
• Android Studio 2023.3.1 (Jellyfish) or later with the Flutter plugin for IntelliJ.
• IntelliJ IDEA 2023.3 or later with the Flutter plugin for IntelliJ.
The Flutter team recommends installing Visual Studio Code 1.77 or later and
the Flutter extension for VS Code. This combination simplifies installing the Flutter
SDK.
26
3.4 INSTALL THE FLUTTER SDK
Before we start building with Flutter, we need to set up the development
environment. The steps below guide you through the installation process for different
platforms: Windows, macOS, and Linux.
To install the Flutter SDK, you can use the VS Code Flutter extension or download
and install the Flutter bundle yourself.
To install Flutter, download the Flutter SDK bundle from its archive, move the bundle
to where you want it stored, then extract the SDK.
1. Download the following installation bundle to get the latest stable release of the
Flutter SDK.
https://storage.googleapis.com/flutter_infra_release/releases/stable/windows/flutt
er_windows_3.24.3-stable.zip
The Flutter SDK should download to the download folder.
2. Create a folder where you can install Flutter.
Consider creating a directory at %USERPROFILE% (C:\Users\{username})
or %LOCALAPPDATA% (C:\Users\{username}\AppData\Local).
3. Extract the file into the directory you want to store the Flutter SDK.
When finished, the Flutter SDK should be in
the C:\user\{username}\dev\flutter directory.
3.5 UPDATE YOUR WINDOWS PATH VARIABLE
To run Flutter commands in PowerShell, add Flutter to the PATH environment
variable. This section presumes that you installed the Flutter SDK
in %USERPROFILE%\dev\flutter.
1. Press Windows + Pause.
If your keyboard lacks a Pause key, try Windows + Fn + B.
The System > About dialog displays.
2. Click Advanced System Settings > Advanced > Environment Variables...
27
The Environment Variables dialog displays.
3. In the User variables for (username) section, look for the Path entry.
1. If the entry exists, double-click on it.
The Edit Environment Variable dialog displays.
1. Double-click in an empty row.
2. Type %USERPROFILE%\dev\flutter\bin.
3. Click the %USERPROFILE%\dev\flutter\bin entry.
4. Click Move Up until the Flutter entry sits at the top of the list.
5. Click OK three times.
2. If the entry doesn't exist, click New....
The Edit Environment Variable dialog displays.
1. In the Variable Name box, type Path.
2. In the Variable Value box, type %USERPROFILE%\dev\flutter\bin
3. Click OK three times.
4. To enable these changes, close and reopen any existing command prompts and
PowerShell instances.
3.6 CONFIGURE ANDROID DEVELOPMENT
1. Launch Android Studio.
The Welcome to Android Studio dialog displays.
2. Follow the Android Studio Setup Wizard.
3. Install the following components:
o Android SDK Platform, API 35.0.1
o Android SDK Command-line Tools
o Android SDK Build-Tools
o Android SDK Platform-Tools
o Android Emulator
3.7 CONFIGURE YOUR TARGET ANDROID DEVICE
Set up the Android emulator
To configure your Flutter app to run in an Android emulator, follow these steps to
create and select an emulator.
28
1. Enable VM acceleration on your development computer.
2. Start Android Studio.
3. Go to the Settings dialog to view the SDK Manager.
1. If you have a project open, go to Tools > Device Manager.
2. If the Welcome to Android Studio dialog displays, click the More
Options icon that follows the Open button and click Device
Manager from the dropdown menu.
4. Click Virtual.
5. Click Create Device.
The Virtual Device Configuration dialog displays.
6. Select either Phone or Tablet under Category.
7. Select a device definition. You can browse or search for the device.
8. Click Next.
9. Click x86 Images.
10. Click one system image for the Android version you want to emulate.
1. If the desired image has a Download icon to the right of the Release
Name, click it.
The SDK Quickfix Installation dialog displays with a completion
meter.
2. When the download completes, click Finish.
11. Click Next.
The Virtual Device Configuration displays its Verify Configuration step.
12. To rename the Android Virtual Device (AVD), change the value in the AVD
Name box.
13. Click Show Advanced Settings and scroll to Emulated Performance.
14. From the Graphics dropdown menu, select Hardware - GLES 2.0.
This enables hardware acceleration and improves rendering performance.
15. Verify your AVD configuration. If it is correct, click Finish.
16. In the Device Manager dialog, click the Run icon to the right of your desired
AVD. The emulator starts up and displays the default canvas for your selected
Android OS version and device.
29
3.8 AGREE TO ANDROID LICENSES
Before you can use Flutter and after you install all prerequisites, agree to the
licenses of the Android SDK platform.
1. Open an elevated console window.
2. Run the following command to enable signing licenses.
C:> flutter doctor --android-licenses
If you accepted the Android Studio licenses at another time, this command
returns:
You can skip the next step.
3. Before agreeing to the terms of each license, read each with care.
3.9 CHECK YOUR DEVELOPMENT SETUP
The flutter doctor command validates that all components of a complete Flutter
development environment for Windows.
1. Open PowerShell.
2. To verify your installation of all the components, run the following command.
PS C:> flutter doctor
As you chose to develop for Android, you do not need all components. If you
followed this guide, the result of your command should resemble:
30
Troubleshoot Flutter doctor issues
When the flutter doctor command returns an error, it could be for Flutter, VS Code,
Android Studio, the connected device, or network resources.
If the flutter doctor command returns an error for any of these components, run it
again with the verbose flag.
PS C:> flutter doctor -v
Check the output for other software you might need to install or further tasks to
perform. If you change the configuration of your Flutter SDK or its related
components, run flutter doctor again to verify the installation.
Congratulations. Having installed all prerequisites and the Flutter SDK, you can start
developing Flutter apps for Android on Windows. Now you can start developing
Android on Windows apps with Flutter
3.10 CREATING YOUR FIRST FLUTTER APP
Now that the environment is set up, let’s create and run your first Flutter app.
Create a New Flutter Project
1. Open your terminal and navigate to the directory where you want to create your
project.
2. Run the flutter create my_first_app command to create a new Flutter project
as shown below:
31
This command will create a new Flutter project with the necessary files and
directories.
3. Navigate to your project directory:
cd my_first_app
Run the App
1. Run the following command to launch the app on the available emulator or
device:
If you have an Android or iOS emulator set up, you should see the default Flutter app
running on your device. The app will display a counter that increments each time you
press the "plus" button.
32
Understanding the Project Structure
• lib/main.dart: This is the main entry point of your Flutter app. The main.dart file
contains the main() function, which is the starting point of any Dart application. By
default, it also contains a StatefulWidget that displays a simple counter app.
• pubspec.yaml: This file is the configuration file for your Flutter project. It includes
information about your app’s dependencies, such as plugins, fonts, and assets.
• android/ and ios/ folders: These folders contain platform-specific code for
Android and iOS. As a Flutter developer, you typically won’t need to modify these
files unless you need custom native functionality.
3.11 WRITING YOUR FIRST FLUTTER CODE
Let’s modify the default Flutter app to display a custom message. Follow the steps
below to change the basic counter app into a simple "Hello, Flutter!" app.
1. Open the lib/main.dart file in your IDE.
2. Replace the default code with the following:
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!',
style: TextStyle(fontSize: 24),
),
),
),
);
}
}
33
Save the file, and if you’re using hot reload, you should see the changes applied
immediately. The app will now display a "Welcome to Flutter!" message at the center
of the screen.
Now you should understand that the lib/main.dart is the main entry point of your
Flutter app and it contains the main() function, which is the starting point of any Dart
application. By default, it also contains a StatefulWidget that displays a simple
counter app that can be modified as per requirement.
3.12 KEY CONCEPTS
Widgets: In Flutter, everything is a widget. Widgets are the building blocks of the UI.
There are two types of widgets in Flutter:
• Stateless Widgets: Widgets that do not change over time, such as static text or
icons.
• Stateful Widgets: Widgets that can change based on user interaction or other
factors, like forms or dynamic content.
34
Hot Reload vs. Hot Restart
• Hot Reload: Allows you to instantly view the changes you’ve made in the app
without losing the current app state.
• Hot Restart: Completely rebuilds the app and clears the app’s state.
3.13 LET US SUM UP
In this chapter, we covered the basics of getting started with Flutter. You learned
how to install Flutter, create your first project, and run a simple app. We also touched
on the project structure and how to write basic Flutter code. In the upcoming
chapters, we will dive deeper into Flutter’s widgets, navigation, state management,
and more.
3.14 FURTHER READING
• https://docs.flutter.dev/get-started/install/windows/mobile
3.15 ASSIGNMENT
1. Write steps to install flutter?
2. Write hardware and software requirement to install Flutter
3. Define: Widget, Stateful Widgets and Stateless Widgets
4. What is difference between Hot Reload and Hot Restart?
5. Explain Flutter project structure
35
