一、關(guān)于Flutter

Flutter是谷歌的移動(dòng)UI框架，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面。 Flutter可以與現(xiàn)有的代碼一起工作。在全世界，Flutter正在被越來(lái)越多的開(kāi)發(fā)者和組織使用，并且Flutter是完全免費(fèi)、開(kāi)源的。

https://flutterchina.club/

設(shè)置服務(wù)器鏡像：

# mac linux export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

?

# windows set 為臨時(shí)設(shè)置，sets 為永久設(shè)置，/m 為設(shè)置系統(tǒng)環(huán)境變量 setx PUB_HOSTED_URL https://pub.flutter-io.cn /m setx FLUTTER_STORAGE_BASE_URL https://storage.flutter-io.cn /m

?

二、安裝Flutter SDK

以下以win10為例

1、Git 安裝

工具：Git、Vs Code，如果開(kāi)發(fā)android 應(yīng)用需要安裝Android SDK。

https://github.com/flutter/flutter

git clone?https://github.com/flutter/flutter.git

2、離線安裝：

https://github.com/flutter/flutter/releases

https://flutter.dev/docs/get-started/install

下載完后解壓到某個(gè)目錄，比如D:\Flutter\，然后將 flutter添加到系統(tǒng)環(huán)境變量

setx "Path" "D:\flutter\bin;%path%" /m

運(yùn)行 flutter doctor 檢測(cè)配置是否成功

將 D:\flutter\.pub-cache\bin 和 D:\flutter\bin\cache\dart-sdk\bin 添加到系統(tǒng)環(huán)境變量

setx "Path" "D:\flutter\.pub-cache\bin;%path%" /m setx "Path" "D:\flutter\bin\cache\dart-sdk\bin;%path%" /m

?

# 查看flutter版本 $ flutter --version Flutter 1.9.1+hotfix.6 ? channel stable ? https://github.com/flutter/flutter.git Framework ? revision 68587a0916 (2 months ago) ? 2019-09-13 19:46:58 -0700 Engine ? revision b863200c37 Tools ? Dart 2.5.0

?

# 查看dart版本 $ dart --version Dart VM version: 2.5.0 (Fri Sep 6 20:10:36 2019 +0200) on "windows_x64"

?

3、在VS Code 擴(kuò)展里搜索flutter 進(jìn)行安裝，同時(shí)會(huì)自動(dòng)安裝dart。

?

?

?

4、搭建Web App開(kāi)發(fā)環(huán)境

將 C:\Users\guoguo\AppData\Roaming\Pub\Cache\bin 添加到系統(tǒng)環(huán)境變量

（Pub是Dart的包管理工具，類似npm，捆綁安裝。）

$ setx "Path" "C:\Users\guoguo\AppData\Roaming\Pub\Cache\bin;%path%" /m

開(kāi)啟flutter?web

$ flutter config --enable-web

安裝 webdev

$ pub global activate webdev

?

安裝 stagehand

$ pub global activate stagehand

?

創(chuàng)建web應(yīng)用

# 在項(xiàng)目工程目錄（空）運(yùn)行，或者用Vs Code打開(kāi)工程目錄，在 TERMINAL 運(yùn)行$ stagehand web-simple …… --> to provision required packages, run 'pub get'

執(zhí)行命令行'pub get'，加載所有依賴包

$ pub get

?

自動(dòng)生成的應(yīng)用目錄結(jié)構(gòu)

運(yùn)行web服務(wù)

$ webdev serve

用瀏覽器打開(kāi)信息提示的應(yīng)用地址： http://127.0.0.1:8080/ 預(yù)覽

打包命令

webdev build

?

總結(jié)

以上是生活随笔為你收集整理的VS Code 集成 flutter dart 开发的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。