Flutter Web的配置、启动、打包

Flutter Web目前还是预览版,还有些不是跟移动端那么成熟,小翼在这里经过自己的努力调试了一下。废话不多说,直接撸码:

Flutter Web配置:

1、首先flutterSDK的版本要1.5.4及以上,DartSDK版本要2.3.0及以上。

直接下载flutterSDK就行了,它包含了DartSDK;

下载flutterSDK跟flutter移动端的一样,不懂环境的的请看《flutter移动端的环境配置和启动》这一篇,这里直接在Git里面克隆flutterSDK;

git clone -b beta https://github.com/flutter/flutter.git

配置环境也是一样的。这里就不说了

 

2、配置DartSDK环境:在flutterSDK里面的..flutter\bin\cache\dart-sdk;

右键我的电脑-->属性-->高级系统属性-->环境变量-->找到PATH,点击编辑-->黏贴这个路径:..flutter\bin\cache\dart-sdk\bin;

3、下载IDEA开发工具(VS Code也可以开发,配置跟IDEA差不多,这里以IDEA为示例),启动添加flutter插件和dart插件,配置FlutterSDK路径,如下:

安装 Dart 和 flutter 插件

我们要给 IDEA 安装 dart 和 flutter 插件。安装完成后就可以开始我们的 flutter web之旅了。

新建一个 Flutter Web 项目

安装完成Dart 和 flutter 环境后,重启 IDEA后就可以快速的搭建一个 Flutter web 项目。

Flutter Web的配置、启动、打包_第1张图片

选择 新建 Dart项目,创建一个 Flutter Web App。

项目创建好,要等待 依赖包的下载。

接着安装 webdev 工具,在IDEA中选择命令窗口,运行下面的命令。

$ flutter packages pub global activate webdev

安装完成后,我们要找到 flutter 的安装目录(这个目录在运行窗口中可以找到,安装工具的最后完成的时候有说明。),在目录的 .pub-cache/bin 中会找到我们下载的 webdev

Flutter Web的配置、启动、打包_第2张图片

将路径 $HOME/.pub-cache/bin 添加到环境变量中。

设置完成后在终端输入 webdev 看看是否成功

 

Flutter Web的配置、启动、打包_第3张图片

坑:在一些终端上运行该命令会提示该命令不存在,比如 cmd,Fluent。

配置成功后就可以开始下一步了。

运行项目

首先确保 IDEA 将所需要的依赖正常安装完成。

在IDEA终端输入 webdev serve,当编译完成后,打开 http://localhost:8080, 如图,显示出 hello world

Flutter Web的配置、启动、打包_第4张图片

最后说明:

项目结构

项目已经运行,简单的看一下项目主要结构

Flutter Web的配置、启动、打包_第5张图片

.dart_tool 是项目打包运行编译生成的文件

lib 是我们主要要写的项目代码和原有的 Flutter 基本一致

web 包含一个 html 文件和一个 main.dart

index.html 引用了 web/main.dart 编译生成的 js 文件

Flutter Web的配置、启动、打包_第6张图片

而 web/main.dart 调用了 lib/main.dart,我们写代码基本就可以修改lib目录下的代码进行运行。

Flutter Web的配置、启动、打包_第7张图片

与 Flutter 的不同

默认包名不同,

加载的默认UI包名不同,原flutter 的包为 import 'package:flutter/material.dart' 而 web 项目为 import 'package:flutter_web/material.dart' 多了一个 _web。

图标显示问题

在 web 项目上的图标无法显示。

Flutter Web的配置、启动、打包_第8张图片

项目不报错,IDEA的侧边栏也显示该图标,但是在页面上却无法显示

Flutter Web的配置、启动、打包_第9张图片

3、打包

如果你想查看release版本,可以运行

flutter pub global run webdev serve -r

如果你想发布制品,则可以运行

flutter pub global run webdev build

这会在项目的根路径下生成一个build文件夹,里面包含可以部署到服务器上的文件,如下图所示:

Flutter Web的配置、启动、打包_第10张图片

其他

简单的体验后,基本可以用flutter开发页面,目前来说还是有一些问题的,比如说上述的图标加载问题,而且如果将移动端的代码复制过来,除了包名要有修改外,很多第三方包还是对 web 不支持。编译速度也没有移动端那样快,相较于传统的web开发,编译速度也是一个问题。

简单的将原有的一个APP进行了一下迁移,基本涉及到具体的业务方法的地方都要重写。

 

 

 

 

 

你可能感兴趣的:(Flutter)