Shulou(Shulou.com)06/01 Report--

Flutter for Web development environment building and verification is how, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain for you in detail, people with this need can come to learn, I hope you can gain something.

The latest Flutter 1.5.4 already supports Web development. This tutorial will show you how to install the Flutter web development environment under Linux, windows, and Mac: install Flutter SDK and Flutter Web build tools, and use Flutter Web demo code to verify the success of the development environment.

1. Install Flutter SDK

First install the latest version of Flutter SDK, which currently supports Linux, Windows, and MacOS.

Installation of Flutter SDK under Linux

First download the latest Flutter SDK 1.5.4 for Linux.

Then extract it to the specified directory, such as ~ / hubwiz:

~ $cd ~ / hubwiz~/hubwiz$ tar xf ~ / downloads/flutter_linux_v1.5.4-hotfix.2-stable.tar.xz

Next, add the flutter sdk, dart sdk, and webhubwiz executable directories to the PATH environment variable:

~ / hubwiz$ export PATH=$PATH:$HOME/hubwiz/flutter/bin~/hubwiz$ export PATH=$PATH:$HOME/hubwiz/flutter/bin/cache/dart-sdk/bin~/hubwiz$ export PATH=$PATH:$HOME/hubwiz/flutter/.pub-cache/bin

Notice that flutter sdk has built-in dart sdk, and the second command above is to add the executable of dart-sdk to the PATH environment variable. The build kit webdev for Flutter Web development is under the .pub-cache/bin directory. Let's add this path first and install it later.

Installation of Flutter SDK under windows

First download the latest Flutter SDK 1.5.4 for Windows

Then extract it to the specified directory, such as c:\ hubwiz.

Double-click the flutter_console.bat file in the flutter directory to enter the Flutter SDK console environment. You can also add the path to the Flutter SDK execution file to the Path environment variable, such as c:\ hubwiz\ flutter\ bin.

Installation of Flutter SDK under MacOS

First download the latest Flutter SDK 1.5.4 for MacOS.

Then extract it to the specified directory, such as ~ / hubwiz:

~ $cd ~ / hubwiz~/hubwiz$ tar xf ~ / downloads/flutter_linux_v1.5.4-hotfix.2-stable.tar.xz

Next, add the flutter sdk, dart sdk, and webdev executable directories to the PATH environment variable:

~ / hubwiz$ export PATH=$PATH:$HOME/hubwiz/flutter/bin~/hubwiz$ export PATH=$PATH:$HOME/hubwiz/flutter/bin/cache/dart-sdk/bin~/hubwiz$ export PATH=$PATH:$HOME/hubwiz/flutter/.pub-cache/bin2, clone Flutter Web code repository

Currently, Flutter Web is used as a separate branch preview, and we cloned it locally:

~ / hubwiz$ git clone https://github.com/flutter/flutter_web.git

The hubwiz directory is now organized as follows:

~ / hubwiz |-flutter |-flutter_web3, install the Flutter Web build tool

Execute the following command to install the webdev package, which provides the build toolset for Flutter Web development:

~ / hubwiz$ flutter pub global activate webdev4, verify the installation of Flutter Web development environment

Let's enter the ~ / hubwiz/flutter_web/examples/hello_world directory to verify whether the Flutter Web development environment has been built successfully:

~ $cd ~ / hubwiz/flutter_web/examples/hello_world

Then install the project dependency package:

~ / hubwiz/flutter_web/examples/hello_world$ flutter packages upgrade

You can now start the development server using webdev:

~ / hubwiz/flutter_web/examples/hello_world$ webdev serve

Now open http://localhost:8080 using a browser, and you can see the Hello,world on the page! Yes.

By default, the webdev serve command only listens on local port 8080. If you need to access web services from other machines, you can use the-- hostname parameter to bind all network interfaces:? >

~ / hubwiz/flutter_web/examples/hello_world$ webdev serve-- hostname 0.0.0.0 is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.