Designing the structure of an app is often one of the most heavily debated topics that arises in app development. Everyone seems to have their favorite architectural pattern with a fancy acronym.

iOS and Android Developers are well versed in Model-View-Controller (MVC), and have used this pattern as a default choice when building an app. The Model and View are separated, with the Controller sending signals between them.

Flutter, however, brings a new reactive style that is not entirely compatible with MVC. A variation of this classical pattern has emerged from the Flutter community – BLoC.

BLoC stands for Business Logic Components. The gist of BLoC is that everything in the app should be represented as stream of events: widgets submit events; other widgets will respond. BLoC sits in the middle, managing the conversation. Dart even comes with syntax for working with streams that is baked into the language!

The best part about this pattern is that you won’t need to import any plugins or learn any custom syntax. Flutter already comes with everything you need.

In this tutorial, you’re going to create an app to find restaurants using an API provided by Zomato. At the end of the tutorial the app will do the following:

Wrap API calls with the BLoC pattern

Search for restaurants and show the results asynchronously

Maintain a list of favorite restaurants that can be viewed from multiple screens

Getting Started

Download the starter project using the Download Materials button and open it up with your favorite IDE. This tutorial will be using Android Studio, but you can also use Visual Studio Code if that’s your preference. Make sure to run flutter packages get, either at the command line or when prompted by your IDE, to pull down the latest version of the http package.