Flutter is on the fast track to conquering cross-platform development, and we have big expectations in 2020.
State management was and remained a hot potato. Will some solutions be declared official, we still don’t know, but we have listed some of the most popular solutions and their up-and downsides.
Another thing that was big in 2019, and to our notion will be even bigger are Flutter tools for designers.
Let’s dive deeper.

What is Flutter?

Being one of the fastest-growing mobile app development tools, the Flutter framework is on the radar of every cross-platform developer. Introduced in 2017, and declared as stable for production in December of 2018, Flutter has become the faster-growing mobile app platform according to GitHub’s 2019 State of the October report. With the community getting mature and tremendous efforts of both Dart and Flutter teams, Flutter threatens to become one of the leading mobile app development tools and even revolutionizes the industry itself.
As it’s still a young development tool, these are the things you should keep an eye on in 2020.

State management

State management in Flutter raises a lot of dust. Official Flutter team encourages developers to search for the best solution, or choose one from the packages, provided by them or the community. Still, no approach has been made official yet.
Some of these solutions are harder to grasp than others, but we’ll list some of the most popular ones:

1. setState

   Easy to understand, hard to maintain. Using setState, Flutter Framework is notified that the internal state is changed. This will schedule a Widgets build method, rebuilding the UI and reflecting the new state.

2. InheritedWidget

   Used for propagating information down the widget tree, InheritedWidget is a parent widget created as a class with fields with data that will be used later in child Widgets. InheritedWidget has a static method that allows all the children in the tree to access its data. InheritedWidget also provides a function (notifyListeners) that will notify the Flutter if the widgets that depend on inherited data should be rebuilt.

3. ScopedModel

   The general approach is to use the library’s three main classes. The class that will store all shareable data is a class that will extend ScopedModel’s Model class. In this class, any function that’ll make a change to the data will have notifyListeners function which will notify the widget tree that the model has been changed and the widgets that are connected to the model should rebuild too. To make our model data accessible in our widget hierarchy, we are wrapping our custom widget with the ScopedModel widget. ScopedModel will hold our class with shareable data. With the ScopedModelDescendant widget, we find the nearest model with data we need, handing that model to the builder method. Any time data in the passed model changes (notifyListeners triggers), this will rebuild our widget.

4. Provider

   Using ChangeNotifier, ChangeNotiferProvider, and Consumer classes provided by Flutter SDK, the Provider approach is created. Creating a custom model class by extending ChangeNotifier, we can declare data and methods that will change that data that will be used in a widget tree. The methods that will change the data will call the notifyListeners method and inform the UI that data has been changed. ChangeNotifierProvider class is a widget that will provide an instance of ChangeNotifier to its descendants, making that instance accessible by calling create method. Wrapping the widget tree with ChangeNotifierProvider, in the widget’s build method that will use model data, we will declare a final variable by providing a model of the wanted type. Next, using the Consumer widget, wrap the widget that will use the declared data and in Consumer’s builder method and provide the declared variable. Anytime the provided variable is changed in the model, the notifyListeners will alarm the Consumer, and it will trigger the builder method.

5. Redux

   Redux implementation in Dart language is based on ScopedModel. Being one of the most used approaches in web development, Redux for Flutter gives developers a proven concept in state management. The state is stored in one class, which can be changed by the action dispatched inside the application. The dispatched action holds the type of action and can have a payload. The type of action describes how the action will change the state. Changing the state will rebuild the widget.

