让前端开发者失业的技术，Flutter Web初体验

将安装包zip解压到你想安装Flutter SDK的路径（如：C:srcflutter；注意，不要将flutter安装到需要一些高权限的路径如C:Program Files）。记住，之后往环境变量的path中添加；C:srcflutterbin，以便于你能在命令行中使用flutter。

使用镜像

由于在国内安装Flutter相关的依赖可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，大家可以将如下环境变量加入到用户环境变量中：

FLUTTER_STORAGE_BASE_URL： https://storage.flutter-io.cn

5、安装Dart与Pub。安装webdev、stagehand

Pub是Dart的包管理工具，类似npm，捆绑安装。

Dart安装版地址： http://www.gekorm.com/dart-wi...

默认安装即可，安装之后记住Dart的路径，并且配置到环境变量path中，以便于可以在命令行中使用dart与pub，默认的路径是：C:Program FilesDartdart-sdkbin

先安装stagehand，stagehand是创建项目必须的工具。查看一下 C:UserschunpengliuAppDataRoamingPubCachebin 目录下是否包含stagehand和webdev，如果有，添加到环境变量的path里面，如果没有，按下面方法安装：

pub global activate stagehand 

webdev是一个类似于Koa的web服务器，执行以下命令安装

pub global activate webdev 
# or 
flutter packages pub global activate webdev 

6、配置编辑器安装Flutter和Dart插件

Flutter插件是用来支持Flutter开发工作流 (运行、调试、热重载等)。

Dart插件 提供代码分析 (输入代码时进行验证、代码补全等)。Android Studio的设置在File-》setting-》plugins-》搜索Flutter和Dart，安装之后重启。

VS code的设置在extension-》搜索Flutter和Dart，安装之后重启。

7、运行 flutter doctor

打开一个新的命令提示符或PowerShell窗口并运行以下命令以查看是否需要安装任何依赖项来完成安装：

flutter doctor 

这是一个漫长的过程，flutter会检测你的环境，并安装所有的依赖，直至：No issues found！，如果有缺失，会就会再那一项前面打x。你需要一一解决。

一切就绪！

1、启动 VS Code

调用 View>Command Palette…（快捷键ctrl+shift+p）

输入 ‘flutter’, 然后选择 ‘Flutter: New web Project’

输入 Project 名称 (如flutterweb), 然后按回车键

指定放置项目的位置，然后按蓝色的确定按钮

等待项目创建继续，并显示main.dart文件。到此，一个Demo创建完成。

我们看到了熟悉的HTML文件以及项目入口文件main.dart。

web目录下的index.html是项目的入口文件。main.dart初始化文件，图片相关资源放在此目录。

lib目录下的main.dart，是主程序代码所在的地方。

每个pub包或者Flutter项目都包含一个pubspec.yaml。它包含与此项目相关的依赖项和元数据。

analysis_options.yaml是配置项目的lint规则。

/dart_tool 是项目打包运行编译生成的文件，页面主程序main.dart.js就在其中。

2、调试Demo，打开命令行，进入到项目根目录，执行：

webdev flutterweb 

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!