Bootstrapping Your Flutter App With Ease

David Djordjevic
Prime Holding JSC
Published in
4 min readJun 2, 2021

Having a clean and maintainable codebase is one of the things that help you achieve your long-term goals. A necessary part of achieving those goals is choosing the right tools. Nowadays, most apps use common essentials like flavors, app localization, or even analytics that need to be adjusted to your own needs. To overcome the challenge of configuring them every time from scratch, we developed a new package called rx_bloc_cli .

The rx_bloc_cli is a command-line interface that provides a dev-friendly way of bootstrapping a base app with many pre-configured components. With a single command, you can bootstrap an app without having to deal with boilerplate code, and start working on your app right away.

What do I get by using rx_bloc_cli?

An app created with rx_bloc_cli contains the following components:

1. Cross-platform support (Android, iOS, and the Web)

With cross-platform support, you are only required to write your code once and it will run on all platforms. This is a fantastic feature provided by Flutter, allowing you to work on your app without distraction. You define the UI and the interactions of your app and leave Flutter to handle all the cross-platform work for you. As of now, rx_bloc_cli supports iOS, Android, and Web apps.

2. Flavors for handling multiple environments

Having flavors while developing an app can be very helpful. Flavors represent different environments in which the app will run. They can be used to distinguish between environments such as development and production. In this way, we can have two separate APIs (one for development and one for production) and/or configurations to ensure that our app always works as intended while constantly evolving.
With rx_bloc_cli, you get three out-of-the-box flavors: development , staging and production.

3. State management solution

Our state management solution of choice for apps created with rx_bloc_cli is the rx_bloc package. Using the rx_bloc ecosystem helps you build robust, scalable, and maintainable apps. You can learn more about it in this series of articles.

4. Design system

A design system is a centralized place where you can define the design of your app. This includes typography, colors, icons, images, and other assets. By using a design system, we ensure that a change in the design affects the entire app. For instance, if you change the color of a button in the design system, it will change the buttons across all screens with the same design. This is more efficient than manually changing each button individually.
Along with the design system come two customizable themes for your app for light and dark mode.

5. Internationalization support

As the app’s audience grows, making the app available in different regions and languages can sometimes be overwhelming. Adding support for multiple languages can be a task in itself if not done properly from the beginning of your project. However, with the internationalization support from the very beginning, you have nothing to lose. Adding support for multiple languages is as easy as creating a new file and adding your translations to it. Everything else is covered by Flutter. Easy as that!

6. Firebase analytics

When you create your app, you can opt-in to analytics that will be generated with your app. With a minimal configuration, you can start using it right away. Analytics can help you understand how your application is used by your users. You can keep track of when a particular page has been opened, when the user is logged in, or even your own custom events. Some of those events can be found here.

7. Unit and Golden tests

Tests are an important topic when it comes to developing software. With unit tests, you can be sure that the business logic of your app is working as intended. If breaking changes occur in places covered by these tests, you know what caused them. If your app needs to be pixel perfect, you can achieve this with the use of Golden tests. Golden tests compare your widget/screen with a file containing the expected look. This way, you can always ensure that your app looks as intended.

8. Static code analysis

When writing code, following certain conventions can help produce quality code. By having static code analysis, most common practices are enforced and developers can quickly catch up with code written by other developers. The static analysis combined with Dart’s sound null-safety enables developers to write even better and safer code.

Example of code with static code analysis warnings and code with applied static code analysis practices
Before and after applying practices provided by static code analysis

Final thoughts

Bootstrapping your app manually can take more time than expected, especially when it comes to setting up the environment or configuring components or tools. Depending on the app’s complexity, it can take time before the actual feature development takes place.

To address this challenge, there are tools that can help skip this initial phase so that developers can focus on implementing the required app features. Using rx_bloc_cli you get lots of common bootstrapped components in advance with minimal setup. We hope this reduces the time it takes to implement your next great app!

Related articles

  1. Building Complex Apps In Flutter Through The Power Of Reactive Programming
  2. Introducing rx_bloc ecosystem — Part 1
  3. Introducing rx_bloc: Part 2
  4. Introducing flutter_rx_bloc: Part 3
  5. RxBloc Intellij Plugin
  6. Easy Paginated Lists in Flutter

--

--