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

Success is walking from failures @ no enthusiasm loss.

Website :

Video :

Spoiler alert : This post is a long one….

Code beautiful UI with Flutter and Material Design (i/o 2018)..

Presenters laid focus on building apps with flutter which are :

  1. Expressive
  2. Enhanced
  3. Delightful Dev

What’s New…

Material Theming…

Flutter will be now a first-class platform Material Design. Now, material guidelines would be available for Android, iOS, Web and Flutter.

Shrine App (Initially)…

Programming starts…

In this section, we will see the main properties which were focused in the above video…Let’s get started…

  1. Widget : MaterialApp -> theme property

theme: _buildLightTheme() This was their custom theme, which had


2. Color constants file : A file of colors.

ColorConstants file

3. Addition in _buildLightTheme() function

primaryColor : kShrinePink,

primaryTextTheme: _buildTextTheme(base.primaryTextTheme, kShrineBrown),

primaryIconTheme: base.iconTheme.copyWith(color: kShrineBrown),

buttonColor: kShrinePink

Note : -buildTextTheme() is another function written by presentor. (displayed below)

Shrine — with above changes

4. fontFamily property -> fontFamily: ‘Rubik’ in apply of _buildTextTheme()

5. LoginPage widget

LoginPage widget

Changed TextField to Theme (in _buildTextField()), added

data : Theme.of(context).copyWith(primaryColor: kShrineBrown)

Updated look

6. Raised Button (Next) shape changed:

shape: BeveledRectangleBorder(borderRadius: _borderRadius)

Next button…

7. GridView changed to AsymmetricView:

body: AsymmetricView(products: getProducts(Category.all)) ,

New look…

8. Border of LoginPage (username and password changed)

border: OutlineInputBorder()


9. Border changed again

border: CutCornersBorder()


10. Removed AppBar from product display page and HomePage() from home of MaterialApp

11. Added Backdrop (basically a stack) to home property of MaterialApp

home: Backdrop(frontPanel: HomePage(), backPanel: MenuPage())


12. Implemented the dropdown Menu on hamburger icon click.

Animation Code Snippet

13. Animation on click of AppBar too. (use of gesture detectors)

AppBar Animation Snippet
AppBar anim look

14. Special mention of Flutter inspector for detecting the widgets live in application.

mainAxisAlignment: MainAxisAlignment.end

15. Changed the imageAspectRatio to 1.0, so that images look squared.




A short video of the i/o part1 journey :


Like what you read? Give Aseem Wangoo a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.