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

Aseem Wangoo
May 13, 2018 · 4 min read

Success is walking from failures @ no enthusiasm loss.

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

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

-buildLightTheme()

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
_buildTextTheme()

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

5. LoginPage widget

LoginPage widget
_buildTextField()

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()

OutlineInputBorder

9. Border changed again

border: CutCornersBorder()

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())

BackDrop

12. Implemented the dropdown Menu on hamburger icon click.

Animation Code Snippet
AnimationResult

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.

ImageAspectRatio
ImageAspectRatio

Journey……

Journey….

A short video of the i/o part1 journey :

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.

FlutterPub

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

Aseem Wangoo

Written by

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

FlutterPub

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