版權聲明：本文為博主原創文章，未經博主允許不得轉載。http://www.lxweimin.com/p/2893f2b52eee
轉載請標明出處：http://www.lxweimin.com/p/2893f2b52eee
本文出自 AWeiLoveAndroid的博客
Flutter系列博文鏈接 ↓：
工具安裝：
Flutter基礎篇：
- 谷歌Flutter1.0正式版發布
- Flutter基礎篇（1）-- 跨平臺開發框架和工具集錦
- Flutter基礎篇（2）-- 老司機用一篇博客帶你快速熟悉Dart語法
- Flutter基礎篇（3）-- Flutter基礎全面詳解
- Flutter基礎篇（4）-- Flutter填坑全面總結
- Flutter基礎篇（5）-- Flutter代碼模板，解放雙手，提高開發效率必備
- Flutter基礎篇（6）-- 水平和垂直布局詳解
- Flutter基礎篇（7）-- Flutter更新錯誤全面解決方案(圖文+視頻講解)
- Flutter基礎篇（8）-- Flutter for Web詳細介紹
- Flutter基礎篇（9）-- 手把手教你用Flutter實現Web頁面編寫
- Flutter1.9升級體驗總結（Flutter Web 1.9最新版本填坑指南）
Flutter進階篇：
Dart語法系列博文鏈接 ↓：
Dart語法基礎篇：
Dart語法進階篇：
前面一篇文章介紹了
Flutter for Web，這里就詳細的講解一下如何使用Flutter實現Web頁面的編寫。讓大家10分鐘之內快熟上手實踐。
如果不想看文章，也可以看我的視頻講解：手把手教你用Flutter實現Web頁面編寫
一、環境要求
（1）Flutter 版本最低要求1.5.4（使用
flutter doctor -v查看Flutter版本，如果版本太低，請使用flutter upgrade升級到最新版本）。關于Flutter的詳細安裝，請查看我的博客 Flutter從配置安裝到填坑指南詳解（2）安裝webdev工具
使用命令行進行安裝 flutter packages pub global activate webdev， 如果安裝不了，請科學上網再試試看。
webdev命令會下載以下這些包：
args 1.5.1
async 2.2.0
browser_launcher 0.1.2
build_daemon 0.6.0
built_collection 4.2.1
built_value 6.5.0
charcode 1.1.2
codemirror 0.5.4+5.45.0
collection 1.14.11
convert 2.1.1
crypto 2.0.6
devtools 0.0.19 (0.1.0 available)
devtools_server 0.1.2
dwds 0.3.2
fixnum 0.10.9
http 0.12.0+2
http_multi_server 2.0.6
http_parser 3.1.3
intl 0.15.8
io 0.3.3
js 0.6.1+1
json_annotation 2.3.0
logging 0.11.3+2
matcher 0.12.5
meta 1.1.7
mime 0.9.6+2
octicons_css 0.0.1
package_config 1.0.5
package_resolver 1.0.10
path 1.6.2
pedantic 1.7.0
platform_detect 1.3.5
plotly_js 0.0.1
polymer_css 0.0.1
pool 1.4.0
primer_css 0.0.2
pub_semver 1.4.2
pubspec_parse 0.1.4
quiver 2.0.3
rxdart 0.21.0 (0.22.0 available)
shelf 0.7.5
shelf_proxy 0.1.0+6
shelf_static 0.2.8
shelf_web_socket 0.2.3
source_maps 0.10.8
source_span 1.5.5
split 0.0.2
sse 2.0.2
stack_trace 1.9.3
stream_channel 2.0.0
stream_transform 0.0.19
string_scanner 1.0.4
term_glyph 1.1.0
typed_data 1.1.6
uuid 2.0.1
vm_service_lib 3.15.1+1 (3.15.1+2 available)
watcher 0.9.7+10
web_socket_channel 1.0.12
webdev 2.0.4
webkit_inspection_protocol 0.4.0
yaml 2.1.15
如果出錯，提示讓你安裝stagehand，請輸入命令： flutter packages pub global activate stagehand
Stagehand命令會下載以下這些包：
args 1.5.1
async 2.2.0
charcode 1.1.2
collection 1.14.11
http 0.12.0+2
http_parser 3.1.3
meta 1.1.7
path 1.6.2
pedantic 1.7.0
source_span 1.5.5
stagehand 3.3.0
string_scanner 1.0.4
term_glyph 1.1.0
typed_data 1.1.6
usage 3.4.1
二、運行官方hello_world示例代碼
（1）下載flutter_web源碼
打開git客戶端，輸入 git clone https://github.com/flutter/flutter_web.git，或者在其它git下載工具中輸入git目錄。
（2）使用命令行進入examples/hello_world/目錄。
例如存放路徑在F:/flutter_web，命令行輸入cd F:/flutter_web/examples/hello_world/即可。
（3）安裝webdev和stagehand
使用命令行進行安裝 flutter packages pub global activate webdev， 如果安裝不了，請科學上網再試試看。
使用命令行進行安裝stagehand，請輸入命令： flutter packages pub global activate stagehand
【注意】如果直接輸入這兩下命令行會出錯，錯誤提示如下（必須創建Flutter web項目之后，然后打開命令行才有效）：
Error: No pubspec.yaml file found.
This command should be run from the root of your Flutter project.
Do not run this command from the root of your git clone of Flutter.
（4）在本地構建并運行示例代碼
使用命令webdev serve，然后等待構建完成，第一次運行會比較慢，打開Chrome瀏覽器，輸入http://localhost:8080，回車即可。
運行結果如下圖所示：
（5）如果某些包出現錯誤，請在命令行輸入flutter packages upgrade來更新一些依賴的包。
三、修改hello world，嘗試動手寫一個小功能
這里我們做一個路由跳轉，以及寫一個Dialog的功能。下面看看我們的示例代碼如下：
（1）修改examples/hello_world/lib/main.dart代碼如下所示：
import 'package:flutter_web/material.dart';
void main() {
runApp(new MaterialApp(
title: 'Flutter for Web使用',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new DialogWidgetsDemo(),
));
}
class DialogWidgetsDemo extends StatefulWidget {
@override
_DialogWidgetsDemoState createState() => _DialogWidgetsDemoState();
}
class _DialogWidgetsDemoState extends State<DialogWidgetsDemo> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
centerTitle: true,
title: new Text('各種彈窗&提示控件用法'),
),
body:
new RaisedButton(
child: buildButton('SimpleDialog的使用'),
onPressed: (){
showDialogs(context);
},
),
);
}
Widget buildButton(var text) {
return new Text(
text,
style: new TextStyle(
color: Colors.blueAccent,
fontSize: 16.0,
),
);
}
void showDialogs(BuildContext context){
showDialog<Null>(
context: context,
builder: (BuildContext context){
return new SimpleDialog(
// 標題內容
title: new Text('SimpleDialog示例1'),
// children里面是dialog的內容 可以自定義
children: <Widget>[
buildButton('item1'),
buildButton('item2'),
buildButton('item3'),
buildButton('item4'),
buildButton('item5'),
],
);
}
);
}
}
（2）然后命令行運行webdev serve，我們看看運行結果如下圖所示：
點擊之前的截圖如下：
點擊按鈕之后：
其實我們直接把main.dart放到Flutter工程里面也是可以直接運行在手機上面的。
四、引入flutter_web庫到我們項目中
前面我們是以flutter_web的示例代碼為例講解，實際開發中我們不可能把整個項目下載下來去做修改，我們需要引入這個庫。最方便的方式是使用git方式引入，需要在項目的pubspec.yaml中作如下修改：
environment:
sdk: '>=2.2.0 <3.0.0'
dependencies:
flutter_web: any
flutter_web_ui: any
dev_dependencies:
# Enables the `pub run build_runner` command
build_runner: ^1.4.0
# Includes the JavaScript compilers
build_web_compilers: ^2.0.0
# flutter_web packages are not published to pub.dartlang.org
# These overrides tell the package tools to get them from GitHub
dependency_overrides:
flutter_web:
git:
url: https://github.com/flutter/flutter_web
path: packages/flutter_web
flutter_web_ui:
git:
url: https://github.com/flutter/flutter_web
path: packages/flutter_web_ui
五、使用開發工具創建Flutter Web項目
（1）VSCode
Visual Studio Code支持使用
- 安裝 Flutter v3.0以上擴展包 進行Flutter Web開發。（VSCode如果版本太低，建議升級VSCode）
- Ctrl+Shift+P打開命名窗口，輸入
Flutter，選擇Flutter: New Web Project創建項目，然后選擇項目創建的路徑即可自動生成項目。
輸入項目名稱：
【注意】如果你未按照上文中的命令安裝Stagehand，這時候可能會提示Stagehand未安裝，點擊Activate Stagehand即可。
- 然后會自動執行
pub get命令，下載所需要的包，如下圖所示：
- 所有依賴包如下所示：
analyzer 0.36.3
archive 2.0.8
args 1.5.1
async 2.2.0
bazel_worker 0.1.20
build 1.1.4
build_config 0.4.0
build_daemon 0.6.0
build_modules 2.1.2
build_resolvers 1.0.4
build_runner 1.4.0
build_runner_core 3.0.5
build_web_compilers 2.0.0
built_collection 4.2.1
built_value 6.5.0
charcode 1.1.2
code_builder 3.2.0
collection 1.14.11
convert 2.1.1
crypto 2.0.6
csslib 0.16.0
dart_style 1.2.7
fixnum 0.10.9
front_end 0.1.18
glob 1.1.7
graphs 0.2.0
html 0.14.0+2
http 0.12.0+2
http_multi_server 2.0.6
http_parser 3.1.3
intl 0.15.8
io 0.3.3
js 0.6.1+1
json_annotation 2.3.0
kernel 0.3.18
logging 0.11.3+2
matcher 0.12.5
meta 1.1.7
mime 0.9.6+2
package_config 1.0.5
package_resolver 1.0.10
path 1.6.2
pedantic 1.7.0
pool 1.4.0
protobuf 0.13.11
pub_semver 1.4.2
pubspec_parse 0.1.4
quiver 2.0.3
scratch_space 0.0.3+2
shelf 0.7.5
shelf_web_socket 0.2.3
source_maps 0.10.8
source_span 1.5.5
stack_trace 1.9.3
stream_channel 2.0.0
stream_transform 0.0.19
string_scanner 1.0.4
term_glyph 1.1.0
timing 0.1.1+1
typed_data 1.1.6
vector_math 2.0.8
watcher 0.9.7+10
web_socket_channel 1.0.12
yaml 2.1.15
- 項目結構如下圖所示：
- 打開Terminal
輸入webdev serve命令行工具來構建和運行您的應用程序，然后在Chrome瀏覽器輸入localhost:8080回車即可看到示例代碼運行的結果，如下圖所示：
- 如果需要調試項目，按F5或
Debug - > Start Debugging運行應用程序。
（2）IntelliJ或Android Studio
安裝 IntelliJ或Android Studio的Flutter和Dart插件。
IntelliJ中創建Flutter web項目：
Create New Project-->Dart-->Flutter Web App-->Next即可。如下圖所示：
Android Studio中創建Flutter web項目：創建一個新的Dart項目，請注意，對于
Flutter for Web應用程序,選擇Dart project。從Dart project中，選擇應用程序模板的Flutter for web選項。創建項目，
pub get將自動運行。創建項目后，點擊
run主工具欄上的按鈕。IntelliJ將使用
webdev命令行工具來構建和運行您的應用程序; 應該會打開一個新的Chrome窗口，顯示正在運行的應用。
六、熱重載和構建編譯
（1）webdev獲取（無狀態）熱重載
要webdev與熱重載一起使用，請在項目目錄中運行以下命令：
webdev serve --auto restart
【注】無狀態的熱重載，意味著重新加載時應用程序狀態將丟失，如果發現意外行為，則可能需要手動刷新頁面。目前官方正在研究有狀態的熱重載解決方案。
（2）輸出靜態文件
使用以下命令：
webdev build
這將創建一個build目錄index.html，main.dart.js以及使用靜態HTTP服務器運行應用程序所需的其余文件。
要優化輸出JavaScript，可以使用build.yaml項目根目錄中的文件啟用優化標志 ，其中包含以下內容：
# See https://github.com/dart-lang/build/tree/master/build_web_compilers#configuration
targets:
$default:
builders:
build_web_compilers|entrypoint:
generate_for:
- web/**.dart
options:
dart2js_args:
- --no-source-maps
- -O4
（3）開發環境版本發布命令行
要啟用發布編譯命令行，請傳入--release或-r。
webdev serve -r
或者
webdev serve --release
七、移動項目向Web項目的遷移
如果您正在使用Git，我們建議您暫時在你的項目存儲庫中創建Web的分支，便于管理。
（1）修改pubspec.yaml
dependencies:
## 替換成 flutter_web
#flutter:
# sdk: flutter
flutter_web: any
dev_dependencies:
## 替換成 flutter_web_test
#flutter_test:
# sdk: flutter
flutter_web_test: any
## 新增Dart web 構建環境
build_runner: ^1.2.2
build_web_compilers: ^1.1.0
test: ^1.3.4
## For the preview, assets are handled differently. Remove or comment
## out this section. See `Assets` below for more details
# flutter:
# uses-material-design: true
# assets:
# - asset/
#
# fonts:
# - family: Plaster
# fonts:
# - asset: asset/fonts/plaster/Plaster-Regular.ttf
## 從Git上引用flutter_web包
dependency_overrides:
flutter_web:
git:
url: https://github.com/flutter/flutter_web
path: packages/flutter_web
flutter_web_ui:
git:
url: https://github.com/flutter/flutter_web
path: packages/flutter_web_ui
（2）lib目錄
- 把項目中所有的
package:flutter包換成package:flutter_web包。
- 把項目中所有的
- 2.把項目中所有的
dart:ui包換成package:flutter_ui/ui.dart包。
（3）web目錄
目前預覽版來說，需要創建web/index.html和web/main.dart這兩個文件夾。這為您的應用程序提供了一個入口點。通常，您復制粘貼下面的文件即可。
- 1.web/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script defer src="main.dart.js" type="application/javascript"></script>
</head>
<body>
</body>
</html>
- 2.web/main.dart
import 'package:flutter_web_ui/ui.dart' as ui;
// TODO: change `my_app` to refer to your app package name.
import 'package:my_app/main.dart' as app;
main() async {
await ui.webOnlyInitializePlatform();
app.main();
}
- 3.web/assets (可選)
如果應用程序具有assets資產（字體、json文件、音頻、圖片等），則它們必須位于web/assets目錄中。您可能還需要更新源代碼中引用這些資產的路徑。
- 4.web/assets/FontManifest.json (可選)
如果應用程序具有自定義字體，則需要將其包含在此文件中。
示例如下：
[
{
"family": "Raleway",
"fonts": [
{
"asset": "fonts/Raleway-Regular.ttf"
},
{
"asset": "fonts/Raleway-Italic.ttf",
"style": "italic"
}
]
},
{
"family": "RobotoMono",
"fonts": [
{
"asset": "fonts/RobotoMono-Regular.ttf"
},
{
"asset": "fonts/RobotoMono-Bold.ttf",
"weight": 700
}
]
}
]
【聲明】本文首發于我的公眾號Flutter那些事，未經授權嚴禁轉載！
