Education
Software Development Executive - II
Last updated onSep 4, 2024
Last updated onAug 16, 2023
Welcome to an enlightening journey where we will explore the intricate workings of the Flutter BLoC MultiBlocProvider class. This Flutter class is a boon for developers seeking to manage the state of their Flutter apps efficiently. Strap in and get ready to level up your Flutter development skills as we venture into this fascinating realm.
Before we dive into the world of the multiblocprovider in Flutter, it's crucial to cement our understanding of a few basic concepts. We'll start by fleshing out our knowledge of Flutter, BLoC, and the BLoC library.
Flutter is a UI toolkit that provides a fast and expressive way for developers to create beautiful mobile apps. If you're a Flutter developer, you're likely already familiar with the conceptual advantages Flutter brings to the table, with its feature-rich API and hot reload system. One of the key aspects that set Flutter apart is its efficient state management options— one of them being the Bloc pattern.
In the world of Flutter, BLoC (Business Logic Component) is a design pattern that separates business logic from UI. The BLoC pattern separates the responsibilities into distinct layers. State management comes into play here, as managing the state in Flutter applications can often feel tricky. That's why the BLoC pattern has become a go-to for several Flutter developers. With its ability to manage state using streams, BLoC eases the arduous task of managing multiple states across multiple widgets, creating a more simplified and structured data flow.
The BLoC library in Flutter provides the underlying architecture for using the BLoC pattern. The library provides several components, including BlocBuilder, BlocProvider, and MultiBlocProvider classes. Each of these components has its own unique role to play in the implementation of the BLoc pattern. Today, our focus will be on the Flutter bloc MultiBlocProvider.
You've probably asked yourself, how can we utilize multiple BLoCs in a single widget tree? Enter MultiBlocProvider, a powerful class to manage multiple BLoC's instances with ease. MultiBlocProvider in Flutter merges multiple BlocProvider widgets into one, consequently allowing multiple BLoCs to be available in the same widget tree. It allows Flutter developers to manage multiple, distinct data streams, which often arise when dealing with complex app UIs.
It's time to roll up our sleeves and create Bunifu's magic with Flutter BLoC MultiblocProvider. Let's get started!
Embarking on our journey into code, we'll first need to ensure our environment is primed and ready to go. Having a working Flutter development setup is a must. Have your IDE of choice ready (like Android Studio or Visual Studio Code) and ensure the Bloc library is added to your pubspec.yaml file.
1 dependencies: 2 flutter: 3 sdk: flutter 4 flutter_bloc: ^8.1.3 5
Having laid the foundation, we shall now proceed to implement our code. MultiBlocProvider groups multiple BlocProvider widgets together. A BlocProvider is a Flutter class which provides a bloc to its children via BuildContext.
Start implementing your Flutter app by setting the boilerplate code for your Flutter application. Here, the main class MyApp extends StatelessWidget will serve as our root widget.
1 void main() => runApp(MyApp()); 2 3 class MyApp extends StatelessWidget { 4 @override 5 Widget build(BuildContext context) { 6 return MaterialApp( 7 title: 'Flutter MultiblocProvider', 8 home: HomeScreen(), 9 ); 10 } 11 } 12
Now, let's define two BLoC classes: CounterBloc and ThemeBloc. For simplicity's sake, we won't delve into the details of these BLoCs' states and events. However, note that each of them manages a specific part of the application state (the counter value or the current theme).
1 class CounterBloc extends Bloc<CounterEvent, CounterState> { 2 CounterBloc() : super(CounterInitial()); 3 // TODO: implement additional logic here 4 } 5 6 class ThemeBloc extends Bloc<ThemeEvent, ThemeState> { 7 ThemeBloc() : super(ThemeInitial()); 8 // TODO: implement additional logic here 9 } 10
When using the MultiBlocProvider, each BlocProvider gets the same BuildContext context as the MultiBlocProvider. As a result, each provider and all child widgets have access to all the blocs provided by the MultiBlocProvider.
We will now implement MultiBlocProvider in our MyApp class. To make CounterBloc and ThemeBloc accessible throughout the widget tree, we'll provide them using MultiBlocProvider.
Here's an example of providing multiple blocs:
1 void main() { 2 runApp( 3 MultiBlocProvider( 4 providers: [ 5 BlocProvider<CounterBloc>( 6 create: (BuildContext context) => CounterBloc(), 7 ), 8 BlocProvider<ThemeBloc>( 9 create: (BuildContext context) => ThemeBloc(), 10 ), 11 ], 12 child: MyApp(), 13 ), 14 ); 15 } 16 17 class MyApp extends StatelessWidget { 18 @override 19 Widget build(BuildContext context) { 20 return MaterialApp( 21 title: 'Flutter MultiblocProvider', 22 home: HomeScreen(), 23 ); 24 } 25 } 26
In this code block, MultiBlocProvider takes a providers parameter and a child parameter. The providers parameter is a list of all the different BlocProviders that you wish to include, and the child parameter is the widget that the providers will be accessible to (and all its children).
The create callback in each BlocProvider is responsible for creating the bloc and disposing of it when it's no longer required.
We have provided two BLoCs— CounterBloc and ThemeBloc— to the entire widget tree under MyApp. Now, in our HomeScreen, we can access these BLoCs using context.read<Bloc>() or context.watch<Bloc>() and use them to manipulate our UI based on state changes.
Here is an example of how we can utilize our BLoCs in our HomeScreen to build different parts of the UI:
1 class HomeScreen extends StatelessWidget { 2 @override 3 Widget build(BuildContext context) { 4 return Scaffold( 5 appBar: AppBar( 6 title: const Text('Flutter MultiblocProvider'), 7 ), 8 body: Center( 9 child: Column( 10 mainAxisAlignment: MainAxisAlignment.center, 11 children: <Widget>[ 12 Text( 13 'Counter Value:', 14 ), 15 BlocBuilder<CounterBloc, CounterState>( 16 builder: (context, state) { 17 // TODO: build UI based on CounterBloc's state. 18 }, 19 ) 20 ], 21 ), 22 ), 23 floatingActionButton: FloatingActionButton( 24 onPressed: () { 25 // TODO: dispatch event to CounterBloc. 26 }, 27 tooltip: 'Increment', 28 child: Icon(Icons.add), 29 ), 30 ); 31 } 32 } 33
Here, we use BlocBuilder to listen to the CounterBloc's state. Every time the CounterBloc's state changes, the builder fires, allowing us to define and update the UI based on the current state of the BLoC. In this case, it would output the counter value based on the state of our CounterBloc.
Lastly, when the FloatingActionButton is pressed, we dispatch an increment event to the CounterBloc, allowing it to update its state and consequently our UI.
Upon successful code implementation, we want to ensure that our application performs as expected.
Testing is a critical part of the coding process. With several moving parts, each interconnected, it's crucial that we test thoroughly with various conditions and events to ensure a logical and smooth operation of our application.
We've used the Bloc library to manage our state with the MultiBlocProvider. When testing, we look for state changes. For instance, we might:
1 void main() { 2 group('CounterBloc', () { 3 CounterBloc counterBloc; 4 5 setUp(() { 6 counterBloc = CounterBloc(); 7 }); 8 9 tearDown(() { 10 counterBloc.close(); 11 }); 12 13 test('initial state is 0', () { 14 expect(counterBloc.state, 0); 15 }); 16 17 test('state should be incremented when increment event is added', () { 18 counterBloc.add(CounterEvent.increment); 19 20 expectLater(counterBloc, emitsInOrder([1])); 21 }); 22 }); 23 } 24
The above snippet demonstrates testing for state changes in the CounterBloc. By adding the CounterEvent.increment event in one test, we check whether the counter successfully increments in response.
Here are some insights and tips to effectively use MultiblocProvider in order to make state management in your Flutter application more efficient.
Understanding the scopes is a crucial part of using MultiBlocProvider. When using MultiBlocProvider, each BlocProvider receives the same BuildContext context as the MultiBlocProvider. Each provider and all the child widgets, in this case, would have access to all the blocs provided by the MultiBlocProvider.
To handle multiple streams of data coming from different blocs, use BLocBuilder to ensure your UI corresponds to the current state of each BLoC.
Consider an application where you have a counter on the Home Screen and also the ability to change the application theme from within the app.
In this case, you might need to handle both the theme and counter simultaneously. This is where using MultiBlocProvider with a ThemeBloc and a CounterBloc comes into play. With this, you could manage both aspects easily, while maintaining the potential to expand your application in the future.
Integration with a real world case makes our understanding of such abstract concepts strong and helps discover human stories in the realm of code.
Dealing with state management can often feel overwhelming when developing applications with Flutter. However, classes and libraries such as MultiBlocProvider can significantly streamline this process, increasing your productivity and code maintainability.
We explored understanding BLoC, the advantages of using the BLoC library, and how to implement the MultiBlocProvider to create a more efficient and robust system for handling multiple states in your application. We further learned how to effectively handle multiple blocs within a single buildcontext context.
Through our detailed foray into these topics, including our dive into a real-world case study, we aimed at allowing you to discover human stories amid the lines of code.
State management in Flutter is a broad topic with multiple points of view and methods. Getting hands-on experience with code is crucial. Hence, consider implementing what you've learned in your own Flutter project.
Additionally, you can explore other state management solutions offered by Flutter, like Provider or Riverpod.
Remember, each solution comes with its strengths and trade-offs. Therefore, choose wisely based on your project's requirements and your comfort level with the technique.
With this, we conclude our deep dive into Flutter's MultiBlocProvider class. Armed with this knowledge, you can continue to explore and conquer the wonderful world of Flutter development. All the best!
Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!
You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.
