In this Flutter for Web Tutorial i will be taking you through the process of creating Responsive Websites using Flutter. Flutter for Web (Flutter Hummingbird) is a code-compatible implementation of Flutter that is rendered using standards-based web technologies: HTML, CSS and JavaScript. With Flutter for Web, 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 for any of it.

We will be aiming to create a Responsive Flutter Webpage that could reformat its content based on the Target Device.

Building a web application with Flutter

Here are the short and sweet instructions to get started. To add support to an existing project and assuming that you have the flutter tool installed, run the following commands in a terminal from the top of the project package:

flutter channel dev
 flutter upgrade
 flutter config --enable-web
 cd <into project directory>
 flutter create .
 flutter run -d chrome

To generate a release build:

flutter build web

The rest of this page breaks this process down into individual steps.

Download the Flutter SDK

Currently, you need either the master or dev channel of the Flutter SDK for web support. Assuming that you already have the flutter tool installed, run the following commands to install the latest version from dev:

flutter channel dev
flutter upgrade

The flutter upgrade command silently fails when “origin” points to a personal fork. To validate that “origin” points to the “flutter/flutter” repo, enter the following:

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

Enable web support

Use the config command to enable web support:

flutter config --enable-web

You need only run this once. This command modifies (or creates) the ~/.flutter_settings file (on Mac/Linux) with the following:

{
  "enable-web": true
}

Once web is enabled, flutter devices outputs a device named Chrome.

flutter devices

1 connected device:

Chrome • chrome • web-javascript • Google Chrome 76.0.3809.100

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

The flutter run command launches the application using the development compiler in a Chrome browser.
The name of the web device is currently chrome, but this doesn’t need to be specified if there are no other devices attached.

Add web support to an existing app

To add web support to an existing project, run the following command in a terminal from the top of the project package:

flutter create .

Create a new app with web support

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

flutter create myapp

Run the web app

To run the app on the web, enter the following from the top of the package:

flutter run -d chrome

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

Generate a release build

Run the following, from the top of the project:

flutter build web

A release build uses dart2js instead of the development compiler to produce a single JavaScript file. This can be run with the release flag or built using flutter build web. This outputs files at build/web, including the assets, which need to be served together.

View and download Source Code

Happy Coding!

#flutter #responsive