COSC4083 Flutter.pdf of computer science

Quick notes on flutter

1. Flutter

2. Steps to follow
process of developing, testing and deploying a mobile
application
Mobile App Development, Wollo University, [email protected]
2
Set Up the
Development
Environment
Create a
New
Flutter
Project
Build your
app's
interface
by
defining
Widgets
Implement
application
logic
Add
functionalit
y and
features
Test your
application
Debug
and
Optimize
Build and
Deploy

3. Flutter
Flutter is a framework created by Google.
A cross-platform framework used to develop applications for
Android
iOS
Web
and Desktop
Dart Programming language
JIT →continuously recompiled directly on the device allowing hot reload.
A common way to say this is that a JIT compiler compiles code on the fly, or in other words, just
in time.
& AOT
Mobile App Development, Wollo University, [email protected]
3

4. Why Flutter for App Development
1. Open Source 2. Faster development Cycle 3. Super Productive
Flutter is Open-Source framework
Therefore, anyone can use it for
any given purpose.
Flutter is so fast that it takes less
then 30 sec for first full
compilation.
Comes with Hot-Reload & Hot-
Restart.
Comes with Hot-Reload & Hot-
Restart.
Due to Stateful widget hot-reload
feature Flutter is very fast
iterative coding style.
Mobile App Development, Wollo University, [email protected]
4

5. Why Flutter for App Development
4. Ease to learn & code sharing 5. Widget Libraries 6. Community Support
Any one who have basic knowledge
of OOPS & UI Designing can easily
learn Flutter.
Ready to use widget, Flutter have
many widget that you can use to
build flutter application.
Such as : http, get, share plus,
toggle switch etc.
Flutter Community is bit small if
we compare with other framework
like React.
But Flutter is grow very fast then
other framework.
Mobile App Development, Wollo University, [email protected]
5

6. Apps that are build using Flutter
Dream 11
Stadia
gaming platform.
eBay Google Pay
Mobile App Development, Wollo University, [email protected]
6

7. Feature of Flutter
Cross Platform App Development.
Easy access to Native Features.
Minimal Coding.
Fast Development
Hot Reload & Hot Restart
Mobile App Development, Wollo University, [email protected] 7

8. Architectural layers
•series of independent libraries that each depend on the underlying
layer.
•every part of the framework level is designed to be optional and
replaceable
Mobile App Development, Wollo University, [email protected] 8

9. Mobile App Development, Wollo University, [email protected] 9

10. platform-specific embedder
•provides an entry point; coordinates with the underlying operating
system for access to services like rendering surfaces, accessibility, and
input; and manages the message event loop.
•written in a language that is appropriate for the platform: Java and
C++ for Android, Objective-C/Objective-C++ for iOS and macOS, and
C++ for Windows and Linux
Mobile App Development, Wollo University, [email protected]
10

11. Flutter engine
➢ responsible for rasterizing composited scenes whenever a
new frame needs to be painted.
➢provides the low-level implementation of Flutter’s core API,
including graphics (through Skia i.e. 2D graphics library), text
layout, file and network I/O, accessibility support, plugin
architecture, and a Dart runtime and compile toolchain.
Mobile App Development, Wollo University, [email protected]
11

12. The Framework Layer
•developers interact with Flutter through the Flutter framework
•Basicfoundationalclasses, and building block services such
asanimation,painting, andgesturesthat offer commonly used abstractions
over the underlying foundation
•Therendering layerprovides an abstraction for dealing with layout.
•TheMaterialandCupertinolibraries offer comprehensive sets of controls that
use the widget layer’s composition primitives to implement the Material or iOS
design languages.
Mobile App Development, Wollo University, [email protected]
12

13. web version of the architectural layer
Mobile App Development, Wollo University, [email protected]
13

14. Let’s Flutter
Flutter SDK
IDE

15. Development platform
https://docs.flutter.dev/get-started/install
Mobile App Development, Wollo University, [email protected] 15
https://zapp.run/ for testing Dart & Flutter online

