Breakdown — Flutter @i/o 2019

Aseem Wangoo
May 16 · 5 min read

Release the kraken…

All in one Flutter resource : https://flatteredwithflutter.com/what-happened-with-flutter-io-2019/


Disclaimer : This article is a long one. Please read having free mind….

Breakdown — Flutter @i/o 2019

Begin….

This article is divided into 5 parts,

Note : 5, because there were 5 talks on Flutter….:)


Part 1 : Beyond Mobile: Material Design, Adaptable UIs, and Flutter (Google I/O’19)

Breakdown — Flutter @i/o 2019
  • Support for Material Theming in Flutter…
Theming in Flutter….

Example for CardThemes and DialogThemes..

Card Theme
Dialog Theme.

Implement the Dark Theme in Flutter using,

darkTheme : ThemeData.dark();

Customize sliders as per your usecase,

Customize sliders…

Optional labels on Bottom Navigation Bars :)…..

Optional Labels on Bottom Nav bar..

In-built transition for the Extended FAB, if they are present on both the screens.


New Widgets :

  1. Reorderable list view
  2. RangeSlider
Range Slider

3. Expanded Search Bar

Expanded Search Bar….

4. Enhanced Semantics…

5. Improved Contrast Ratios

Applicable to RadioButtons, Checkbox and Switches..Earlier 2.42 : 1

Now 7.62 : 1

6. Touch Targets defaulted to 48x48 for material buttons.

7. Test if widget passes the TextContrastRatios and TapTargetGuidelines

Widget Test…

8. Introducing Platform Adaption for Switches..

Platform adaption…
Switch.adaptive();

For more info on adaptions, https://flutter.dev/docs/resources/platform-adaptations

9. Introduction to adaptive components:

Adaptive Components…

Increase the size of your text globally,

Increase text size globally…

Break Time…..

Part Two : Building for iOS with Flutter (Google I/O’19)

Breakdown — Flutter @i/o 2019
  1. Scrolling physics : Always bouncing in iOS.
  2. Cupertino Widgets in Flutter

For detailed info, please check out this link

3. App demo by the presenters:

Src code: https://github.com/RedBrogdon/building_for_ios_IO19

App OverView..

4. Fill a Cupertino-Button

CupertinoButton.filled()

Platform specific app decisions :

  1. Between iOS and Android:
iOS or Android specific

2. Page Navigation decision :

Page Navigation…

3. Choose platform specific slider :

Platform Specific Sliders

4. Want to interact natively with Swift or Java, yes you can using Platform or Event Channels…

One such package was demonstrated, path_provider.

Part Three : Beyond Mobile: Building Flutter Apps for iOS, Android, Chrome OS, and Web (Google I/O’19)

Breakdown — Flutter @i/o 2019

Src code : https://github.com/2d-inc/developer_quest

Apps running on Web, Developer Quest by 2-Dimensions

Developer Quest..
  1. Listen to keyboard events on Web, using RawKeyboardListener
RawKeyboard Listener

2. Listen for mouse hover events using Listener

Listener for Mouse hovers..

3. Hands on with Flutter Web — Technical Preview

Framework for Flutter Web

Flutter for Web….

All the flutter web widgets are currently under

package:flutter_web

It will be eventually merged under package:flutter,……

Hot-reload not present in web, but hot-restart is..

Page auto-responsive in flutter web and routes are taken care by flutter :)

Widget Inspector present for Flutter Web…

Sphinx Game by Flutter Team…

Part Four : Dart: Productive, Fast, Multi-Platform — Pick 3 (Google I/O’19)

Breakdown — Flutter @i/o 2019

If you want to your class to accept any data type , see below :

— — Always wanted this sample :p

Generics in Dart….

How to pass data to this generic class,:

Pass data to generic class…

Richness of Dart :

Dart on a whole….

What’s New in Dart 2.3 : (Right side)

Dart 2.3 (Right side)

One of the Google apps using Dart -> Google AdWords…

Flutter architecture for Web :

Flutter Arch for Web…

Features Dart Team is working on :

  1. Non-nullable types
  2. Union of late init in Kotlin and lazy in Swift
  3. Definitive assignment analysis for uninitialized local variables
  4. Extension methods (getters, setters, operators)
  5. Foreign function interfaces for objective C, C++.

Last…..Pragmatic State Management in Flutter (Google I/O’19)

Breakdown — Flutter @i/o 2019

Introducing new package for state management : (Provider)

Provider in Flutter…

Team recommends using ChangeNotifierProvider, which implements the dispose method itself..

Tip : You can have different elements of screen reacting to different providers..

ChangeNotifierProvider…

You can have multiple providers too, like

MultiProvider…

Testing providers as :

Notifier Tester..

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