Breakdown — Flutter @i/o 2018 (Part One)
Flutter I/O 2018
All in one Flutter Resource: https://flatteredwithflutter.com/
Video :
Spoiler alert : This post is a long one….
Presenters laid focus on building apps with flutter which are :
- Expressive
- Enhanced
- 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.
Programming starts…
In this section, we will see the main properties which were focused in the above video…Let’s get started…
- Widget : MaterialApp -> theme property
theme: _buildLightTheme() This was their custom theme, which had
2. Color constants file : A file of colors.
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)
4. fontFamily property -> fontFamily: ‘Rubik’ in apply of _buildTextTheme()
5. LoginPage widget
Changed TextField to Theme (in _buildTextField()), added
data : Theme.of(context).copyWith(primaryColor: kShrineBrown)
6. Raised Button (Next) shape changed:
shape: BeveledRectangleBorder(borderRadius: _borderRadius)
7. GridView changed to AsymmetricView:
body: AsymmetricView(products: getProducts(Category.all)) ,
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.
13. Animation on click of AppBar too. (use of gesture detectors)
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.
Journey……
Articles related to Flutter:
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.
