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

Aseem Wangoo
May 14, 2018 · 3 min read

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…

Image for post
Image for post
Inherited Widget tree

How to use them :

Image for post
Image for post
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
Image for post
Image for post
Use of ScopedModel…

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

Image for post
Image for post
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.

Image for post
Image for post
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…

Image for post
Image for post
b(business)loc(logic)

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

Image for post
Image for post
Initial CartBloc Model
Image for post
Image for post
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.

Image for post
Image for post

FlutterPub

The Pub(lication) for all about the Flutter and its magic

Aseem Wangoo

Written by

Founder of Flatteredwithflutter.com | Flutter, Java enthusiast | Medium writer | YouTuber | Writer at FlutterPub, FlutterCommunity

FlutterPub

The Pub(lication) for all about the Flutter and its magic

Aseem Wangoo

Written by

Founder of Flatteredwithflutter.com | Flutter, Java enthusiast | Medium writer | YouTuber | Writer at FlutterPub, FlutterCommunity

FlutterPub

The Pub(lication) for all about the Flutter and its magic

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store