16. Steps
•Update your path e.g. C:\flutter\bin
•where flutter dart
•Run flutter doctor
•Android setup
•Install android studio (installs Android SDK Command-line Tools, and Android
SDK Build-Tools required by Flutter)
flutter config --android-studio-dir=<directory> to locate it if flutter
doctor makes missing
Install flutter and Dart programming plugins
•For Windows app, Visual studio with “Desktop development with C++” or
flutter config --no-enable-windows-desktop
•Set up your Android device
•EnableDeveloper options, or wireless debugging,
• Install the Google USB Driver (for windows only)
•Flutter recognizes your connected device ? Flutter devices to verify
Mobile App Development, Wollo University, [email protected]
16

17. Set up emulator
Set up the Android emulator→ android studio AVD Manager
•EnableVM accelerationon your machine (Virtualization must
be enabled on the device boot manager.)
Agree to Android Licenses flutter doctor --android-licenses
Set up an editor
Install the Flutter and Dart plugins (and restart IDE)
Flutter doctor again
Mobile App Development, Wollo University, [email protected] 17

18. With necessary settings
Mobile App Development, Wollo University, [email protected]
Try Stateful Hot Reload, the
ability to reload the code of a
live running app without
restarting or losing app state.
Debug mode→ with hot
reload
Release mode
Profile mode→ to analyze
performance
Create app Run app
flutter build apk
Building an APK
18

19. Structure
Project Structure
•Widget
•Layout
Mobile App Development, Wollo University, [email protected] 19

20. Dart
.dart
•A Programming language used for Flutter App development
•It also allows for real-time code changes without restarting
the app.
•Easy if you are familiar with Swift/Java/Javascript/C#

21. •Native platform: For apps targeting mobile and desktop devices, Dart
includes both a Dart VM with just-in-time (JIT) compilation and an ahead-of-
time (AOT) compiler for producing machine code.
•Web platform: For apps targeting the web, Dart can compile for
development or production purposes. Its web compilers translate Dart into
JavaScript or WebAssembly.
Mobile App Development, Wollo University, [email protected]
21

22. Variables
var name = 'Ali';
Object name = 'Awot';
String name = ‘’ ; print('Dear '+'name is ${name. s.toUpperCase()} ');
String name; // Non-nullable type. Cannot be `null` but can be String.
String? Name; // Nullable type. Can be `null` or string. Enable nullability, you add a ? to the end of
the type declaration.
Null safety: prevents an error that results from unintentional access of variables set to
null. Dart compile time error.
•It changes potentialruntime errorsintoedit-timeanalysis errors
int.parse(name);
assert(<condition>, <optionalMessage>);—to disrupt normal execution if a boolean condition is false.
assert(name!=null, “Name must not be null”);
assert(urlString.startsWith('https'));
Mobile App Development, Wollo University, [email protected]
22
void main(List<String> arguments){
//content here
}

23. Collections types
•Lists→ Arrays
•List
<type> name=[values];
var names = <String>['Seth', 'Kathy', 'Lars'];
var li=[1,2,3,’Computer Science’]; //li.lengthlist[3]
var constantList= const[1, 2, 3];
print(li[4]);
•Maps
•an object that associates keys and values.
var gifts = Map<String, String>();
var gifts = {name: ‘Ali’ , 1: 20.5 , batch:4 };
gifts['first'] = 'partridge’; //print(name);??
Mobile App Development, Wollo University, [email protected]
23
•Sets→an unordered collection of
unique items Set<String> se2={}
var names = <String>{};
Set<String> names = {};
var names = {};
//Creates a map, not a set.
var list = [1, 2, 3];
var list2 = [0, ...list]; spread operator(...)

24. Keywords
abstract
2
else import
2
show
1
as
2
enum in static
2
assert export
2
interface
2
super
async
1
extends is switch
await
3
extension
2
late
2
sync
1
base
2
external
2
library
2
this
break factory
2
mixin
2
throw
case false new true
catch final (variable) null try
class final (class)
2
on
1
typedef
2
const finally operator
2
var
continue for part
2
void
covariant
2
Function
2
required
2
when
default get
2
rethrow while
deferred
2
hide
1
return with
do if sealed
2
yield
3
dynamic
2
implements
2
set
2
Mobile App Development, Wollo University, [email protected]
24

25. types
Mobile App Development, Wollo University, [email protected]
25
•Numbers(int,double)
•Strings(String)
•Booleans(bool)
•Records((value1, value2))
•Lists(List, also known asarrays)
•Sets(Set)
•Maps(Map)
•Runes(Runes; often replaced by thecharactersAPI)
•Symbols(Symbol)
•The valuenull(Null)

