Flutter系列的文章我會(huì)持續(xù)更新，如果覺得這里代碼排版不是很舒服的讀者可以關(guān)注我的微信公眾號(hào)“IT工匠”，我會(huì)同步更新，另外微信公眾號(hào)上還有很多互聯(lián)網(wǎng)必備資源（涉及算法、數(shù)據(jù)結(jié)構(gòu)、java、深度學(xué)習(xí)、計(jì)算機(jī)網(wǎng)絡(luò)、python、Android等互聯(lián)網(wǎng)技術(shù)資料），歡迎大家關(guān)注、交流。

眾所周知Google對(duì)于Flutter的期望是全平臺(tái)統(tǒng)一UI開發(fā)，號(hào)稱要做一套“一份代碼、全平臺(tái)部署”的UI框架，這一點(diǎn)在移動(dòng)端已經(jīng)很成熟了，國內(nèi)有很多成功的案例，典型的像阿里的閑魚客戶端，但是Flutter所聲稱的桌面端和Web端的相關(guān)案例還很少，之前我寫過一篇文章介紹如何將Flutter代碼部署成為桌面端程序，那么本文就該介紹如何將Flutter部署為Web應(yīng)用了。

本文將會(huì)以一個(gè)實(shí)例來帶大家一步一步探尋如何將Flutter應(yīng)用程序部署到web端，我們先來看一下最終的效果：

可以看到，就是一個(gè)簡單的登錄界面，沒有太復(fù)雜的邏輯，旨在幫助大家走通Flutter部署到Web端的流程，至于實(shí)際的應(yīng)用場(chǎng)景大家可以根據(jù)自己的需要自行開發(fā)。

開發(fā)環(huán)境配置

Flutter 1.5及更高的版本才支持Web端部署，這主要指的是將Dart編譯為JavaScript，所以，必須要確保我們本地的Flutter SDK的版本在v1.5.4以上，建議直接使用命令flutter upgrade更新到最新版即可。

安裝flutter_web編譯工具

要想將Flutter代碼編譯為Web端可部署的應(yīng)用程序，必須安裝flutter_web，這是一個(gè)Flutter官方為我們開發(fā)并維護(hù)的編譯工具，直接使用以下命令安裝即可：

flutter pub global activate webdev

安裝完成后，需要配置環(huán)境變量，直接將$HOME/.pub-cache/bin加入到你的環(huán)境變量中即可，由于電腦不同的操作系統(tǒng)配置環(huán)境變量的方式不同，這里就不一一展開贅述了，以mac操作系統(tǒng)為例：

cdvim .bash_profile

然后添加一行：

export PATH=\”$PATH\”:\”$HOME/Flutter/flutter/.pub-cache/bin\”

退出并保存，使用如下命令使其生效：

source .bash_profile

至此，我們的開發(fā)環(huán)境就搭建好了，可以看出，只要我們本地的Flutter環(huán)境配置的沒有問題，配置Flutter for web只是多裝了一個(gè)flutter_web編譯工具而已，非常簡單。

創(chuàng)建項(xiàng)目

區(qū)別于普通的Flutter項(xiàng)目，由于Flutter對(duì)web的支持目前還沒有完全完成，相當(dāng)于是一個(gè)供大家嘗鮮的作品，所以創(chuàng)建Flutter for web項(xiàng)目和普通Flutter項(xiàng)目不一樣，這里建議大家使用Idea，我這里也以idea為例進(jìn)行說明：

創(chuàng)建Dart項(xiàng)目，而不是Flutter項(xiàng)目

直接在Idea中新建項(xiàng)目，如下圖所示：

注意三點(diǎn)：

1. 選擇Dart項(xiàng)目，而不是新建Flutter項(xiàng)目
2. 正確設(shè)置自己dart sdk的位置
3. 選擇Generate sample content中的Flutter Web App選項(xiàng)

創(chuàng)建完成后我們的項(xiàng)目就默認(rèn)支持部署到Web了，在Idea中應(yīng)該可以直接點(diǎn)擊運(yùn)行按鈕進(jìn)行運(yùn)行，或者可以在Idea的終端中輸入：