6. MobX

   Another popular approach implemented in the Dart language. The main concept of MobX for Dart language consists of Observables, Actions, and Reactions. Observables are data that could be changed, Actions are how the observables are mutated, simply a function that will change the observable. Reactions are observers that get notified when the tracked observable is changed. Depending on the needed reaction, we can have:

   – a reaction that will run immediately and on any change of the observable that we pass
   – a reaction only when the passed observable is changed
   – a reaction only when passed statement with wanted observable is truthy an async version of the passing statement that needs to be truthy

   Creating a class store with defined observables and actions that will mutate the observables is simplified with the mobx_codegen package which provides us annotations that will be used to declare what will be our observable (@observable) and what will be our action (@action). There is even a computed annotation (@computed), which can be used to combine observables and provide the same experience as observable and trigger the build method of widget only when some of the composing observable changes. In the custom widget, the created store will be used by instantiating the store and using the Observer widget provided by MobX. The Observer widget has a builder method that will trigger the value anytime from the store used inside the builder method is changed.
   Now we’ve listed some of the popular solutions for state management, here is our recommendation – it depends on your app. Smaller apps sometimes don’t even require state management, or require simpler ones, while bigger apps will require a more serious approach, like MobX or Provider.

Flutter Web

Perhaps the most hyped thing about Flutter currently is that it’s gone beyond mobile. Enter Flutter for the Web! Using standards-based web technologies (HTML, CSS, Javascript), mobile applications built in Flutter can comply and run in modern browsers.
This means that the same code base we write to create Android and iOS apps also creates web apps. UI we initially created for mobile, should obviously be adjusted for larger screens because browsers run on many different devices. Flutter makes this easy, offering various widgets that help us developers adjust and create responsive web apps. LayoutBuilder widget builder function provides box constraints. We can use these constraints to decide whether or not we want to show UI.
Using MediaQuery.of method in build functions, we can not only find out the sizes of a device but also the device orientation. Using those widgets, we can easily adjust the mobile app for the Web. As of December 2019, Flutter for the Web is in beta.

Flutter for desktop (macOS alpha)

macOS Flutter support is in the alpha stage, which means that the Flutter team has no intention of stopping with web support. Although the Flutter web is a huge deal, we’re excited about the desktop platform too. Having an opportunity to also cover a desktop platform with one code base is something that every developer would dream of. There are just a couple of plugins available for macOS support, so there is a lot to cover to be even considered as a serious option for development but is stable enough to play around with.

Rive

Formerly known as 2Dimensions, Rive is a great online tool that allows designers to design and create beautiful animations for Flutter applications. What makes this tool so special is that by creating amazing animations, the tool will enable us to integrate assets in the Flutter project. Created assets are interactive, and Rive promises 60fps animated graphics in real-time. This tool looks promising for creating amazing animations that could be used for better customer interaction with the application, but also in creating games with Flutter.

Supernova

Another fantastic application that needs attention is Supernova. Supernova converts Sketch and Adobe XD designs into native frontend code. The app has full Flutter support too. Importing design created in Sketch or Adobe XD, Supernova treats grouped layers as Flutter widgets. The application does not just convert the design but also allows the designers to edit and design further. With build-up tools provided by Supernova, the designer can even animate some of the assets. Once the designer is satisfied with the look of the assets, he can use the Supernova to convert the design into a Flutter code, which can be used in development. Supernova goes one step further and allows us to integrate with the mobile simulator, and by changing the design and using a hot reload, we can instantly see changes that were made. This tool truly lowers the gap between designers and developers. The Supernova team also announced that they would develop their tool from the ground up in Flutter. With all the options and tools that Supernova provides, this application has to be in the spotlight for both developers and designers that work with Flutter.

In conclusion

State management remains unsolved in 2020. Our recommendation is to be wise when choosing the solution and pick one that will suit your app the best. You don’t need to choose unnecessarily complicated ones for simple apps, and for bigger apps, we recommend Provider or MobX.
The web is in beta, and if we follow the development trend of Flutter, we expect a lot of action in this domain.
The desktop was only available for experimenting up till December 2019. We hope it will be in beta until the end of the year (no official statements have been released yet, this is only our gut feel).
Rive and Supernova were already prominent in 2019, but we expect that these tools will be even more used in 2020. These tools are excellent for designers, and developers too, because the design is translated to the code, and it makes the app development so much faster. We guess that, as Rive, Supernova will also be an online tool, because it will be written in Flutter, and Web is in beta.