26. Final and const Const variables are implicitly final,
final name = 'Bob'; // Without a type annotation
final String nickname ='Bobby’;
for class level constants, mark it as static (act as a modifier) const
like static double const PI=3.15;
Mobile App Development, Wollo University, [email protected]
26

27. Operators precedence
Description Operator Associativity
unary postfix expr++expr--()[]?[].?.! None
unary prefix -expr!expr~expr++expr--exprawaitexprNone
multiplicative */%~/ (Divide, returning an integer result)Left
additive +- Left
shift <<>>>>> Left
bitwise AND & Left
bitwise XOR ^ Left
bitwise OR | Left
relationalandtypetest>=><=<asisis! None
equality ==!= None
logical AND && Left
logical OR || Left
if null ?? Left
conditional expr1?expr2:expr3 Right
cascade ..?..
(allow you to make a sequence of operations on the same object.)
Left
assignment =*=/=+=-=&=^=etc. Right
Mobile App Development, Wollo University,
[email protected]
27

28. Operators
String mountName=‘Yegof’;
print(mountName is String);
(employee as Person).firstName = 'Bob’; //as for type cast
If( mountName is! Int)
•assign only if the assigned-to variable is null, use the ??= operator.
b ??= value; // Assign value to b if b is null; otherwise, b stays the same
condition ? expr1 : expr2
expr1??Expr2; Ifexpr1is non-null, returns its value; otherwise, evaluates and returns the value ofexpr2.
Var user = name ?? 'Guest‘;
Var user = (name !=null) ? name : 'Guest‘;
() function call
Mobile App Development, Wollo University, [email protected]
28

29. Importing packages.
// , /* */ , documentation comments → /// , /** */ use dartdoc
built-in libraries, the URI has the special dart: scheme
For other libraries, you can use a file system path or the package: scheme provided by package manager
like pub tool.
import 'package:lib1/lib1.dart’;
import 'package:lib2/lib2.dart' as lib2;
Element element1 = Element(); // Uses Element from lib1.
lib2.Element element2 = lib2.Element(); // Uses Element from lib2.
import 'package:lib1/lib1.dart' show foo; // Import only foo.
import 'package:lib2/lib2.dart' hide foo; // Import all names EXCEPT foo.
Lazily loading a library→ reduce a web app’s initial startup time, load rarely used functionality
When you need the library, invokeloadLibrary()using the library’s identifier.
import 'package:greetings/hello.dart' deferred as hello;
await hello.loadLibrary();// wait until library loaded
hello.printGreeting();
Mobile App Development, Wollo University,
[email protected]
29
import 'dart:core';

30. Function
Dart is a true object-oriented language, so even functions are objects and have a
type, Function.
functions can be assigned to variables or passed as arguments to other
functions.
Mobile App Development, Wollo University, [email protected]
30
bool isNoble(int atomicNumber) {
return _nobleGases[atomicNumber] != null;
}
isNoble(atomicNumber) {
return _nobleGases[atomicNumber] != null;
}
bool isNoble(int atomicNumber) => _nobleGases[atomicNumber] != null;
String say(String from, String msg, [String? device]) { …}
void enableFlags({bool? bold, bool? hidden}) {...}
void enableFlags({bool bold = false, bool hidden = false}) {...}
const Scrollbar({super.key, required Widget child});
A parameter marked as required can still be
nullable:
const Scrollbar({super.key, required Widget? child});
void main(List<String> arguments) {
assert(arguments.length == 2);
assert(int.parse(arguments[0]) == 1) ; }
//if not create an exception error

