Flutter web environment variable to build and develop

Use flutter develop app for three months, there is some behavior that inertia, and take a lot of time in the pit building flutter web environment variable, share it, lest other small partners go again.

 

To use the first version of the flutter of 1.5 and above

dart to use 2.3.0 or later.

 

Installation webdev, webdev is to start using the local server

flutter pub global activate webdev

Then configure the environment variables

export PATH="$PATH":"$HOME/flutter/.pub-cache/bin"

/ ************* under section explains how to configure the environment variable ************* /

1) Open the terminal input

sudo vim .bash_profile

Preceded by sudo is to prevent not have permission to modify the file .bash_profile

If the file has permissions, you need to enter a password, and then appear as shown in the figure below, enter E, to enter edit mode

​

.Bash_profile file into the input i, began to edit, add

export PATH="$PATH":"$HOME/flutter/.pub-cache/bin"

, Press Esc, then English colon ":", type wq, save and exit

Finally input terminal

source .bash_profile

Updated environment variables

/ ************* upper section discusses how to configure the environment variable ************* /

 

clone Git  flutter_web code

Executed in the specified folder

git clone ​​​​​​​https://github.com/flutter/flutter_web.git

Open examples / hello_world

cd examples/hello_world/

Update package

Entry

flutter pub upgrade

After the emergence of the following content is updated successfully

$ flutter pub upgrade
! flutter_web 0.0.0 from path ../../flutter_web
! flutter_web_ui 0.0.0 from path ../../flutter_web_ui
Running "flutter pub upgrade" in hello_world...                5.0s

carried out

webdev serve

After the emergence of the following content represents the local server starts successfully

[INFO] Generating build script completed, took 331ms
...
[INFO] Building new asset graph completed, took 1.4s
...
[INFO] Running build completed, took 27.9s
...
[INFO] Succeeded after 28.1s with 618 outputs (3233 actions)
Serving `web` on http://localhost:8080

Enter chrome browser http: // localhost: 8080

We can see the effect

 

 

Of course, you can create a flutter web project using AS or VS code.

To VS code, for example

First, open the VS code

Select View top status bar -> Command Palette ...

The figure below, enter flutter appears, select Flutter: New Web Project, edit a file name and saved in the specified folder

​

Emergence of web folders, and web folders have index.html, is created to prove successful,

​

Finally, use the above method to run the project can be.

 

I wish you success flutter junior partner to learn, gain a lot.