Basic Introduction Flutter Framework.pdf 2023

1. Introduction Flutter
Framework
- Lim Phanith - 21 March 2023

2. Content Outline
I. Introduction
II. Basic Widget
III. Stateless and Stateful
IV. Counter App
V. MVC Architecture Pattern
VI. Environments
2

3. I. Introduction
Flutter is an open-source UI software development kit created by Google for
building high-performance, high-fidelity, apps for mobile, web, and desktop
platforms from a single codebase. It uses the Dart programming language and
provides a rich set of pre-built widgets and tools that help developers create
beautiful and responsive user interfaces.
One thing Flutter is not is a language. Flutter uses Dart as its programming
language. If you know Kotlin, Swift, Java or Typescript, you’ll find Dart familiar,
since it’s an object-oriented C-style language.
3

4. I. Introduction
Why use Flutter ?
1. Cross-platform development: Flutter allows developers to write one codebase
and deploy it to multiple platforms, including iOS, Android, web, desktop, and
even embedded devices. This can save time and resources compared to
developing separate apps for each platform.
2. Fast development cycles: Flutter's hot reload feature allows developers to
make changes to their code and see the results immediately, making the
development process faster and more efficient.
3. Beautiful and customizable user interfaces: Flutter comes with a rich set of
customizable widgets and tools that allow developers to create visually
stunning and highly responsive user interfaces.
4. High performance: Flutter's architecture is designed to deliver high
performance, even on less powerful devices. This makes it ideal for developing
apps that require high-speed graphics rendering or complex animations.
5. Strong community support: Flutter has a large and active community of
developers who contribute to open-source projects, offer support and
guidance, and share knowledge and resources.
4

5. I. Introduction
When not to use Flutter ?
1. Games and audio: Flutter doesn’t have a sophisticated audio engine yet, so
audio editing or mixing apps are at a disadvantage over those that are
purpose-built for a specific platform.
2. Apps with specific native SDK needs: Flutter supports many, but not all, native
features. Fortunately, you can usually create bridges to platform-specific code.
However, if the app is highly integrated with a device’s features and platform
SDKs, it might be worth writing the app using the platform-specific tools.
3. Certain platforms: Flutter doesn’t run everywhere. It doesn’t support Apple
Bitcode yet, which means that it doesn’t support watchOS, tvOS or certain iOS
app extensions. Its support for the web is still in its early days, which means
that Flutter has many features and performance improvements ahead of it but
they’re coming.
5

6. I. Introduction
void main() {
runApp(
const Center(
child: Text(
'Hello, world!',
textDirection: TextDirection.ltr,
),
),
);
}
6

7. II. Basic Widget
MaterialApp Widget
MaterialApp is a predefined class or widget in a flutter. It is likely the main or core
component of a flutter app. The MaterialApp widget provides a wrapper around other
Material Widgets. We can access all the other components and widgets provided by Flutter
SDK.
7

8. II. Basic Widget
void main() {
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Material App'),
),
body: const Center(
child:Text("Hello World")
),
),
)
);
}
8

9. II. Basic Widget
Scaffold
Scaffold is a basic implementation of a visual structure for an app's user interface. It
provides a visual framework that includes a top app bar, a bottom navigation bar, and a
body area that can hold any other widget.
9

10. II. Basic Widget
Scaffold(
backgroundColor: Colors.grey[300],
appBar: AppBar(
backgroundColor: Colors.grey[300],
title: const Text('Flutter Demo Home Page', style: TextStyle(color: Colors.blueAccent),),
elevation: 0,
),
body: const Center(
child: Text('Scaffold'),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
tooltip: 'Increment',
child: const Icon(Icons.add),
),
bottomNavigationBar: BottomAppBar(
color: Colors.grey[300],
child: SizedBox(
height: 50,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
IconButton(
icon: const Icon(Icons.home),
onPressed: () {},
),
IconButton(
icon: const Icon(Icons.search),
onPressed: () {},
),
IconButton(
icon: const Icon(Icons.add),
onPressed: () {},
),
],
),
),
),
),
10

11. II. Basic Widget
Container
Container: A box that can be decorated with a background color, border, padding, and
margin.
Container(
height: 300,
width: 300,
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(10),
boxShadow: <BoxShadow> [
BoxShadow(
color: Colors.grey.shade500,
blurRadius: 15,
spreadRadius: 1,
offset: const Offset(4, 4),
),
const BoxShadow(
color: Colors.white,
blurRadius: 15,
spreadRadius: 1,
offset: Offset(-4, -4),
),
],
),
),
11

12. II. Basic Widget
Row: A horizontal layout widget that arranges its child widgets in a row.
void main() {
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Material App'),
),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: const [
Text("Item 1"),
Text("Item 2"),
Text("Item 3"),
Text("Item 4"),
],
),
)
),
)
);
}
12

13. II. Basic Widget
Column: A vertical layout widget that arranges its child widgets in a column.
void main() {
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Material App'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: const [
Text("Item 1"),
Text("Item 2"),
Text("Item 3"),
Text("Item 4"),
],
),
)
),
)
);
}
13

14. II. Basic Widget
Column: A vertical layout widget that arranges its child widgets in a column.
void main() {
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Material App'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: const [
Text("Item 1"),
Text("Item 2"),
Text("Item 3"),
Text("Item 4"),
],
),
)
),
)
);
}
14

15. II. Basic Widget
Container A rectangular box that can be decorated with a background color, a
border, or padding.
Text A widget that displays a string of text.
Row A widget that displays its children in a horizontal row.
Column A widget that displays its children in a vertical column.
Image A widget that displays an image from a local or remote source.
Icon A widget that displays a graphical icon
RaisedButton A widget that displays a raised button that responds to touch
FlatButton A widget that displays a flat button that responds to touch
IconButton - A widget that displays an icon button that responds to touch
TextField A widget that allows users to enter text
ListView A widget that displays a scrollable list of child widgets
GridView A widget that displays a scrollable grid of child widgets
Link: More Basic Widget
15

16. III. Stateless and Stateful
Stateless widgets: These are widgets that do not have any mutable state, i.e., their
properties cannot change once they are built. They are immutable and rebuild
themselves completely whenever their parent widget rebuilds.
Stateful widgets: These are widgets that have mutable state, i.e., their properties can
change during their lifetime. Stateful widgets are used to build UI elements that can
change dynamically based on user interaction or other factors.
16

17. IV. Counter App
17

18. V. MVC Architecture Pattern
MVC stands for model-view-controller. Here's what each of those components mean:
● Model: The backend that contains all the data logic
● View: The frontend or graphical user interface (GUI)
● Controller: The brains of the application that controls how data is displayed
18

19. V. MVC Architecture Pattern
19

20. VI. Environments
Environments are essential in software development and deployment to ensure that
software functions as intended, maintain system stability, and protect sensitive data. They
provide a way to test and refine software in different stages of development, isolate
development, testing, and production activities, ensure consistency across environments,
and enforce appropriate security measures.
● PRO -Production Environment
● UAT - User Acceptance Testing
● Dev - Development Environment
20

21. THANK YOU
21