Flutter Training
Architectural Patterns For Better State Management
Recap
Week #5 Recorded Session:
https://drive.google.com/file/d/1A3yNXSZcvqeZ-OUdygksWcDfrd8PkCE8/view?usp=sharing
Week #5 Presentation (Persistent storage and unit tests):
https://docs.google.com/presentation/d/1VCQoXjbcs1PiJ1-hDw41y9iI8sLIU-WSZbI7UxnKeFs/edit?usp=sharing
Copyright of Shell International Footer Date Month 2016 2
Agenda
● State management In Flutter
● What are architectural patterns.
● Explore famous architectural patterns in flutter.
● Reactive Programming
● Some code walk through for better understanding of architecture pattern.
Copyright of Shell International Footer Date Month 2016 3
State Management
● Creating stateful widgets
● Maintaining states for each
widget manually.
● Using simple setState()
● Is there a better way to
manage it ?
Copyright of Shell International Footer Date Month 2016 4
Architectural Patterns
● Why we use architecture patterns?
● Its Advantages
● Does it make your app scalable ?
● Is it helpful when you work with a team developer ?
Copyright of Shell International Footer Date Month 2016 5
Flutter Provider
● An implementation of observer
pattern
● In which consumer waits of
observable to emit changes
using callbacks..
Copyright of Shell International Footer Date Month 2016 6
Main Concepts
● Notifier
● Provider
● Consumer
Copyright of Shell International Footer Date Month 2016 7
Code Walk Through For Provider
In a simple Counter Application
Copyright of Shell International Footer Date Month 2016 8
What is reactive programming
● Streams
● Async*
● yield
Copyright of Shell International Footer Date Month 2016 9
Bloc
A reactive support architecture
to update states based on streams
Copyright of Shell International Footer Date Month 2016 10
Main Concepts
● Event
● States
● Bloc
● Bloc Builder
● Repository
Copyright of Shell International Footer Date Month 2016 11
Code Walk
Through For Bloc
Creating Login Flow
Copyright of Shell International Footer Date Month 2016 12
Copyright of Shell International
Take home assignment
Weather App Using Bloc Architecture
Assignment submission
Upload your code on github and submit it’s link on the Google chat group.
Copyright of Shell International Footer Date Month 2016 15
References
● https://www.youtube.com/watch?v=nQBpOIHE4eE&list=PLjxrf2q8roU2HdJQDjJzOeO6J3FoFLWr2&index=17&t=0s
● https://pub.dev/packages/flutter_bloc
● https://pub.dev/packages/provider
● https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple
Copyright of Shell International Footer Date Month 2016 16
End
