{"id":2666,"date":"2019-11-20T15:27:13","date_gmt":"2019-11-20T09:57:13","guid":{"rendered":"https:\/\/www.concettolabs.com\/blog\/?p=2666"},"modified":"2025-03-19T07:30:22","modified_gmt":"2025-03-19T07:30:22","slug":"comprehensive-guide-for-flutter-bloc-library","status":"publish","type":"post","link":"https:\/\/www.concettolabs.com\/blog\/comprehensive-guide-for-flutter-bloc-library\/","title":{"rendered":"A Comprehensive Guide for Flutter Bloc Library v1.0.0"},"content":{"rendered":"

Flutter is a Google-powered app development kit that allows app developers to develop cross-platform applications such as Android, iOS, Web, Windows, and Mac. Day by day, Flutter is gaining popularity, and so are its developers. To make things easy for devs, Google introduced the Bloc pattern flutter<\/strong> back in 2018 during its Google I\/O<\/strong> event<\/strong><\/span><\/a>. Since then, it\u2019s been almost a year since introducing bloc, and finally, Bloc Library is updated now! So, before we dig in more for the latest updates, firstly, we need to know more about bloc and how it works with Flutter considering newbies.<\/p>\n

<\/span>What is Bloc?<\/span><\/h2>\n

Bloc stands for Business Logic Component(Bloc), which is a core library developed to reduce the workload on Flutter app developers using the idea of code testability and reusability. To understand and get a better idea of the bloc, you can think of it as a brain. This bloc library simplifies the reactive app development process by allowing Flutter app developers<\/strong><\/a><\/span> to convert the events into states. And to get bloc output in a state, events, or you can say user input that comes from one side; bloc mirrors the same code in response to generate output. Using the same principle, Flutter UI widgets listen to states and display responses on the screen as a reaction to user action. And, this is how bloc works. However, when you write your Flutter app code from scratch, you need to write much boilerplate code too.<\/p>\n

<\/span>But using Bloc have its advantages, such as…<\/span><\/h3>\n
    \n
  • To know the current app state<\/li>\n
  • Simplifies app case testing process<\/li>\n
  • Record user interaction to make data-driven conclusions<\/li>\n
  • Reuse components within the app as well as in other apps<\/li>\n
  • Use a single code base with the same pattern<\/li>\n
  • Faster the app development process<\/li>\n<\/ul>\n

    Apart from the bloc’s core library, there are two other libraries named flutter_bloc and angular_bloc<\/strong> that work simultaneously with the bloc for a faster app development process. The tremendous growth in the Flutter community has played a significant role in the result of improvising the existing bloc library. However, this library assists you in dealing with the complexities of existing blocs, streams, and sinks. To have the best code practice, you can use their extension for both VS Code and IntelliJ which provide code snippets and an instant bloc class creation facility. Now you know about blocs, and their working pattern, so let’s move further and see what’s new in the latest Library 1.0.0 update.<\/p>\n

    <\/span>What\u2019s new in the latest Bloc Library 1.0.0<\/span><\/h2>\n

    \"What\u2019s<\/p>\n

    <\/span>1. Bloc as a Stream<\/span><\/h3>\n

    In the latest update to bloc library v1.0.0<\/strong>, all blocs are now converted into streams, which means you no longer need to use Stream< state> to get to state. Instead, the Flutter app developer<\/strong> can quickly know the existing state stream directly from the bloc itself. It also helps us to remove the need for using currentState property and reuse the bloc state property to fetch the value of the state. The main reason is to reduce confusion and differentiate both blocs. state and bloc.currentState. Working with the bloc’s state stream should now feel very intuitive, especially to those coming from StreamControllers and Subjects.<\/p>\n

    <\/span>2. Bloc as a Sink<\/span><\/h3>\n

    With the update to the bloc library, all blocs are converted into Sinks. This makes it even easier for Flutter Developer to continue using the traditional add sink API instead of dispatch to notify the Bloc for a new event. Also, the dispose of objected in support of close. From now while using the art analyzer, it shows warnings if you forget to call blocs using close. Yet, it is performed naturally by the BlocProvider.<\/p>\n

    <\/span>3. Testing Improvements<\/span><\/h3>\n

    This time there is one more new package, which is bloc_test which is included in the latest library update. The main aim of the bloc_test package is to simplify stub a bloc\u2019s state stream through when listening. However, this is still in beta. Still, it is expected to be helpful for developers to test helpers that are specially designed for the bloc library. After this, it is assumed to get more such extra testing helpers that will come preloaded in the upcoming updates.<\/p>\n

    <\/span>4. Official Documentation<\/span><\/h3>\n

    To make it easier for developers to find bloc library and tutorials under one hood, old pub.dev<\/strong> stuff is now moved into the new domain block library. dev. This time it comes with official documentation so that newbies can learn it quickly. And we recommended you go through it cause it helps you to plan bloc usage in your next app development process.<\/p>\n

    So, these were four significant changes that happened in the update to the latest Bloc library<\/strong>. But if you want to see it in action before you use it in your next app development project, you can consider the Counter app. Which is a pure Dart app made up using CounterBloc? Let us know what you think about this newly introduced Bloc Library v1.0.0 by commenting below.<\/p>\n