Peace upon you,
I’m thrilled to share the latest and greatest features that have been introduced in Flutter 3.10 and beyond. Flutter, an open-source UI toolkit developed by Google, continues to evolve, providing developers with powerful tools and faster to build stunning cross-platform applications. Let’s explore some of the features of Flutter’s latest versions.
Aside from the nice improvements in Material 3, there are valuable improvements in web
Flutter web apps improved load times
Back in the day when you were working on a web app with flutter and after weeks of work you are ready to release your app, you publish it, you open the app in your browser to see the amazing work you’ve done. But the app takes a long time to start!!
Now! this release reduces the file size of icon fonts. It pruned unused glyphs from both Material and Cupertino and improve image decoding and scrolling speed.
addition to this, there has been an update to the Flutter lifecycle API which allows you to display a splash screen for your web application while it is loading, which is an excellent enhancement.
Embedding a Flutter app into an HTML page
You can embed a Flutter web app into any HTML element of your web page, with flutter.js and the hostElement engine initialization parameter.
To tell Flutter web in which element to render, use the hostElement parameter of the initializeEngine function.
Seamless integration with the web
Flutter is the first framework designed architecturally around new and emerging web technologies like CanvasKit and WebAssembly, which particularly suit complex app experiences.
Support for WebAssembly (Wasm)
WebAssembly (often abbreviated to Wasm) has been growing in maturity as a platform-neutral binary instruction format for modern browsers. On the web, Flutter has been using Wasm to distribute the CanvasKit runtime, while the Dart framework and application code has historically been compiled to JavaScript. Flutter team ’ve been interested in targeting Wasm, instead of JavaScript, for a while. Until recently, however, Wasm lacked native support for garbage-collected languages like Dart.
WebAssembly excites Flutter with its potential to bring the performance of native code to the web. Dart’s JavaScript compiler, used across millions of lines of code at Google, already generates fast, well-tuned JavaScript. However, switching to Wasm will give us the efficiency of native code with the portability of JavaScript, which will further improve our performance on the web. In some early benchmarks, we’ve seen a boost of 3× for execution speeds, which translates into yet richer web-based experiences. And Wasm couples this with easier integration with code written in other languages like Kotlin and C .
For more information, check out Customizing web app initialization on docs.flutter.dev & new architectures with WebAssembly
Finally…
I would like to talk about an update not only for the web, but also for Flutter in general.
Use the MediaQuery.of() method in your build functions
When some aspect of the flutter MediaQuery changes, every widget which depends on MediaQuery.of(context) is rebuilt. Most of these rebuilds are unnecessary, since most changes to MediaQuery do not change more than 1 or 2 fields at a time (window resizing, system brightness changing, system font scale changing).
MediaQuery does not change often on mobile, but resizing web happens often and flutter should be able to handle being resized without dropping frames. There is one place that MediaQuery is rapidly updated on mobile: on iOS, as the keyboard opens, MediaQuery is updated every frame with the only change being the keyboard insets.
Reference
https://docs.flutter.dev/platform-integration/web/initialization#initializing-the-engine
https://github.com/flutter/flutter/pull/114459
Originally published on Medium on June 21, 2023.
Top comments (0)