Flutter 104 Introduction to BLOC

A component that converts incoming Events (Streams) to outgoing States (Streams). 


Events - Inputs to a bloc e.g. in response of user interaction
States - Outputs of a bloc and is part of application state.  Notified system to redraw UI with build()
Transition - Change of state, consist of current, transition and next state

Why Stream?
Stream - "container" for asynchronous data

Future (computation that is not completed immediately) Vs Stream (sequence/iterable, instead of asking for it, will inform you of event that is ready)

Receive by: await for (hint hint for loop)

Streams:
Single Subscription stream - listened once
Broadcast Stream - more than one listener can listen at the same time and it can be listened again

Methods that:
Process stream and return a result,
Modify by returning a new stream based on original,
Transform and
Listen which return StreamSubscription that allows you to pause, resume and cancel subscription.

How to implement Blocs?
extend Bloc class,
implement mapEventToState () - accept event argument and return Stream of new States.  Has currentState property

Packages
bloc - implemented/extended to invoke mapEventToState
flutter_bloc - to replace StreamBuilder (BlocBuilder, BlocProvider and BlocListener).

BlocBuilder - return widget based on bloc's state
BlocProvider - provide Bloc to its children (Use BlocProviderTree for multiple BlocProvider)
BlocListener - invoke listener for state changes in Bloc

Useful Methods in Library
Bloc Class:
currentState() - return Current State of the Bloc
dispatch() - takes event and trigger mapEventToState
mapEventToState - take event, return State as Stream


Cross sharing of State
Example 1: Wrap in MaterialApp with BlocProvider like:
BlocProvider(bloc: bloc1, child: MaterialApp(...));
Access bloc1 from anywhere using: BlocProvider.of<Bloc1>(context)
Example 2: Pizza
https://stackoverflow.com/questions/54523971/flutter-bloc-being-recreated
Example 3: 
https://stackoverflow.com/questions/53918475/flutter-bloc-pattern-update-bloc-streams-based-another-blocs-stream

Comments

Post a Comment

Popular posts from this blog

Setting up Terminal in Android Studio for Flutter and Bash Profile (For Mac)

Does your Commands in Android Studio not worked? Fret not, all you need to do is the following from Command Prompt: 1. Do you have a Bash Profile?] Go into your  user folder in finder . The .bash_profile file should be findable there. ->  HD/Users/[USERNAME] To reveal hidden file, press: Command + Shift + . nano .bashprofile or nano .bash_profile 2. Paste the correct directory export PATH=~/ Users/rigmiklos/Documents/ flutter/bin:$PATH Red Text: Directory contain flutter folder Hint for Mac User: Double tap on the Flutter.exe in Flutter>Bin>Flutter, and press"Get Info" to get Directory. 3. Ctrl + X to exit (No, this is not for default paste function) 4. Press Y to save changes. 5. To reload source .bashprofile Advance Reading for Bash Profile Official Doc for Setting up To navigate around Mac Command prompt: ls: show folders cd "folder name": to change directory Solution: Run Flutter Doctor manually or by Terminal / Users/...
Read more

Flutter Widget 101 Part 1 (Basic of Flutters, Layouts, Rows and Columns)

Image
1. What every programme starts with void main() => runApp( new MyApp()); "=>" is an operator and it  denotes   { return  expr ; } . () denotes method runApp will run MyApp() which is a widget. Besides running MyApp(), you can also play with runApp() function by doing the following: new Text(). Do remember to include the TextDirection. Text will appear on the top left hand corner of the screen. void main() { runApp( new Text( 'Hello World' ,textDirection: TextDirection. ltr ,)); } Make it centralised in the center through the following. void main() => runApp( new Center( child: new Text( 'Hello World' ,textDirection: TextDirection. ltr ,) ) ); 2.Declaring App/Widget to be run in runApp() void main() => runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context) { // TODO: implement build return null ; } } extends is the inheriting of...
Read more

Flutter Widget 101 Part 4 (Navigation and Drawers)

1. Drawer Official Doc Material Design has 2 mode of navigation, Tabs or/and Drawer. Drawer slide in horizontally Use ListView (Scrollable) or Column as Child ListTitle for each single row Details of User can be displayed with DrawerHeader , UserAccountsDrawerHeader onTap Behaviour can be set Wrapper: Material App > Scaffold > Drawer > ListView Drawer: When tapped on row, will change Text in Main Page void main(){ runApp( new MaterialApp(home: new DrawerTemp()),); } class DrawerTemp extends StatefulWidget { @override _DrawerTempState createState() => _DrawerTempState(); } class _DrawerTempState extends State<DrawerTemp> { String TextValue = "Original" ; @override Widget build(BuildContext context) { return Scaffold( appBar: new AppBar( title: new Text( "Drawer Test" ), backgroundColor: Colors. lightBlueAccent , ), drawer: new Drawer( child: new ListView( ...
Read more