让前端开发者失业的技术，Flutter Web初体验
|
将安装包zip解压到你想安装Flutter SDK的路径（如：C:srcflutter；注意，不要将flutter安装到需要一些高权限的路径如C:Program Files）。记住，之后往环境变量的path中添加；C:srcflutterbin，以便于你能在命令行中使用flutter。 使用镜像 由于在国内安装Flutter相关的依赖可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，大家可以将如下环境变量加入到用户环境变量中： PUB_HOSTED_URL：https://pub.flutter-io.cn
5、安装Dart与Pub。安装webdev、stagehandPub是Dart的包管理工具，类似npm，捆绑安装。 Dart安装版地址： http://www.gekorm.com/dart-wi... 默认安装即可，安装之后记住Dart的路径，并且配置到环境变量path中，以便于可以在命令行中使用dart与pub，默认的路径是：C:Program FilesDartdart-sdkbin 先安装stagehand，stagehand是创建项目必须的工具。查看一下
webdev是一个类似于Koa的web服务器，执行以下命令安装
6、配置编辑器安装Flutter和Dart插件Flutter插件是用来支持Flutter开发工作流 (运行、调试、热重载等)。 Dart插件 提供代码分析 (输入代码时进行验证、代码补全等)。Android Studio的设置在File-》setting-》plugins-》搜索Flutter和Dart，安装之后重启。
VS code的设置在extension-》搜索Flutter和Dart，安装之后重启。
7、运行 flutter doctor打开一个新的命令提示符或PowerShell窗口并运行以下命令以查看是否需要安装任何依赖项来完成安装：
这是一个漫长的过程，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，打开命令行，进入到项目根目录，执行：
（编辑：晋中站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
