Original link: medium.com/iecse-hasht… The original meaning is in-depth exploration, but I think it is actually simple exploration.

Cross-platform development has been one of the trends of the past few years, and there is no doubt that most of the time developers are enthusiastic about the cross-platform community, and Google has entered this market with its UI framework, Flutter.

But extending cross-platform support to the Web is not easy, and the solution to Flutter is Flutter for Web

Introduction: What and why

Flutter is a cross-platform UI framework from Google that aims to help developers create more native, high-performance and engaging mobile applications. However, Flutter aims to create a user interface for every device window, not just mobile applications.

With Web support, Flutter offers the same development experience as it does on mobile. Thanks to the ease of Dart, the power of the Web platform ecosystem, and the flexibility of the Flutter framework, developers can now create Web applications directly outside of iOS and Android.

Since the Web uses the same Flutter framework as iOS and Android, and the Web is only one of the frameworks supported in developer projects, you can generally compile existing Flutter projects written in Dart directly into the Web experience.

Here we will analyze the current state of Flutter Web (as compared to SPA frameworks like React, Angular, and Vue), desktop (as compared to Electron and Qt), and hopefully with some additional efforts to achieve embedded device compatibility in the future, and more.

But.. How does it work?

Flutter (Mobile) has its own rendering engine, Skia, which provides the Flutter SDK with complete control over every pixel on the screen with high precision and speed.

Flutter achieves complete control over every pixel on the Web by building HTML components and using the entire screen as a canvas. It was created using HTML/CSS and Javascript, both of which are currently the dominant Web technologies. Therefore, Flutter can use all the features of Flutter on the Web, such as animation and routing, without writing any extra code to adapt.

Currently, Flutter is web-compatible, including building the underlying graphics layer of Flutter on top of traditional browser apis, and compiling Dart into JavaScript, rather than ARM machine code, as used in mobile apps. By combining DOM, Canvas and WebAssembly, Flutter can provide a high quality and high performance user experience across different browsers.

Important details: strengths and weaknesses

Ok, so Flutter is another attempt to bring down the Web marketReacts 和 AngularsThe framework?

Well, yes and no.

Let’s look at what Flutter Web brings and think about it through its disadvantages.

Advantages:

    1. Basically the same controls are supported for Flutter for Mobile.
    1. Almost all of the well-known libraries support running on mobile and The Web.

60.04% of the pub.dev package is Web-compatible.

    1. Development time on all three platforms was significantly reduced.
    1. Custom:Flutter also offers the option to develop a customised version for the Web based on the operating system – just as it does for Android and iOS.

Ok, does this mean that Flutter Web and its advantages will become an ideal tool for building cross-platform applications, including the Web?

Not really, Flutter Web also has some serious disadvantages:

    1. The SEO ability of Flutter Web is not friendly.
    1. You cannot modify the generated HTML, CSS, and JavaScript code.

Flutter Web is not SEO friendly and its lack of SEO is one of the reasons why it is increasingly difficult to use Flutter Web for large commercial products.

Performance and rendering

Flutter provides developers with two optional renderers:

    1. HTML rendering
    1. Canvas Kit

HTML renderers are optimized for download size rather than raw performance.

Canvaskit prioritizes performance and pixel perfect consistency, but affects download size, which can make your app run a little slow at first, and the total file size presented by Canvaskit increases by more than 400% over the original file size, but also improves performance by leaps and means.

PS: The default renderer is automatic mode, which prioritizes HTML for mobile browsers and CanvasKit for desktop browsers.

To test the renderer separately:

HTML

Flutter Run -d Chrome -- Webpage renderer HTMLCopy the code

Canvaskit:

Flutter Run -d Chrome -- Webpage renderer CanvasKitCopy the code

Initialize and run the Web application

Steps to initialize the Web:

All projects created on Flutter 2.0 and later have built-in support for Flutter Web, so you can initialize and run a Flutter Web project in the following ways

flutter create app_name
flutter devices
Copy the code

The devices command should at least list:

1 Connected Device: Chrome (Web) • Chrome • Web -javascript • Google Chrome 88.0.4324.150Copy the code

Then run it on Chrome:

flutter run -d chrome
Copy the code

To add Web support for previous versions of Flutter creation, run the following command from the project directory:

flutter create .
Copy the code

Folder structure

Running the flutter create. Command creates a folder called “Web” and fills it with the files needed to run on the Web.

By the way, you can’t edit index.html or javascript files.

Demo

This is a very simple to-do list application that compares what it looks like on mobile and on the Web:

Code: github.com/geekyprawin…

conclusion

At this stage, it is not practical to use Flutter Web for all Web development needs, but it is useful and efficient if you want to use Flutter Web to build Web applications:

  • Support for integrated progressive Web Applications (PWA).
  • Implement internal applications, such as Dashboards.
  • Generate the corresponding Web version under the existing Flutter mobile application code. You can use the existing logic and UI elements to output the Web application faster. In general, the Web version does not need to implement all the functions of the mobile application.

Flutter Web allows developers to build high-performance and interactive Web applications, but it does not apply to static Web pages.

Flutter Web is ideal for single-page interactive applications with animations and heavy UI elements. If your site needs SEO, don’t use Flutter Web (at least in its current state).

For static Web pages with lots of dense text, traditional Web development methods support faster load times and easier maintenance.

To sum up, Flutter Web is one of the strong competitors of all frameworks on the market. As mentioned above, it has its advantages and disadvantages, but it has not fully reached the level of becoming a standard.