Breakdown — Flutter @i/o 2018 (Part Two)

If you can dream it, you can do it.


All in one Flutter Resource: https://flatteredwithflutter.com/

This is the concluding part of my earlier post, Flutter @i/o 2018 .

Build reactive mobile apps with Flutter (Google I/O ‘18)

Presenters laid focus on handling states with flutter :

  1. Flutter & state
  2. State & the widget tree
  3. Reactive with streams

Let’s start….

The discussion started with incrementer app (out of box app which comes with flutter). On click of the floating button, count was displayed. The count variable initially was kept with global scope (not recommended by presenter), later passed in as parameter to the function and accessed as

onPressed: widget.increment

Incrementer function…

Passing States…(State and the Widget Tree)

  1. How to access state that is not in the widget we build ?
  2. How to notify other widgets for rebuilding?

Here comes inherited widgets…

Inherited Widget tree

How to use them :

Use of InheritedWidgets

But, as the state is declared final, it becomes little hard (by introducing boiler plates) to mutate state using inherited widgets.

What’s New…

Scoped Model was introduced….

  1. Available as external package
  2. Built on top of Inherited Widget
  3. Access, update and mutate state
Use of ScopedModel…

Whenever we have a descendant widget (ScopedModelDescendant), they observe or listen for the state changes and get rebuild.

Earlier Code…(without scopedmodel)

Top-level widget (MaterialApp) is replaced by ScopedModel which takes a model(CartModel) and a child (material app in this case).

ScopedModel( model : CartModel(), child : MaterialApp())

CartButton widget changed to ScopedModelDescendant which takes a builder function.

ScopedModelDescendant

One important property of ScopedModelDescendant : if you don’t want to rebuild a certain widget, for instance on click of cloth item only the cart count widget should be rebuild and not the entire cloth section, we can do it as

rebuildOnChange: false

Reactive with Streams….

Reactive architecture in flutter was focussed…

b(business)loc(logic)

Sinks in, streams out..(sinks are input, streams are output)

Initial CartBloc Model
Final CartBloc Model…

Lastly, dart streams and rx.package were highly recommended by the presenters.

P.S…………………


The Flutter Pub is a medium publication to bring you the latest and amazing resources such as articles, videos, codes, podcasts etc. about this great technology to teach you how to build beautiful apps with it. You can find us on Facebook, Twitter, and Medium or learn more about us here. We’d love to connect! And if you are a writer interested in writing for us, then you can do so through these guidelines.