手把手带你使用Flutter开发web应用程序

众所周知Google对于Flutter的期望是全平台统一UI开发,号称要做一套“一份代码、全平台部署”的UI框架,这一点在移动端已经很成熟了,国内有很多成功的案例,典型的像阿里的闲鱼客户端,但是Flutter所声称的桌面端和Web端的相关案例还很少,之前我写过一篇文章介绍如何将Flutter代码部署成为桌面端程序,那么本文就该介绍如何将Flutter部署为Web应用了。

本文将会以一个实例来带大家一步一步探寻如何将Flutter应用程序部署到web端,我们先来看一下最终的效果:

可以看到,就是一个简单的登录界面,没有太复杂的逻辑,旨在帮助大家走通Flutter部署到Web端的流程,至于实际的应用场景大家可以根据自己的需要自行开发。

开发环境配置

Flutter 1.5及更高的版本才支持Web端部署,这主要指的是将Dart编译为JavaScript,所以,必须要确保我们本地的Flutter SDK的版本在v1.5.4以上,建议直接使用命令flutter upgrade更新到最新版即可。

安装flutter_web编译工具

要想将Flutter代码编译为Web端可部署的应用程序,必须安装flutter_web,这是一个Flutter官方为我们开发并维护的编译工具,直接使用以下命令安装即可:

flutter pub global activate webdev

安装完成后,需要配置环境变量,直接将$HOME/.pub-cache/bin加入到你的环境变量中即可,由于电脑不同的操作系统配置环境变量的方式不同,这里就不一一展开赘述了,以mac操作系统为例:

cd
vim .bash_profile

然后添加一行:

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

退出并保存,使用如下命令使其生效:

source .bash_profile

至此,我们的开发环境就搭建好了,可以看出,只要我们本地的Flutter环境配置的没有问题,配置Flutter for web只是多装了一个flutter_web编译工具而已,非常简单。

创建项目

区别于普通的Flutter项目,由于Flutter对web的支持目前还没有完全完成,相当于是一个供大家尝鲜的作品,所以创建Flutter for web项目和普通Flutter项目不一样,这里建议大家使用idea,我这里也以idea为例进行说明:

创建Dart项目,而不是Flutter项目

直接在Idea中新建项目,如下图所示:

手把手带你使用Flutter开发web应用程序

注意三点:

  1. 选择Dart项目,而不是新建Flutter项目
  2. 正确设置自己dart sdk的位置
  3. 选择Generate sample content中的Flutter Web App选项

创建完成后我们的项目就默认支持部署到Web了,在Idea中应该可以直接点击运行按钮进行运行,或者可以在Idea的终端中输入:

wevdev serve

进行运行,初次编译可能会下一些本项目所依赖的包,需要一分多钟,后面编译会快很多,编译完成后会弹出一个浏览器的窗口(注意,这里建议使用Chrome浏览器,其他浏览器笔者没有测试过,按照官方的说法,目前支持最好的应该是Chrome浏览器)如下图:

手把手带你使用Flutter开发web应用程序

我们来看看项目结构:

手把手带你使用Flutter开发web应用程序

可以看到,大体的项目结构了普通的Flutter项目差不多,知识多了一个web文件夹,下面是一些和web相关的文件和资源,后面我会具体讲其用处。

编写代码

创建好项目之后,我们就可以着手代码的编写了,这里不再详细叙述代码怎么写,和普通Flutter编写代码的规则是一模一样的,这里我在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, //垂直方向对其方式
 crossAxisAlignment: CrossAxisAlignment.start, //水平方向对其方式
 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代码是一样的,只是需要注意以下几点:

包的使用

细心的同学可能会发现,我们这里导入的包是:

import 'package:flutter_web/material.dart';

而普通Flutter项目导入的是:

import 'package:flutter/material.dart';

原则就是原来的 package:flutter 改为 package:flutter_web ,原来的 dart:ui 改为 package:flutter_web_ui/ui.dart,当然,这些你只需要知道就好了,实际生产的时候直接快捷键按下,编辑器会自动帮我们导入正确的包。

资源的使用

我们之前使用资源文件(比如图片)的方式是在根目录下新建一个资源文件夹,然后将资源文件放在资源文件夹下,然后在pubspec.yaml文件中进行文件路径的声明,然后就可以使用了,在Flutter for web中,我们需要将原来的资源文件夹从之前的项目根目录迁移到web文件夹下,就像这样:

手把手带你使用Flutter开发web应用程序

然后就可以正常使用了,这也是迄今为止我发现的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开发web应用程序

和开篇的效果图一样,不再赘述。

总结

本文我们通过一个简单的实例带大家走了一遍Flutter在web端部署的流程,可以看到,目前Flutter在Web上的部署已经没有任何压力了,只是由于生态还不完整,很多库和包还不能用,所以目前还无法投入商用软件中,希望Flutter可以发展的越来越完善。同时,结合笔者个人的开发经验,建议大家开发Flutter项目时一定不要怕麻烦,多用像mvp这类的项目结构,这样可以大大提高开发效率。

如果你喜欢 Flutter ,想自己尝试一下的话,我收集了很多flutter的资料可以免费分享给大家!需要资料的小伙伴们可以加我的技术交流分享qq群:825106898。

image
image
image
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容