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

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

image

可以看到，就是一個簡單的登錄界面括勺，沒有太復(fù)雜的邏輯曲掰，旨在幫助大家走通Flutter部署到Web端的流程底哥，至于實際的應(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ā)并維護的編譯工具盯仪，直接使用以下命令安裝即可：

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)建項目

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

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

直接在Idea中新建項目纱耻，如下圖所示：

手把手帶你使用Flutter開發(fā)web應(yīng)用程序

注意三點：

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

創(chuàng)建完成后我們的項目就默認支持部署到Web了请敦，在Idea中應(yīng)該可以直接點擊運行按鈕進行運行齐媒，或者可以在Idea的終端中輸入：

wevdev serve

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

手把手帶你使用Flutter開發(fā)web應(yīng)用程序

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

手把手帶你使用Flutter開發(fā)web應(yīng)用程序

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

編寫代碼

創(chuàng)建好項目之后少欺，我們就可以著手代碼的編寫了喳瓣，這里不再詳細敘述代碼怎么寫，和普通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(
 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("沒有帳戶崎页？ 注冊",
 style: new TextStyle(color: Colors.teal)),
 ),
 )),
 ],
 )),
 ],
 );
 }
}

可以看到鞠绰，代碼和普通Flutter代碼是一樣的，只是需要注意以下幾點：

包的使用

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

import 'package:flutter_web/material.dart';

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

import 'package:flutter/material.dart';

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

資源的使用

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

手把手帶你使用Flutter開發(fā)web應(yīng)用程序

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

編寫完布局文件后我們將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());
 }
}

然后我們就可以運行起來看效果了：

手把手帶你使用Flutter開發(fā)web應(yīng)用程序

和開篇的效果圖一樣渔隶，不再贅述羔挡。

總結(jié)

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

如果你喜歡 Flutter ，想自己嘗試一下的話率触，我收集了很多flutter的資料可以免費分享給大家终议！需要資料的小伙伴們可以加我的技術(shù)交流分享qq群：825106898。

image

image

image