On December 12 (no, shouldn’t I cut my hands off? What are you doing here studying? Oh. I forgot, I am too poor, can only study hard to improve themselves, which like you are still hugging the object to cover the quilt… O (╥﹏╥) O) the Google Flutter Team brought us the latest Flutter 1.12 release at the Flutter Interact Conference. One of the interesting features in this update is the release of the “Flutter Web Beta” version. That means you can use it for real projects.
B standing video address: www.bilibili.com/video/av790… Welcome to subscribe to pay attention to three.
1. Why Flutter Web with FlutterNative?
Because developers need to build applications that run on both mobile devices and the Web, and run flawlessly. As a developer, it is essential to learn a set of skills that can be easily migrated across multiple platforms. Flutter is web-enabled, meaning developers can use the same code, deliver features faster, and ensure consistency across devices (Android, iOS, Web). In addition, the powerful Dart compiler is optimized for the Web, and the Flutter architecture is portable, making it easy for developers to create high-performance, interactive, and multi-endpoint Web experiences using Flutter.
Let’s look at the compatibility of Flutter Web. It’s so cool! No matter mobile phone, tablet or browser can be very compatible, perfect!
2. Solutions supported by Flutter Web
The scenarios suggested by the Flutter team for the Flutter Web feature are as follows:
1. Networked standalone applications
Flutter allows developers to build a single application using the same code on mobile and in the browser. This is one of the earliest implementations of Flutter Web and one of the most widely used cross-platform solutions. This allows you to take advantage of Flutter’s cross-platform capabilities, allowing you to truly run Flutter code once, on three ends, with consistency, high performance, and easy maintenance. (Hope not to be seen by those black hearted bosses or technical management who like to squeeze, otherwise programmers will be helpless and miserable again… One man is doing the work of three. Did you enjoy it?)
2. Embedded interactive content
One scenario is to embed a feature-rich, data-centric Mini application in the parent site without the need for navigation services or other similar applications. For example, you can embed a number game, an online chatbot, a mortgage calculator, a weather forecast, etc.
3. Lite apps
Streamlined Web applications can use Flutter’s same tools, frameworks, UI components and business logic to provide a less feature-rich experience and associated functionality. This will reduce the number of developers who miss Flutter because of installation problems. The existing Flutter application has a lightweight Web experience that allows companies to have the best of both worlds.
4. Companion apps
The Flutter Web is the auxiliary, and the mobile application is the main body. The Web experience built with Flutter is then used to support your mobile application. For example, build a Web application using Flutter so that administrators or internal users can create content or manage backends for existing Flutter mobile applications. Although a bit cumbersome, the Part of Flutter Web can take advantage of much of the same code found in mobile applications.
Rich Web plug-in support
Pub.dev has also been updated with new platform tags and filters.
The search page has been optimized to list whether the software package supports Dart or Flutter. Click Dart and you will see two subcategories on the right: Native and JS; Click on Flutter and you will see three subcategories on the right of Flutter: Android, iOS and Web. If you click Any, all plug-in libraries are displayed.
Then, on the package details page, the platforms supported by the package are listed. If it’s a pure Dart package, some of these three are displayed: Native, JS; If Flutter is supported, some of the three options will be displayed: Android, iOS, and Web. Of course, the specific support depends on the function of each package. Web-tagged must be Web-enabled, which makes it easy to determine if a package is Web-enabled.
The Flutter team has updated some packages for the Web. The Flutter team has helped us to encapsulate the ability of the Flutter and JS to call each other by calling the API in these packages. These packages can run both on Flutter and the Flutter Web. So you don’t have to worry about compatibility, and it’s really quick and easy to develop. Including the following:
- The shared_preferences plugin for Flutter is used to read and write simple key-value pairs.
- Firebase_core connects to multiple Firebase applications
- Firebase_auth A Flutter plugin for Firebase authentication
- Google_sign_in Indicates Google login
- Url_launcher Route navigation
- Video_player Plays the video
- The Sentry Dart crash report library
[PS] : WHEN I experienced Flutter Web when Flutter1.9 was just released 3 months ago, I raised issues with the Web function not supported by URl_launcher for Flutter. I didn’t expect to realize Flutter so quickly, and I had to admire the efficiency of Google Flutter team. Of course, there are not enough Flutter Web plugins so far. We hope that all of you will participate and contribute your own plugin to make the Flutter Web better.
4. Problems to be dealt with
1. Auxiliary functions
Some of the features that have been implemented for cross-platform assistive technologies include features such as UI traversal and traversal order, UI interactive hints (such as clickable, text labels, editable text, deltas, images, active areas, and checkboxes). Support for adding screen readers to desktop Web browsers is being developed.
2. Multi-browser support
As Flutter evolves from a mobile-only framework to encompass desktop UX idioms, Flutter’s support for desktop Web browsers will improve and become more seamless. The Flutter Web team plans to support and test Chrome, Edge, Firefox and Safari on both desktop Web browsers and mobile browsers.
3. Test scope
Since the release of Flutter Web, the Flutter Web team’s testing range on the framework and the Flutter Web engine has gradually increased. The Flutter Web team has been running automated tests on Chrome and manually testing Safari. More testing will be done in the future.
This article first appeared on the public account Flutter. More information about Flutter is welcome.