hudi flink idea环境搭建 idea配置flutter

众所周知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操作系统为例：

cdvim .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中新建项目，如下图所示：

注意三点：

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

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

wevdev serve

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

我们来看看项目结构：

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

编写代码

创建好项目之后，我们就可以着手代码的编写了，这里不再详细叙述代码怎么写，和普通Flutter编写代码的规则是一模一样的，这里我在lib文件夹下新建了一个pages文件夹，然后新建了login_page.dart文件，编写登录界面的代码，完成后代码如下：

import 'package:flutter_web/material.dart';class LoginPage extends StatefulWidget { @override State createState() => new _LoginState();}class _LoginState extends State { static final GlobalKey _scaffoldKey = new GlobalKey(); 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: [ 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: [ 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: [ 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: [ 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( "登录