前言：Flutter系列的文章我應(yīng)該會持續(xù)更新，從User Interface(UI)到數(shù)據(jù)相關(guān)（文件、數(shù)據(jù)庫、網(wǎng)絡(luò)）再到Flutter進(jìn)階（平臺特定代碼編寫、測試、插件開發(fā)等），歡迎感興趣的讀者持續(xù)關(guān)注(可以掃描左邊欄二維碼或者搜索”IT工匠“關(guān)注微信公眾號/頭條號（微信公眾號和頭條號同名），會同步推送)。

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

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

可以看到，就是一個簡單的登錄界面，沒有太復(fù)雜的邏輯，旨在幫助大家走通Flutter部署到Web端的流程，至于實(shí)際的應(yī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，這是一個Flutter官方為我們開發(fā)并維護(hù)的編譯工具，直接使用以下命令安裝即可：

flutter pub global activate webdev

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

cd
vim .bash_profile

然后添加一行：

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

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

source .bash_profile

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

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

區(qū)別于普通的Flutter項(xiàng)目，由于Flutter對web的支持目前還沒有完全完成，相當(dāng)于是一個供大家嘗鮮的作品，所以創(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的終端中輸入：

webdev serve

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

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

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

編寫代碼

創(chuàng)建好項(xiàng)目之后，我們就可以著手代碼的編寫了，這里不再詳細(xì)敘述代碼怎么寫，和普通Flutter編寫代碼的規(guī)則是一模一樣的，這里我在lib文件夾下新建了一個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(
            alt="image-20190621203620933" />
 
然后就可以正常使用了，這也是迄今為止我發(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é)
 
本文我們通過一個簡單的實(shí)例帶大家走了一遍Flutter在web端部署的流程，可以看到，目前Flutter在Web上的部署已經(jīng)沒有任何壓力了，只是由于生態(tài)還不完整，很多庫和包還不能用，所以目前還無法投入商用軟件中，希望Flutter可以發(fā)展的越來越完善。同時，結(jié)合筆者個人的開發(fā)經(jīng)驗(yàn)，建議大家開發(fā)Flutter項(xiàng)目時一定不要怕麻煩，多用像mvp這類的項(xiàng)目結(jié)構(gòu)，這樣可以大大提高開發(fā)效率。
 
關(guān)于Flutter for web的更多資料，可以參考Flutter官方的倉庫：https://github.com/flutter/flutter_web。