wevdev serve

進(jìn)行運(yùn)行，初次編譯可能會(huì)下一些本項(xiàng)目所依賴的包，需要一分多鐘，后面編譯會(huì)快很多，編譯完成后會(huì)彈出一個(gè)瀏覽器的窗口（注意，這里建議使用Chrome瀏覽器，其他瀏覽器筆者沒有測(cè)試過，按照官方的說法，目前支持最好的應(yīng)該是Chrome瀏覽器）如下圖：

我們來看看項(xiàng)目結(jié)構(gòu)：

可以看到，大體的項(xiàng)目結(jié)構(gòu)了普通的Flutter項(xiàng)目差不多，知識(shí)多了一個(gè)web文件夾，下面是一些和web相關(guān)的文件和資源，后面我會(huì)具體講其用處。

編寫代碼

創(chuàng)建好項(xiàng)目之后，我們就可以著手代碼的編寫了，這里不再詳細(xì)敘述代碼怎么寫，和普通Flutter編寫代碼的規(guī)則是一模一樣的，這里我在lib文件夾下新建了一個(gè)pages文件夾，然后新建了login_page.dart文件，編寫登錄界面的代碼，完成后代碼如下：

import \’package:flutter_web/material.dart\’;class LoginPage extends StatefulWidget { @override State<StatefulWidget> createState() => new _LoginState();}class _LoginState extends State<LoginPage> { static final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>(); final TextEditingController _phoneController = new TextEditingController(); final TextEditingController _passwordController = new TextEditingController(); bool _correctPhone = true; bool _correctPassword = true; bool showProgress = false; void _checkInput() { if (_phoneController.text.isNotEmpty) { _correctPhone = true; } else { _correctPhone = false; } if (_passwordController.text.isNotEmpty) { _correctPassword = true; } else { _correctPassword = false; } setState(() {}); } _handleSubmitted(int flag) async { /** * flag=0:管理員登錄 * flag=1：用戶登錄 */ _checkInput(); if (!_correctPassword || !_correctPhone) { return; } } @override Widget build(BuildContext context) { return new Scaffold( key: _scaffoldKey, resizeToAvoidBottompadding: false, body: new Stack(children: <Widget>[ new Container( decoration: new BoxDecoration( image: new DecorationImage( image: new AssetImage(\’images/bg.jpeg\’), fit: BoxFit.cover)), ), new GestureDetector( onTap: () { FocusScope.of(context).requestFocus(new FocusNode()); }, ), _buildLogInWidgets(), ])); } _buildLogInWidgets() { Color mainColor = Colors.black; return new Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, //垂直方向?qū)ζ浞绞?crossAxisAlignment: CrossAxisAlignment.start, //水平方向?qū)ζ浞绞?children: <Widget>[ Center( child: new Container( child: Center( child: new CircleAvatar( backgroundImage: AssetImage(\”images/iron_man_icon.png\”)), ), ), ), new Center( child: new Container( width: MediaQuery.of(context).size.width * 0.5, child: new Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ new Container( padding: const EdgeInsets.only(top: 32.0), child: new TextField( style: TextStyle(color: Colors.black), cursorColor: mainColor, controller: _phoneController, keyboardType: TextInputType.text, decoration: new InputDecoration( hintText: \’用戶名\’, hintStyle: TextStyle(color: mainColor), errorText: _correctPhone ? null : \’用戶名不可為空！\’, errorStyle: TextStyle(color: Colors.teal), icon: new Icon(Icons.people, color: mainColor), focusedBorder: UnderlineInputBorder( borderSide: BorderSide(color: mainColor)), enabledBorder: UnderlineInputBorder( borderSide: BorderSide(color: mainColor)), errorBorder: UnderlineInputBorder( borderSide: BorderSide(color: mainColor)), ), onSubmitted: (value) { _checkInput(); }, ), ), new Container( padding: const EdgeInsets.only(top: 32.0), child: new TextField( style: TextStyle(color: Colors.black), cursorColor: mainColor, controller: _passwordController, obscureText: true, keyboardType: TextInputType.text, decoration: new InputDecoration( hintText: \’密碼\’, hintStyle: TextStyle(color: mainColor), errorText: _correctPassword ? null : \’密碼不可為空！\’, errorStyle: TextStyle(color: Colors.teal), icon: new Icon(Icons.lock_outline, color: mainColor), focusedBorder: UnderlineInputBorder( borderSide: BorderSide(color: mainColor)), enabledBorder: UnderlineInputBorder( borderSide: BorderSide(color: mainColor)), errorBorder: UnderlineInputBorder( borderSide: BorderSide(color: mainColor)), ), onSubmitted: (value) { _checkInput(); }, ), ) ]), ), ), new Center( child: new Column( children: <Widget>[ new Container( width: MediaQuery.of(context).size.width * 0.2, child: new Material( child: new FlatButton( child: new Container( child: new Center( child: new Text( \”登錄\”, textScaleFactor: 1.5, style: new TextStyle( color: Colors.white, fontFamily: \”Roboto\”), )), ), onPressed: () { _handleSubmitted(0); }, ), color: Colors.teal, borderRadius: BorderRadius.circular(10.0), elevation: 5.0, ), ), new Center( child: Container( margin: EdgeInsets.only(top: 20), child: new FlatButton( child: new Text(\”沒有帳戶？ 注冊(cè)\”, style: new TextStyle(color: Colors.teal)), ), )), ], )), ], ); }}

可以看到，代碼和普通Flutter代碼是一樣的，只是需要注意以下幾點(diǎn)：

包的使用

細(xì)心的同學(xué)可能會(huì)發(fā)現(xiàn)，我們這里導(dǎo)入的包是：

import \’package:flutter_web/material.dart\’;

而普通Flutter項(xiàng)目導(dǎo)入的是：

import \’package:flutter/material.dart\’;

原則就是原來的 package:flutter 改為 package:flutter_web ，原來的 dart:ui 改為 package:flutter_web_ui/ui.dart，當(dāng)然，這些你只需要知道就好了，實(shí)際生產(chǎn)的時(shí)候直接快捷鍵按下，編輯器會(huì)自動(dòng)幫我們導(dǎo)入正確的包。

資源的使用

我們之前使用資源文件(比如圖片)的方式是在根目錄下新建一個(gè)資源文件夾，然后將資源文件放在資源文件夾下，然后在pubspec.yaml文件中進(jìn)行文件路徑的聲明，然后就可以使用了，在Flutter for web中，我們需要將原來的資源文件夾從之前的項(xiàng)目根目錄遷移到web文件夾下，就像這樣：

然后就可以正常使用了，這也是迄今為止我發(fā)現(xiàn)的Flutter for web和普通Flutter項(xiàng)目的不同之處了。

編寫完布局文件后我們將main.dart稍作修改，引入我們的LoginPage：

import \’package:flutter_web/material.dart\’;import \’package:flutter_web_demo/pages/login_page.dart\’;void main() => runApp(MyApp());class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: \’Flutter Demo\’, theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: \’Flutter Demo Home Page22\’), ); }}class MyHomePage extends StatelessWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override Widget build(BuildContext context) { return Scaffold( body: LoginPage()); }}

然后我們就可以運(yùn)行起來看效果了：

和開篇的效果圖一樣，不再贅述。

總結(jié)

本文我們通過一個(gè)簡單的實(shí)例帶大家走了一遍Flutter在web端部署的流程，可以看到，目前Flutter在Web上的部署已經(jīng)沒有任何壓力了，只是由于生態(tài)還不完整，很多庫和包還不能用，所以目前還無法投入商用軟件中，希望Flutter可以發(fā)展的越來越完善。同時(shí)，結(jié)合筆者個(gè)人的開發(fā)經(jīng)驗(yàn)，建議大家開發(fā)Flutter項(xiàng)目時(shí)一定不要怕麻煩，多用像mvp這類的項(xiàng)目結(jié)構(gòu)，這樣可以大大提高開發(fā)效率。

關(guān)于Flutter for web的更多資料，可以參考Flutter官方的倉庫：https://github.com/flutter/flutter_web。