Scribd
Upload
21 views

Lecture 4 - Mobile Programming 2

Uploaded by

mohamed.ali300094
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
21 views

Lecture 4 - Mobile Programming 2

Uploaded by

mohamed.ali300094
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 72

Lecture 4: Mobile

Programming using
Flutter
Dr.Taraggy
Ghanim
Firebase as a
backend
Firebase – sign in using the google
website account
Create a
project
Choose any project-name and press
continue
No need to enable Google
Analytics
You can disable Google
Analytics
Now press create
project
Wait till the project is
created
Press
continue
Build →real-time
database
Rest create
database
Choose any location, it doesn't
matter
Start in test
mode
Finally database
exists
Installing flutter http
package
Here is the http
package
The needed command for
installation
Write the installation command in the
terminal
Now we are ready to import the
package
Firebase
commands
Get: get data from firebase

Post: push new data ( store new data to server)

Delete: delete data from firebase

Put: overwrite existing data

Patch: update parts of existing data


Post: Sending data as json from
mobile to firebase
Import the dart convert package to create
json object
Add this
part
Uri class to
create url.

Map represents
headers
( meta data)
map header ID
to its value

Body represents
data to
outgoing
requests
Format of
url
Unique ID is generated by
default
If any errors
exist….
Post return future response ( object eventually give
access to other data)
Wait for response first then
proceed
Response has status code
and body
Success code

200,201

Failure code

4xx, 5xx
We can print code
and body
Adding new
item
Get- sending data from firebase
to flutter
Decoding response
Deleting data from
firebase
Deleting item need specific
item id
If something wrong happens…. Undo removing
item locally
Proble
m
Solution==River
pod
How Riverpod
Works?
Create
Provider
Create folder providers--
meal_provider.dart
Import packages, create provider object to return
dummymeals
Use
Provider
Import packages in
tabs.dart
Change Stateful widget to Consumer Stateful Widget,
change state to consumer state
Import riverpod in
main
Add provider scope to
runApp
https://riverpod.dev/docs/concepts/reading#using-
refwatch-to-ob serve-a-provider

Ref.read( ) get data from our provider once

Ref.watch( ) set up a listener to run build method again


once data changes
Providers & Stateful
Widgets
StateNotifierProvider

StateNotifierProvider is a provider that is used to listen to and


expose a StateNotifier (from the package state_notifier, which
Riverpod re-exports).
StateNotifierProvider along with StateNotifier is Riverpod's
recommended solution for managing state which may change in
reaction to a user interaction.

It is typically used for:


● exposing an immutable state which can change over time after reacting
to custom events.
● centralizing the logic for modifying some state (aka "business logic")
in a single place, improving maintainability over time.
Favourites
Provider
StateNotifier like providers but for changing data not
dummy static data
The Consumer of the
provider
Meal
Details
Scaffold Mesenger and
snackBar

https://docs.flutter.dev/cookbook/design/snackbars
Ref. read() connect the meal details to the
provider

You might also like