Without further ado, Flutter has been supporting the Web for some time. Recently, I decided to adopt Flutter Web, which is still in beta, for development because the company has web requirements. As an iOS employee, I am not as familiar with Web as Flutter, and the requirements of the company may not be used in production environment.

Environment configuration

1. Install the Flutter environment

Flutterchina. Club/get – started…

I won’t repeat it here.

2. Create a new web-enabled project

Currently, the master or dev channel’s Flutter SDK is required to obtain Web support: we assume that you have already installed the Flutter command line tool. To run the following commands, you need to install the latest Flutter SDK for the master channel: You can create a new web-enabled project by following these steps.

  • Tips: This is mostly done on Git and can be very slow. Here are some ways to do it. This is from this guy

Git’s slow workaround (probably useful)

$sudo vi /private/etc/hosts After opening it, you can enter the editor, move the last line, press the "O" key on the keyboard, jump to the next line of input state. So you can start editing the hosts file copy and paste below into the hosts can 151.101.76.249 github.global.ssl.fastly.net 192.30.253.112 github.com editor good hosts file, Press "Esc" and enter ":wq" to save the configuration automatically and end the editor.Copy the code

2.1 Use the Flutter SDK in the latest Beta channel and enable Web support

$ flutter channel beta
$ flutter upgrade
$ flutter config --enable-web
$ flutter devices
Copy the code

The process can be very slow. The process is roughly shown below

flutter channel beta

Switching to a new branch represents the first successful flutter upgrade step

flutter config –enable-web

flutter devices

When you see Chrome, it means you’re ready to go.

New project

After a day of searching information, found online can find information, can be said to be strange.

Some use VSCode to execute Flutter:New Web Project

Some create a Flutter project with Android Studio and then connect manually. This way seems very special to me, but it feels very complicated.

Some even took flutter_web, which had been moved away.

It really made me sick.

Finally, I found the right posture through the magic way of surfing the Internet, which did not need to be so complicated (the above situations, I think are caused by frequent updates).

Follow me step by step.

$ cdThe directory where you want to put the project $flutter create project name $cdProject name $flutter Run-d chrome
Copy the code

At this point, Chrome will automatically open and you will automatically visit http://localhost:60700/#/

Although there are a lot of comments on the web that only support Chrome, I copied the address to Safari and it worked fine for now.

Chrome

Safari

If anything, Safari may be relatively slow to load (just getting started, after all).