DEV Community

loading...
Cover image for Flutter Engage — Flutter 2

Flutter Engage — Flutter 2

aseemwangoo profile image aseem wangoo ・16 min read

This event happened on 3rd March 2021. This article is divided into

  1. Keynote
  2. AskFlutter Leadership Roundtable

Keynote

What’s New in Flutter 2

We’ve broadened Flutter from a mobile framework to a portable framework, unleashing your apps to run on a wide variety of different platforms with little or no change.

Every app gets a free upgrade with Flutter 2 and they can now grow to target desktop and web.

Flutter Engage — Flutter 2
Flutter Engage — Flutter 2

Flutter Engage — Flutter 2
Flutter Engage — Flutter 2
  • Flutter 2: Improved performance, stability, supports the latest UI trend, increased accessibility support, state restoration APIs, and much more.
  • Around 6k+ issues closed, check out the post
  • Flutter used in Google by

Google Products using Flutter
Google Products using Flutter

  • VP Engineering of Google Pay shares his thoughts on Flutter
  1. Tech debts brought down by 90% per engineer basis
  2. Engineers were 20% more productive
  3. He recommend teams use Flutter for multiple platforms.

GPay Stats
GPay Stats

  • Microsoft is contributing code to Flutter in recent months.
  1. Brings foldable support to Flutter.
  2. A new widget (TwoPane)
Widget build(BuildContext context) {
  return TwoPane(
    pane1: _widgetA(),
    pane2: _widgetB(),
    paneProportion: 0.3,
    panePriority: MediaQuery.of(context).size.width > 500 ? TwoPanePriority.both :TwoPanePriority.pane1,
  );
}

3. Display features to mediaquery

Microsoft and Flutter

  • Announcement of Flutter Web as stable

In this initial release of web support, the focus is on three app scenarios:

  • Progressive web apps (PWAs) combine the web’s reach with the capabilities of a desktop app.
  • Single page apps (SPAs) that load once and transmit data to and from internet services.
  • Expanding existing Flutter mobile apps to the web, enabling shared code for both experiences.

Flutter Web Stable
Flutter Web Stable

  • Director of Web developer ecosystem Google shares some thoughts
  1. Flutter Web as an option now for creating web apps amongst others

Options for Web development
Options for Web development


PWA’s are a great fit for flutter

3. Flutter and Chrome team are working together


  • Flutter Web features
  1. Performance

We discovered that CanvasKit can deliver superior performance, fidelity, and correctness.

Demo (flutter plasma)

2. Web-specific features and widgets

A Flutter app running in the browser should feel like a web app. So we added features to Flutter that help you use the best of the web.

Hyperlink, text auto-fill, custom URL strategies, PWA manifests

3. Support for desktop form factors

We want to make Flutter web experiences feel right, regardless of the shape and size of your browser window. Desktop browsers offer different UI affordances, and so we’ve updated Flutter accordingly.

customizable interactive scrollbars, keyboard shortcuts to scroll, screen reader support

Demo iRobot

  • Desktop announced in stable (early release flag)

Desktop Stable (under release flag)
Desktop Stable (under release flag)

  • Produces standalone executables for each platform
  • Microsoft contributed PRs to use the latest Windows Runtime APIS, while running on Windows 10
  • Canonical share their experience with Flutter

Canonical and Flutter
Canonical and Flutter


  1. Flutter SDK available as snap in the snapcraft
  2. Full multi-window support
  3. Popular plugins available for Linux

firebase, bluetooth, connectivity, desktop_notifications, etc

4. Yaru (Ubuntu Style) in Flutter

5. He recommends Flutter will be the default choice for desktop and mobile apps for Canonical


  • Flutter for Embedded devices (Toyota)
Toyota and Flutter
Toyota and Flutter
  1. Build infotainment systems powered by Flutter.
  2. Toyota chose Flutter because of its high performance and consistency of experience, fast iteration, and developer ergonomics as well as smartphone-tier touch mechanics.
  3. By using Flutter’s embedder API, Toyota is able to tailor Flutter for the unique needs of an in-vehicle system.
  • Dart 2.12
Dart 2.12
Dart 2.12

What really sets languages apart is their unique combination of capabilities.

Dart Features
Dart Features

Dart FFI now stable
Dart FFI now stable

  • Status quo about data classes in dart
  1. Also known as Metaprogramming, there are packages that do this like freezed, built_value, etc
  2. Currently, the dart team is still exploring options

  • Flutter DevTools — 4 new highlights
  1. Flutter fix: The ability for IDE’s to notice when there’s a common exception and offer to bring it up in DevTools to help you debug
DevTools — 1
DevTools — 1

2. Null safety via dart migrate

3. Inspect the widget if any error occurs.

DevTools — 3
DevTools — 3

4. Size debugging tool

Size debug tool
Size debug tool

  • Firebase now has 6 packages with sound null safety

firebase_auth, cloud_firestore, cloud_functions, firebase_messaging, cloud_storage and firebase_crashlytics

  • Google Mobile Ads for Beta

Open beta for Google Mobile Ads SDK for Flutter. This is a brand new plugin that provides inline banners and native ads. This plugin unifies support for Ad Manager and Admob now

Demo (Wallace & Gromit)


AskFlutter Leadership Roundtable

In case you have document-centric pages with a lot of rich text static content, flutter won’t be a good choice.

Q: Will Flutterfire become the official firebase SDK?

A: Firebase primarily supports iOS, Android and Web. We took the official Firebase SDK and wrapped it in Flutter code. As long as you are using flutterfire in your flutter app, you are using the official Firebase SDK.

