A StreamBuilder to switch the body section by listening to the NavBar item stream of the BLoC. State’s lifecycle methods initState() creates the BLoC and dispose() closes the stream when not needed. This can be achieved by calling BLoC’s close() method inside State’s dispose() lifecycle method. Now, UI part of the appĪ StatefulWidget/State combo is not necessarily needed because we are not going to depend on setState() method anyway.īut, closing the Dart Stream when not needed is a best practice. Finally a handy method to close the stream (It’s a good practice to close the streams when not needed)īecause navBarController is a private field inside the BLoC we need a handy method to close the stream from outside of the BLoC. This gets called out by onTap() when any BottomNavigationBarItem is tapped and receives the index of the tapped BottomNavigationBarItem. 
This function holds the index tracking logic inside the BLoC separate from UI.
A function which can be attached to onTap() gesture on UI. Now, we need to set a default NavBarItem to show the default screen and NavBarItem selected. A default Navigation Bar Item enum for initial state. We need a broadcast type stream because, both body and bottomNavigationBar sections of the Scaffold listen-on the same stream to switch view based on current NavBarItem tapped. We can create one by calling broadcast() as shown in the screen print. Note: By default, Dart StreamController’s Stream is not a broadcast type stream. #BLOCS APP SIDE NAV CODE#
Lets go over each piece of BLoC in detail…īy listing out the Bottom NavBar Items as enum fields it’s easy to read the code and we can take advantage of enum indexes. a function which can be attached to onTap() gesture of BottomNavigationBar on UI side.a default Navigation Bar Item enum for initial state.
an enum to represent various BottomNavigationBarItems. Use Flutter’s StreamBuilder to re-paint just the body section and the BottomNavigationBar. Communication between the Scaffold’s bottomNavigationBar and body sections is done using Dart’s StreamController. So, how can it be achieved? Two key things Use StreamBuilder to re-create only a sub-tree or widget(s) instead of entire widget tree. No need to call setState() every time which re-creates the entire widget tree. No need to store current BottomNavigationBarItem index inside the State. Using BLoC we can achieve clear separation of business logic from UI. 
Flutter’s StreamBuilder - to trigger UI updates. Dart’s StreamController - to communicate the UI intents. BLoC - to separate business logic from UI. Call that State’s setState() to repaint the whole widget tree to reflect those changes.Ī slightly better approach can be using a combination of. Hold the current BottomNavigationBarItem index value inside the State of a StatefulWidget every time a BottomNavigationBarItem was tapped,. 
Navigating between screens using Scaffold’s bottomNavigationBar can be achieved in many different ways. The most significant among those named arguments are “The Scaffold widget takes a number of different widgets as named arguments, each of which are placed in the Scaffold layout in the appropriate place.” Main focus is Scaffold Widget’s body and bottomNavigationBar sections. BLoC Pattern - (Writing logic separate from UI in a Dart class and sharing it among Widgets).Basic understanding of Flutter SDK and Scaffold Material Widget.Dart’s StreamController and Flutter’s StreamBuilder are powerful tools to achieve a better design and intra-app communication.
0 kommentar(er)
