前言：Flutter系列的(de)文章我應該會持續更新，從User Interface(UI)到(dào)數據相關（文件、數據庫、網絡）再到(dào)Flutter進階（平台特定代碼編寫、測試、插件開發等），歡迎感興趣的(de)讀者持續關注(可以(yǐ)掃描左邊欄二維碼或者搜索”IT工匠“關注微信公衆号/頭條号（微信公衆号和(hé / huò)頭條号同名），會同步推送)。

衆所周知Google對于(yú)Flutter的(de)期望是(shì)全平台統一UI開發，号稱要(yào / yāo)做一套**“一份代碼、全平台部署”**的(de)UI框架，這(zhè)一點在(zài)移動端已經很成熟了(le／liǎo)，國(guó)内有很多成功的(de)案例，典型的(de)像阿裏的(de)閑魚客戶端，但是(shì)Flutter所聲稱的(de)桌面端和(hé / huò)Web端的(de)相關案例還很少，之(zhī)前我寫過一篇文章介紹如何将Flutter代碼部署成爲(wéi / wèi)桌面端程序，那麽本文就(jiù)該介紹如何将Flutter部署爲(wéi / wèi)Web應用了(le／liǎo)。

本文将會以(yǐ)一個(gè)實例來(lái)帶大(dà)家一步一步探尋如何将Flutter應用程序部署到(dào)web端，我們先來(lái)看一下最終的(de)效果：

可以(yǐ)看到(dào)，就(jiù)是(shì)一個(gè)簡單的(de)登錄界面，沒有太複雜的(de)邏輯，旨在(zài)幫助大(dà)家走通Flutter部署到(dào)Web端的(de)流程，至于(yú)實際的(de)應用場景大(dà)家可以(yǐ)根據自己的(de)需要(yào / yāo)自行開發。

開發環境配置

Flutter 1.5及更高的(de)版本才支持Web端部署，這(zhè)主要(yào / yāo)指的(de)是(shì)将Dart編譯爲(wéi / wèi)JavaScript，所以(yǐ)，必須要(yào / yāo)确保我們本地(dì / de)的(de)Flutter SDK的(de)版本在(zài)v1.5.4以(yǐ)上(shàng)，建議直接使用命令flutter upgrade更新到(dào)最新版即可。

安裝flutter_web編譯工具

要(yào / yāo)想将Flutter代碼編譯爲(wéi / wèi)Web端可部署的(de)應用程序，必須安裝flutter_web，這(zhè)是(shì)一個(gè)Flutter官方爲(wéi / wèi)我們開發并維護的(de)編譯工具，直接使用以(yǐ)下命令安裝即可：

flutter pub global activate webdev

安裝完成後，需要(yào / yāo)配置環境變量，直接将$HOME/.pub-cache/bin加入到(dào)你的(de)環境變量中即可，由于(yú)電腦不(bù)同的(de)操作系統配置環境變量的(de)方式不(bù)同，這(zhè)裏就(jiù)不(bù)一一展開贅述了(le／liǎo)，以(yǐ)mac操作系統爲(wéi / wèi)例：

cd
vim .bash_profile

然後添加一行：

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

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

source .bash_profile

至此，我們的(de)開發環境就(jiù)搭建好了(le／liǎo)，可以(yǐ)看出(chū)，隻要(yào / yāo)我們本地(dì / de)的(de)Flutter環境配置的(de)沒有問題，配置Flutter for web隻是(shì)多裝了(le／liǎo)一個(gè)flutter_web編譯工具而(ér)已，非常簡單。

創建項目

區别于(yú)普通的(de)Flutter項目，由于(yú)Flutter對web的(de)支持目前還沒有完全完成，相當于(yú)是(shì)一個(gè)供大(dà)家嘗鮮的(de)作品，所以(yǐ)創建Flutter for web項目和(hé / huò)普通Flutter項目不(bù)一樣，這(zhè)裏建議大(dà)家使用idea，我這(zhè)裏也(yě)以(yǐ)idea爲(wéi / wèi)例進行說(shuō)明：

創建Dart項目，而(ér)不(bù)是(shì)Flutter項目

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

注意三點：

1. 選擇Dart項目，而(ér)不(bù)是(shì)新建Flutter項目
2. 正确設置自己dart sdk的(de)位置
3. 選擇Generate sample content中的(de)Flutter Web App選項

創建完成後我們的(de)項目就(jiù)默認支持部署到(dào)Web了(le／liǎo)，在(zài)Idea中應該可以(yǐ)直接點擊運行按鈕進行運行，或者可以(yǐ)在(zài)Idea的(de)終端中輸入：

webdev serve

進行運行，初次編譯可能會下一些本項目所依賴的(de)包，需要(yào / yāo)一分多鍾，後面編譯會快很多，編譯完成後會彈出(chū)一個(gè)浏覽器的(de)窗口（注意，這(zhè)裏建議使用Chrome浏覽器，其他(tā)浏覽器筆者沒有測試過，按照官方的(de)說(shuō)法，目前支持最好的(de)應該是(shì)Chrome浏覽器）如下圖：

我們來(lái)看看項目結構：

可以(yǐ)看到(dào)，大(dà)體的(de)項目結構了(le／liǎo)普通的(de)Flutter項目差不(bù)多，知識多了(le／liǎo)一個(gè)web文件夾，下面是(shì)一些和(hé / huò)web相關的(de)文件和(hé / huò)資源，後面我會具體講其用處。

編寫代碼

創建好項目之(zhī)後，我們就(jiù)可以(yǐ)着手代碼的(de)編寫了(le／liǎo)，這(zhè)裏不(bù)再詳細叙述代碼怎麽寫，和(hé / huò)普通Flutter編寫代碼的(de)規則是(shì)一模一樣的(de)，這(zhè)裏我在(zài)lib文件夾下新建了(le／liǎo)一個(gè)pages文件夾，然後新建了(le／liǎo)login_page.dart文件，編寫登錄界面的(de)代碼，完成後代碼如下：

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" /> 
然後就(jiù)可以(yǐ)正常使用了(le／liǎo)，這(zhè)也(yě)是(shì)迄今爲(wéi / wèi)止我發現的(de)Flutter for web和(hé / huò)普通Flutter項目的(de)不(bù)同之(zhī)處了(le／liǎo)。
 
編寫完布局文件後我們将main.dart稍作修改，引入我們的(de)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());
  }
}

 
然後我們就(jiù)可以(yǐ)運行起來(lái)看效果了(le／liǎo)：
 
 
和(hé / huò)開篇的(de)效果圖一樣，不(bù)再贅述。
 
總結
 
本文我們通過一個(gè)簡單的(de)實例帶大(dà)家走了(le／liǎo)一遍Flutter在(zài)web端部署的(de)流程，可以(yǐ)看到(dào)，目前Flutter在(zài)Web上(shàng)的(de)部署已經沒有任何壓力了(le／liǎo)，隻是(shì)由于(yú)生态還不(bù)完整，很多庫和(hé / huò)包還不(bù)能用，所以(yǐ)目前還無法投入商用軟件中，希望Flutter可以(yǐ)發展的(de)越來(lái)越完善。同時(shí)，結合筆者個(gè)人(rén)的(de)開發經驗，建議大(dà)家開發Flutter項目時(shí)一定不(bù)要(yào / yāo)怕麻煩，多用像mvp這(zhè)類的(de)項目結構，這(zhè)樣可以(yǐ)大(dà)大(dà)提高開發效率。
 
關于(yú)Flutter for web的(de)更多資料，可以(yǐ)參考Flutter官方的(de)倉庫：https://github.com/flutter/flutter_web。