31. Function
void printElement(int element) {
print(element);
}
var list = [1, 2, 3]; // Pass printElement as a parameter.
list.forEach(printElement);
Assign function to a variable
var loudify = (msg) => '!!! ${msg.toUpperCase()} !!!’;
assert(loudify('hello') == '!!! HELLO !!!’);
Mobile App Development, Wollo University,
[email protected]
31
Anonymous functions
const list = ['apples', 'bananas', 'oranges'];
list.map((item) {
return item.toUpperCase();
}).forEach((item) {
print('$item: ${item.length}');
});
Anonymous functions
([[Type] param1[, …]]) {
codeBlock;
};
const list = ['apples', 'bananas', 'oranges'];
list.map((item) {
return item.toUpperCase();
});
list.forEach((item) {
print('$item: ${item.length}');
});
Similar

32. void enableFlags({bool? bold, bool? hidden}) {...}
/// Sets the [bold] and [hidden] flags ...
void enableFlags({bool bold = false, bool hidden = false}) {...}
// bold will be true; hidden will be false.
enableFlags(bold: true);
Mobile App Development, Wollo University, [email protected]
32
enableFlags(bold: true, hidden: false);
Required keyword
const Scrollbar({super.key, required Widget child});
Function

33. Wrap-up
Configure
environment
Install required
dependancies
Develop
Develop App
Debug
On emulator or
Your mobile device
What is
next?
Launch
On App stores
1 2 3 4 5
Mobile App Development, Wollo University,
[email protected]
33

34. Deeper Look in to Flutter App
Flutter offers a rich set of Material widgets.
Material is a visual design language that is standard on mobile and the
web.
uses-material-design: true entry in the Flutter section of your
pubspec.yaml file; allow you to use more features of Material, such as
their set of predefined Icons.
In Flutter, almost everything is a widget.
Mobile App Development, Wollo University, [email protected] 34

35. Structure of the Application
•android− Auto generated source code to create android application
•ios− Auto generated source code to create ios application
•lib− Main folder containing Dart code written using flutter framework
•lib/main.dart− Entry point of the Flutter application
•test− Folder containing Dart code to test the flutter application
•test/widget_test.dart− Sample code
•.gitignore− Git version control file
•.metadata− auto-generated by the Flutter tools
•.packages− auto-generated to track the flutter packages
•.iml− project file used by Android Studio
•analysis_options.yaml: determines how strict Flutter should be when analyzing your code
•pubspec.yaml− Used byPub, Flutter package manager
•pubspec.lock− Auto-generated by the Flutter package manager,Pub
•README.md− Project description file written in Markdown format
Mobile App Development, Wollo University,
[email protected]
35

36. Deeper look
•In Flutter, everything is a widget, and a complex widget comprises already
existing widgets.
•Every widget defines a build() method that's automatically called every
time the widget's circumstances change so that the widget is always up to
date
•Every build method must return a widget: Example returning a Scaffold
•Column: a Layout widget, from top to bottom
•Stateless Widget: does not maintain any state of the widget.
•MyApp extends StatelessWidget and overrides its build method to create a
part of the application’s UI. Here, build method uses MaterialApp, a
widget to create the root level UI of the application.
•It has three properties - title, theme and home.
Mobile App Development, Wollo University,
[email protected]
36

37. Deeper look
•Title: title of the application
•ThemeData class and its properties ( colorScheme, useMaterial3)
•home is the inner UI of the application, which we set another widget,
MyHomePage
•MyHomePage : same as myApp except returns scaffold widget (stateful).
•optional parameters while defining function in Dart
•void csProperty({bool bold, bool hidden}) {...} →call me with my name
csProperty(bold: true, hidden: false);
Mobile App Development, Wollo University, [email protected] 37

38. Scaffold
AppBar widget to render the header of the
application, used it in appBar property
bodyproperty: Centerwidget to centers it child widget.
setState()→ to tell data has changed for stateful widgets
When Flutter is instructed to build a StatefulWidget, it immediately calls
createState()
Mobile App Development, Wollo University, [email protected] 38

39. => (discussed in function)
The => expr syntax is a shorthand for { return expr; } referred to
asarrowsyntax. Only anexpression—not astatement like if()
/// Sets the [bold] and [hidden] flags ...
void enableFlags({bool? bold, bool? hidden}) {...} // default value=null
void enableFlags({bool bold = false, bool hidden = false}) {...}
enableFlags(bold: true, hidden: false);
enableFlags(bold: true);
Mobile App Development, Wollo University, [email protected] 39

40. Widgets
●Widgets describe what their view should look like given their current configuration and state.
●You build your UI out of widgets
●TheonlyUIbuildingblockinFlutter
●Widgets describe what their view should look like given their current configuration and state.
●ThewholeappisaWidget.AscreenisaWidgetthatcontainsWidgets.Widgets
aremadebycomposingbasic WidgetsintomoreadvancedWidgets.
●There’sahugeamountofdifferentWidgets
●Canrepresenta:
○UIelement,suchasText,Button,BottomNavigationBar, TextField,etc.
○Layoutelement,suchasPadding,Center,Stack,Column,etc.
○Completelynewscreen(Activity/ViewControllerequivalent),forexample:
https://docs.flutter.dev/ui/widgets
Mobile App Development, Wollo University, [email protected]
40

41. import 'package:flutter/material.dart';
void main() {
runApp(
Center(
child: Text(
'Hello, world!',
textDirection: TextDirection.ltr,
style: TextStyle(
color: Colors.lightBlue[300],
fontSize: 30,
fontStyle: FontStyle.italic,
// fontFamily: 'Times New Roman’,
// backgroundColor: Colors.black,
),
),
),
);
} Mobile App Development, Wollo University, [email protected]
41
• runApp() typically used to launch the
application and run a widget tree as the main
widget in the application's scope.
▪takes the given Widget and makes it the root of
the widget tree.
❑The framework forces the root widget to
cover the screen.

42. Basic widgets
Text→styled text within your application. displays a string of text with single style.
Row, Column→ to create flexible layouts in both the horizontal linear (Row) and vertical (Column)
directions. TheRowwidget does not scroll.
const Row( children: <Widget>[
// widgets here,
]
)
Stack→ Instead of being linearly oriented (either horizontally or vertically), a Stack widget lets you place
widgets on top of each other in paint order.
Container→ The Container widget lets you create a rectangular visual element. A container can be
decorated with ( a decoration: parameter) BoxDecoration, such as a background, a border, or a shadow. A
Container can also have margins, padding, and constraints applied to its size. In addition, a Container can
be transformed in three-dimensional space using a matrix.
SafeArea→ A widget that insets its child by sufficient padding to avoid intrusions by the operating system.
CircleAvatar→ Circle representing the user.IfforegroundImagefails thenbackgroundImageis used.
IfbackgroundImagefails too,backgroundColoris used.
Mobile App Development, Wollo University,
[email protected]
42
runApp(
const MaterialApp(
home: SafeArea(
child: MyScaffold(), ), ),);

43. MaterialApp
•wraps a number of widgets that are commonly required for
Material Design applications.
•uses-material-design: true, in thefluttersection of yourpubspec.yamlfile to use the
predefined set ofMaterial icons.
Mobile App Development, Wollo University, [email protected]
43

44. Navigator
Navigator→ A widget that manages a set of child widgets with a stack
discipline.
Mobile App Development, Wollo University, [email protected]
44

45. Mobile App Development, Wollo University,
[email protected]
45
Widgets
Flutter – Text
Flutter – TextField
Flutter – FlatButton
Flutter – RaisedButton
Flutter – Image
Flutter – SnackBar
Flutter – Switch
Flutter – Tooltip
Flutter – ToggleButtons
Flutter – Table
Flutter – DataTable
Flutter – SelectableText
Flutter – Icon
Flutter – IconButton
Flutter – ListView
Flutter – Opacity
Flutter – Radio buttons
Flutter – TabBar & TabBarView
Flutter – CircularProgressIndicator
Widget Properties
Flutter Padding
Navigation→Navigation from one screen to another in Flutter Application
InterActivity
StatefulWidget
StatelessWidget

46. Animations
Flutter Animation Basic Example
Flutter – Tween Animation
Flutter – Animate Color of Widget
Flutter AnimatedIcon
Flutter AnimatedList
Flutter AnimatedSwitcher
AppBar
Flutter – Center align Application Title
Text
Flutter – Center align Text Widget
Flutter – Change Font Size of Text
Container
Flutter – Different Margins at
left, top, right and bottom
Persistent storage means
SQLite
FireBase
Mobile App Development, Wollo University, [email protected]
46

47. •carousel view flutter
•Expandedclass→ A widget that expands a child of aRow,Column,
orFlexso that the child fills the available space.
•ListTileclass→A single fixed-height row that typically contains some
text as well as a leading or trailing icon.
Layout Widgets https://docs.flutter.dev/ui/widgets/layout
FittedBox→
Padding class→A widget that insets its child by the given padding.
Mobile App Development, Wollo University,
[email protected]
47
Scales and positions its child within itself according tofit.
(Boxfit.fitwidth| fill| none, alignment:Alignment.centerLeft
const Card( child: Padding(
padding: EdgeInsets.all(16.0),
child: Text('Hello!'), ), )
SizedBoxclass→A box with a specified size.
width and height in pixel or double.infinity

48. Stateless Widgets
●Have no state
●Immutable →all instance fields are final
●For displaying something that doesn’t change once it has been initialized
Mobile App Development, Wollo University, [email protected]
48

49. StatefulWidgets
●Haveastate
●A StatefulWidget Stores state within itself.
●Thestatehasmutableinstancefieldsthatcan
be readsynchronously
●CallsetState()methodforupdatingthestate
●FrameworkhandlesUIWidgetupdates
intelligentlyandefficientlywhen
necessary
●Sobasically,reallysimilartoReact concepts
(count=count+1;)
Mobile App Development, Wollo University, [email protected]
49

50. Stateful and Stateless Widgets
A widget is either stateful or stateless.If a widget can change—when a user
interacts with it, for example—it's stateful.
A stateless widget never changes. Icon , IconButton , and Text are examples of
stateless widgets.
Mobile App Development, Wollo University, [email protected]
50

51. Examples
Stateless widgets can betext, icons, icon buttons, and raised buttons.
A stateful widget is dynamic: for example, it can change its appearance in response
to events triggered by user interactions or when it receives data.Checkbox ,
Radio, Slider, InkWell , Form , and TextFieldare examples of stateful widgets.
Dismissibleclass Dismissible({required Key key, required Widget child, Widget?
background, Widget? secondaryBackground, ConfirmDismissCallback?
confirmDismiss, VoidCallback? onResize, DismissUpdateCallback? onUpdate,
DismissDirectionCallback? onDismissed, DismissDirection direction =
DismissDirection.horizontal, Duration? resizeDuration = const
Duration(milliseconds: 300), Map<DismissDirection, double> dismissThresholds
= const <DismissDirection, double>{}, Duration movementDuration = const
Duration(milliseconds: 200), double crossAxisEndOffset = 0.0, DragStartBehavior
dragStartBehavior = DragStartBehavior.start, HitTestBehavior behavior =
HitTestBehavior.opaque})
https://youtu.be/iEMgjrfuc58
Mobile App Development, Wollo University, [email protected]
51

52. Mobile App Development, Wollo University, [email protected]
52

53. Mobile App Development, Wollo University, [email protected]
53

54. Mobile App Development, Wollo University, [email protected]
54

55. lifecycle of a stateful widget
1.createState(): Upon creation of the stateful widget, its constructor is
called, which initializes the widget. The createState() method is then
invoked, which creates the state object for the widget.
2.initState: This method is called after the widget is inserted into the
widget tree, when the object is created for the first time.
3.didChangeDependencies: This method is called when a dependency of
this widget changes. It is useful when the widget depends on some
external data or inherits data from its parent widget. It is also called
immediately after initState().
4.build: Builds the widget’s user interface based on its current state. This
method is called initially when the widget is first inserted into the
widget tree, and may be called repeatedly during the lifecycle
whenever the widget needs to be rebuilt
Mobile App Development, Wollo University, [email protected]
55

56. lifecycle of a stateful widget
5.setState: Triggers a rebuild of the widget when the state changes and
the associated methods are called again.
6.didUpdateWidget: Triggered when the widget is rebuilt with updated
properties. It is called after build() and allows you to compare the
previous and current widget properties.
7.deactivate: Called when the widget is removed from the tree but might
be inserted again.
8.dispose: Called when the widget is removed from the widget tree
permanently, allowing you to release resources held by the widget.
9.reassemble: Called when the application is reassembled during hot
reload.
Mobile App Development, Wollo University, [email protected]
56

57. Mobile App Development, Wollo University, [email protected] 57
import 'package:flutter/material.dart';
main()=>runApp(const MyCounter());
class MyCounter extends StatefulWidget {
const MyCounter({super.key});
@override
// State<MyCounter> createState() => MyCounterState();
State<MyCounter> createState() {
return _MyCounterState();
}
}
class MyCounterState extends
State<MyCounter> {
int count = 0;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Column(
children: [
Text('Count: $count'),
TextButton(
onPressed: () {
setState(
() {
count++;
}
);
},
child: Text('Increment'),
)
],
)));
}
}
Button
To increase counter

