CSE431
Mobile Programming
Fall 2025
MODULE 2:
Introduction to Flutter
Flutter architectural overview
Online Flutter IDE
Write your first Flutter app
Android Studio Environment
Understanding and Using APK Files in Flutter Projects
Widgets
2
Flutter architectural overview
About Flutter
▪ Flutter is a cross-platform UI toolkit that is designed to allow code
reuse across operating systems such as iOS and Android, while
also allowing applications to interface directly with underlying
platform services.
▪ The goal is to enable developers to deliver high-performance apps
that feel natural on different platforms, embracing differences
where they exist while sharing as much code as possible.
▪ During development, Flutter apps run in a VM that offers stateful
hot reload of changes without needing a full recompile.
▪ For release, Flutter apps are compiled directly to machine code,
whether Intel x64 or ARM instructions, or to JavaScript if targeting
the web.
3
Flutter
architectural
overview
Architectural layers
4
There are several online IDEs that can be used to
test your dart code and develop apps
using utter. Here are some of them.
Online [Link]
Flutter IDE [Link]
[Link]
Run flutter doctor from a
Before your start windows power shell – Make
sure everything is ok!
6
Step 1: Create a new Flutter Project
7
Step 2: set Flutter SDK path
8
Step 3: set project name and target platforms
9
Step 4: change Android View to Project View
The main. dart is a critical file in
your project, as it serves as the
entry point for the application. This
file contains the main() function,
which is responsible for starting the
application by running the code
that builds the UI and initializes any
other necessary components.
The pubspec file specifies
dependencies that the project
requires, such as particular
packages (and their versions), fonts,
or image files. It also specifies other
requirements, such as
dependencies on developer
packages (like testing or mocking
packages), or particular constraints
on the version of the Flutter SDK.
10
Step 5: Start Virtual Device
11
Step 6: Run App
12
13
Understanding and Using APK Files in
Flutter Projects
Locating the APK in a Flutter Project
<project-root>/build/app/outputs/flutter-apk/[Link]
<project-root>/build/app/outputs/flutter-apk/[Link]
Material Design vs. Cupertino Design in Flutter
Widgets are the building blocks of a Flutter app's
user interface, and each widget is an immutable
declaration of part of the user interface.
Widgets form a hierarchy based on composition.
Widgets Each widget nests inside its parent and can receive
context from the parent.
This structure carries all the way up to the root
widget (the container that hosts the Flutter app,
typically MaterialApp or CupertinoApp).
UI Updates of Flutter Apps
Apps update their user interface in response to events (such as a user interaction) by
telling the framework to replace a widget in the hierarchy with another widget. The
framework then compares the new and old widgets, and efficiently updates the user
interface.
Flutter has its own implementations of each UI control, rather than deferring to those
provided by the system: for example, there is a pure Dart implementation of both the
iOS Toggle control and the one for the Android equivalent.
This approach provides several benefits:
Provides for unlimited extensibility. A developer who wants a variant of the Switch
control can create one in any arbitrary way, and is not limited to the extension points
provided by the OS.
Avoids a significant performance bottleneck by allowing Flutter to composite the entire
scene at once, without transitioning back and forth between Flutter code and platform
code.
Decouples the application behavior from any operating system dependencies. The
application looks and feels the same on all versions of the OS, even if the OS changed
the implementations of its controls. 17
Building widgets
As mentioned earlier, you determine the visual representation of a widget
by overriding the build() function to return a new element tree.
This tree represents the widget's part of the user interface in more concrete
terms. For example, a toolbar widget might have a build function that
returns a horizontal layout of some text and various buttons.
As needed, the framework recursively asks each widget to build until the
tree is entirely described by concrete renderable objects.
The framework then stitches together the renderable objects into a
renderable object tree.
18
Widget state
The framework introduces two major classes of widget: stateful and stateless
widgets.
Many widgets have no mutable state: they don't have any properties that change
over time (for example, an icon or a label). These widgets subclass StatelessWidget.
However, if the unique characteristics of a widget need to change based on user
interaction or other factors, that widget is stateful.
For example, if a widget has a counter that increments whenever the user taps a
button, then the value of the counter is the state for that widget. When that value
changes, the widget needs to be rebuilt to update its part of the UI. These widgets
subclass StatefulWidget, and (because the widget itself is immutable) they store
mutable state in a separate class that subclasses State. StatefulWidgets don't have
a build method; instead, their user interface is built through their State object.
19
Your First App
import 'package:flutter/[Link]';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({[Link]});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: [Link](seedColor: [Link]),
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
20
Your First App
class MyHomePage extends StatefulWidget {
const MyHomePage({[Link], required [Link]});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
void _goToSecondPage() {
[Link](
context,
MaterialPageRoute(builder: (context) => const SecondPage()),
);
}
21
Your First App
@override SizedBox(height: 50),
Widget build(BuildContext context) { ElevatedButton(
onPressed: _goToSecondPage,
return Scaffold( child: const Text('Go to Second Page'),
appBar: AppBar( ),
backgroundColor: Text("We have just modified this app!",
[Link](context).[Link], style: TextStyle(
title: Text([Link]), fontWeight: [Link],
), color: [Link]
body: Center( fontSize: 16,
),
child: Column( ),
mainAxisAlignment: [Link], ],
children: <Widget>[ ),
const Text('You have pushed the button this many ),
times:'), floatingActionButton: FloatingActionButton(
SizedBox(height: 50), onPressed: _incrementCounter,
Text( tooltip: 'Increment',
'$_counter', child: const Icon([Link]),
style: [Link](context).[Link], ),
), );
}
}
22
Your First App
class SecondPage extends StatelessWidget {
const SecondPage({[Link]});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Second Page'),
backgroundColor: [Link](context).[Link],
),
body: const Center(
child: Text(
'Welcome to the Second Page!',
style: TextStyle(fontSize: 24),
),
),
);
}
}
23
Aligning widgets
• You control how a row or column aligns its children using the mainAxisAlignment
and crossAxisAlignment properties.
• For a row, the main axis runs horizontally and the cross axis runs vertically.
• For a column, the main axis runs vertically and the cross axis runs horizontally.
24
Your first Flutter app
[Link]
25
End of Module 2