Web support for Flutter

In addition to mobile apps, Flutter supports the generation of web content rendered using standards-based web technologies: HTML, CSS and JavaScript. With web support, you can compile existing Flutter code written in Dart into a client experience that can be embedded in the browser and deployed to any web server. You can use all the features of Flutter, and you don’t need a browser plug-in.

Adding web support to Flutter involved implementing Flutter’s core drawing layer on top of standard browser APIs, in addition to compiling Dart to JavaScript, instead of the ARM machine code that is used for mobile applications. Using a combination of DOM, Canvas, and CSS, Flutter can provide a portable, high-quality, and performant user experience across modern browsers. We implemented the core drawing layer completely in Dart and used Dart’s optimized JavaScript compiler to compile the Flutter core and framework along with your application into a single, minified source file that can be deployed to any web server.

While traditional web approaches remain a great choice, we envision the web support available in Flutter being valuable in many scenarios. For example:

A connected Progressive Web Application built with Flutter

Web support for Flutter enables existing mobile-based applications to be packaged as a PWA for reach to a broader variety of devices, or to provide a companion web experience to an existing app.

Embedded interactive content

Flutter provides a powerful environment for creating rich, data-centric components that can be easily hosted within an existing web page. Whether for data visualization, an online tool like a car configurator, or an embedded chart, Flutter can provide a productive development approach for embedded web content.

Embedding dynamic content in a Flutter mobile app

An established way to provide dynamic content updates within an existing mobile application is the use of a web view control, which can load and display information dynamically. The support Flutter now offers for a unified environment for web and mobile content enables you to deploy content online or embedded in an app without rewriting.

Not every HTML scenario is ideally suited for Flutter at this time. For example, text-rich flow-based content such as blog articles benefit from the document-centric model that the web is built around, rather than the app-centric services that a UI framework like Flutter can deliver. However, you can use Flutter to embed interactive experiences into these websites.

Building a web application with Flutter

Requirements

To create a Flutter app with web support, you need the following software:

• Flutter SDK. See the Flutter SDK installation instructions.
• Chrome; debugging a web app requires the Chrome browser.
• Optional: An IDE that supports Flutter. You can install Android Studio, IntelliJ IDEA, or Visual Studio Code and install the Flutter and Dart plugins to enable language support and tools for refactoring, running, debugging, and reloading your web app within an editor. See setting up an editor for more details.

Create a new project with web support

You can use the following steps to create a new project with web support.

Set up

Run the following commands to use the latest version of the Flutter SDK from the beta channel and enable web support:

flutter channel beta
flutter upgrade
flutter config --enable-web

Note: The flutter upgrade command silently fails when origin points to a personal fork. To validate
that origin points to https://github.com/flutter/flutter.git, run the following commands in the root
directory of your local copy of the https://github.com/flutter/flutter repository:

cd <inside local copy of the flutter/flutter repo>
git remote get-url origin
https://github.com/flutter/flutter.git

Once web is enabled, the flutter devices command outputs a Chrome device that opens the Chrome browser with your app running, and a Web Server that provides the URL serving the app.

flutter devices
2 connected device:

Web Server • web-server • web-javascript • Flutter Tools
Chrome • chrome • web-javascript • Google Chrome 81.0.4044.129

After enabling web support, restart your IDE. You should now see Chrome (web) and Web Server (web) in the device pulldown.

Note: You only need to execute flutter config –enable-web once. You can always check the status of your configuration using the no-argument flutter config command.

Create and run

Creating a new project with web support is no different than creating a new Flutter project for other platforms.

Once you’ve configured your environment for web support, you can create and run a web app either in the IDE or from the command line.

IDE

After you’ve configured your environment to support the web, make sure you restart the IDE if it was already running.

Create a new app in your IDE and it automatically creates iOS, Android, and web versions of your app. (And macOS, too, if you’ve enabled desktop support.) From the device pulldown, select Chrome (web) and run your app to see it launch in Chrome.

Command line

To create a new app that includes web support (in addition to mobile support), run the following commands, substituting myapp with the name of your project:

flutter create myapp
cd myapp

To serve your app from localhost in Chrome, enter the following from the top of the package:

flutter run -d chrome

Note: If there aren’t any other connected devices, the -d chrome is optional.

The flutter run command launches the application using the development compiler in a Chrome browser.

Build

Run the following command to generate a release build:

flutter build web

A release build uses dart2js (instead of the development compiler) to produce a single JavaScript file main.dart.js. You can create a release build using release mode (flutter run –release) or by using flutter build web. This populates a build/web directory with built files, including an assets directory, which need to be served together.

For more information, see Build and release a web app.

Add web support to an existing app

To add web support to an existing project, run the following command in a terminal from the root project directory:

flutter create .

For more information and to develop mobile apps using Flutter, Hire Flutter Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”. To develop Mobile Apps using Flutter, please visit our technology page.

Content Source:

1. flutter.dev