58. Mobile App Development, Wollo University, [email protected] 58
class MyCounter extends StatefulWidget {
const MyCounter({super.key});
@override
// State<MyCounter> createState() => MyCounterState();
State<MyCounter> createState() {
return _MyCounterState();
}
}
class MyCounterState extends
State<MyCounter> {
int count = 0;
@override
Widget build(BuildContext context) {
return Column(
children: [
Text('Count: $count'),
TextButton(
onPressed:update,
child: Text('Increment'),
)
],
);
}
Void update() {
setState(() {
count++;
});
}
}
Void update() {
setState(incrementer);
}
Void incrementer() {
count++;
}

59. State Management packages
RiverPad→https://riverpod.dev
•Installing the package→ flutter pub add flutter_riverpod
•Or At pubspec.yml add flutter_riverpod: ^2.x.x  version no.
•Providers→ Allow easily accessing that state in multiple locations
•Simplifies combining this state with others.
•Enables performance optimizations and increases the testability of your application.
•Declare provider
•addProviderScopeat the app’s root.
•Good to install snippets flutter riverpod snippets plug in
Mobile App Development, Wollo University, [email protected]
59
@riverpod
// Your declaration here
main()=> runApp(ProviderScope(child: MyApp()));

60. Gesture
•a way for a user to interact with a mobile (or any touch based device) application for
an event.
▪ Tap: Touching the surface of the device with fingertip for a short period and then releasing the
fingertip. onTap, onTapDown, onTapUp, onTapCancel, onPressed for buttons
▪Double Tap: Tapping twice in a short time. onDoubleTap
▪On long press: pointer has remained in contact with the screen at the same location for a long
period of time. onLongPress
▪Drag (Vertical Drag, Horizontal drag): Touching and then moving the fingertip in a steady manner
and then finally releasing. onVerticalDragStart, onVerticalDragUpdate, onVerticalDragEnd
▪Panning: A pointer has contacted the screen and might begin to move horizontally/vertically.
Crashes ifonHorizontalDragStartoronVerticalDragStartis set.
Mobile App Development, Wollo University, [email protected]
60