Also, the video content of firebase is shifted to flutter now.

Q: Flutter seems understaffed with more than 8k+ issues?

A: We are resolving issues as fast as we are getting them. Last year, around 15k+ issues were reported and all of them were resolved. We are pretty happy with the rate of fixing bugs and resolving them.

More issues = More users

Issues resolving = People contributing (around 200+ and most of them are non-googlers)

Q: When will flutter web drop # in the url? Why does it exist?

A: Flutter uses a hash URL strategy, something we initialize when we initialize the web engine. So when you have flutter named routes, you are basically initializing them as part of the hash. We have a way to customize the URL and drop the hash. There is a community plugin available here.

Q: Flutter has issues with the new Mac’s M1 architecture. Any solution?

A: Try again today in Flutter 2.

Any advancements made to platforms like M1, android, etc are addressed immediately. M1 work was categorized into 3 buckets

  • Apps run well on M1
  • Tools run well on M1
  • Can we develop our own tools on the M1

M1 was a new platform for us, as we had never done ARM on a host before. Apple Silicon was like a new platform we had to support. We had to make sure everything from Dart/VM to embedder to all the layers of fluter, works

Q: Official guidance to app architecture like Jetpack/Android?

A: Very soon landing a new template into the master branch. This will be targeting creating an app with best practices (state restoration, app state, etc)

Q: Will null safety break existing apps?

A: No. You would like to start with migrating your dependencies first. Also, you can compile the app with non-nullable and nullable code simultaneously. Compiler in null safety will use null safety optimizations.

Q: Is flutter good for 3D rendering?

A: Flutter is built on a 2D system, but lots of people have done 3D with it!! APIS we provide is for drawing 2D objects but transforms we use support 3D.

Flutter content itself can embed other OpenGL textures. You can write some OpenGL code, and then embed the OpenGL texture in your flutter app.

For instance, Wallace & Gromit

Q: What about Flutter for Desktop?

A: It is stable, but we don’t consider it stable. There is no support for multi-window, but for one window it’s pretty solid.

Desktop work was divided into 2 camps:

  • Teach flutter about what mouse and keyboard are
  • Teach flutter engine to run on really big screens (plugged into the wall)

To make the web stable, we had to have desktop form factors. Ability to use a trackpad, scroll view, and keyboard

Why desktop is not labeled stable? Reasons

  • No good testing on the Flutter side
  • No support for accessibility

Q: The best way to learn Riverpod?

A: Start coding with it

Q: SEO for flutter web?

A: Flutter started as a fork of chrome, indexability has always been on our mind. This release was optimized for web applications and customers using the web.

SEO is something we are looking into, but right now if you are building a website that needs SEO, flutter is not a good choice

Q: Problem of janky animations on the first opening of the app?

A: Performance is the grounding principle of flutter. Every commit in the flutter branch goes through the performance tests. We are aware of the iOS issue, it did get worse when we migrated from OpenGL to Metal (where we are no longer able to cache shaders)

Ian: We are very much focused. Project here

Q: Google plans to use Flutter Web internally?

A: Teams are experimenting with flutter web. We expect to see more use of Flutter Web. It is being used for internal tools, like migrating flutter code for teams like GPay.

Dart dev tools: built with Flutter Web.

Q: Mediation with AdMob in Flutter?

A: Mediation is not in the list of google_mobile_ads packages. It is not officially supported, because

  • Testing

This has to be right, otherwise, someone’s business can be threatened. But this is certainly on the roadmap.

Q: Will Dart support WASM?

A: There are two cases

  • Compile dart into WASM

This is not possible, as it requires features in WASM like Garbage Collection, threading

  • Code already compiled in WASM and link to dart: There is a package for this.

Flutter Web has 2 renderers:

  • HTML renderer: Uses a combination of HTML elements, CSS, Canvas elements, and SVG elements. This renderer has a smaller download size.
  • CanvasKit renderer: This renderer uses WASM and WebGL. It renders your app as Skia in the web browser

To optimize your Flutter web app for the characteristics of each device, the rendering mode is set by default to auto. This means that your app runs with the HTML renderer on mobile browsers and with CanvasKit on desktop browsers.

Q: Flutter Web vs React vs Angular?

A: Flutter Web is using canvas, which is different from angular and react. We feel reluctant to compare Flutter to other technologies. We all have valid use cases and we are happy to coexist with these frameworks.

Flutter Web will be suited to what customers require.

Q: I’m on the beta channel. Should I go to the stable channel?

A: Beta just became stable. Here’s the update frequency

  • Stable (Once a quarter)
  • Beta (Once a month)
  • Dev (Once a day/week)

Flutter Web is now in the stable branch, so yes, you can use stable.

Q: Data classes in dart?

A: We are trying to find a good way. There are some packages like freezed, built_value, etc

Q: The best way to develop a flutter app to work offline/online?

A: Let’s take firebase. It keeps a local cache of the recent read data. So, we can access the data again, if you restated the app.

For local write operations, firebase keeps a queue of pending writes. You will still see the data, but in the background, once the app has a network connection, firebase sync the changes to the server.

Q: Difference between the legacy version and the null safety version of the flutterfire?

A: Most of the flutterfire plugins are migrated to null safety.

Q: Good IDE for Flutter development?

A: All IDE’s work with Flutter.

Andrew uses IntelliJ, Eric uses VSCode, Ian uses Emacs, Mariam uses IntelliJ and Puff uses VSCode.

Discussion (0)

pic
Editor guide