Breakdown — Flutter @i/o 2019

Flutter at I/O 2019…

This article breaks down all the Flutter talks happened @Google I/O 2019..

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


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

Image for post
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…
Image for post
Theming in Flutter….

Example for CardThemes and DialogThemes..

Image for post
Card Theme
Image for post
Dialog Theme.

Implement the Dark Theme in Flutter using,

darkTheme : ThemeData.dark();

Customize sliders as per your usecase,

Image for post
Customize sliders…

Optional labels on Bottom Navigation Bars :)…..

Image for post
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
Image for post
Range Slider

3. Expanded Search Bar

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

Image for post
Widget Test…

8. Introducing Platform Adaption for Switches..

Image for post
Platform adaption…
Switch.adaptive();

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

9. Introduction to adaptive components:

Image for post
Adaptive Components…

Increase the size of your text globally,

Image for post
Increase text size globally…

Break Time…..

Image for post

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

Image for post
App OverView..

4. Fill a Cupertino-Button

CupertinoButton.filled()

Platform specific app decisions :

  1. Between iOS and Android:
Image for post
iOS or Android specific

2. Page Navigation decision :

Image for post
Page Navigation…

3. Choose platform specific slider :

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

Image for post

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

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

2. Listen for mouse hover events using Listener

Image for post
Listener for Mouse hovers..

3. Hands on with Flutter Web — Technical Preview

Framework for Flutter Web

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

Image for post
Sphinx Game by Flutter Team…
Image for post

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

Image for post
Generics in Dart….

How to pass data to this generic class,:

Image for post
Pass data to generic class…

Richness of Dart :

Image for post
Dart on a whole….

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

Image for post
Dart 2.3 (Right side)

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

Flutter architecture for Web :

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

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

Breakdown — Flutter @i/o 2019

Introducing new package for state management : (Provider)

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

Image for post
ChangeNotifierProvider…

You can have multiple providers too, like

Image for post
MultiProvider…

Testing providers as :

Image for post
Notifier Tester.

Articles related to Flutter:

Image for post

Written by

Founder of Flatteredwithflutter.com | YouTuber | Writer at FlutterPub, FlutterCommunity | Experimenting FlutterWeb

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