61. friend.dart
friend_page.dart
Friends_page.dart
Mobile App Development, Wollo University,
[email protected]
61

62. Android iOS
https://randomuser.me/api/?results=15
File content is shown in
randomUsers.json file attached with this
material to see what content it has.
Mobile App Development, Wollo University, [email protected] 62

63. Practical Code with its Screenshot attached in the file:
•CSdarting2.dart.html
•What does every Line do?
•Code full Project is in the folder mobile_app_cs
Mobile App Development, Wollo University, [email protected]
63
Practical Code sample2

64. Navigation and Routing
•navigating from one page / screen to another
•The way that the navigation of an application is handled is called Routing.
•Flutter provides a basic routing class – MaterialPageRoute and two methods -
Navigator.push and Navigator.pop, to define the work flow of an application.
MaterialPageRoute→ widget used to render its UI by replacing the entire screen with a
platform specific animation.
MaterialPageRoute(builder: (context) => Widget())
Navigation.push→ is used to navigate to new screen using MaterialPageRoute widget.
Navigator.push( context, MaterialPageRoute(builder: (context) => Widget()), );
Navigation.pop is used to navigate to previous screen.
Navigator.pop(context);
Mobile App Development, Wollo University, [email protected]
64

65. Flutter provides many advanced packages to work with databases. The
most important
packages are:
•sqflite – Used to access and manipulate SQLite database, and
•firebase_database – Used to access and manipulate cloud hosted
NoSQL database from Google.
Create a user registration form and store its data in SQLite or firebase.
Mobile App Development, Wollo University, [email protected]
65

66. return Scaffold(
appBar: AppBar(title: Text("Product Navigation")),
body: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return GestureDetector(
child: ProductBox(item: items[index]),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ProductPage(item:
items[index]),
),);},);},));
Mobile App Development, Wollo University, [email protected]
66

67. Mobile App Development, Wollo University, [email protected] 67

68. Q&A
[email protected]