命令从 webdev serve或者 pub run build_runner serve 变成了flutter run -d chrome

新建一个flutter web app

官方wiki地址Building a web application with Flutter

sdk 1.9

首先我们要确保Flutter sdk 大于等于1.9 执行命令 flutter config --enable-web，如果报错，说明sdk不对。 再执行flutter devices

有Chrome，说明ok了

创建

我们可以先创建一个Flutter 应用，然后再执行flutter create .就会生成一个web的文件夹，包含index.html文件

注意命令后面有一个点

运行

flutter run -d chrome flutter run -d chrome --release/--profile 或者vscode中选择chrome，然后start debug 第一次会下载web sdk

打包

flutter build web 执行成功之后，会在build文件夹里面生成web文件夹，build产物全部在里面

可以看到在yaml里面定义的资源也被放到asset文件夹里面

assets:

• assets/

平台区分

由于web是不支持 dart:io，那么我们一份代码怎么做到统一打包编译？ 之前提到过桌面需要在入口设置平台为TargetPlatform.fuchsia

void main() {
// See https://github.com/flutter/flutter/wiki/Desktop-shells#target-platform-override
debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;

那我们怎么处理这个情况呢？我们下面说一下条件引入和导出

条件 import/export

条件导入导出在dart 1和dart 2之中有所不同 在dart2中我们可以使用dart.library.io和dart.library.js 区分能够调用io api（android/ios/桌面）还是web

import ‘main_web.dart’ if (dart.library.io) “main_io.dart”;
export ‘config_helper_web.dart’ if (dart.library.io)“config_helper_io.dart”;

创建io和web的文件

拿config_helper.dart这个类来举一个例子，它是用来缓存配置信息的：

• 在桌面上面是写到目录下面的文件里面
• 而对于web来说，调用的通过js来操控localStorage

分别在config_helper_io.dart和congfig_helper_web.dart中分别按照自己的平台进行实现就好了，然后在config_helper.dart中导出，用于调用

期待改进

• yaml 文件

yaml里面有一些引用，比如资源文件，字体文件，可能这个平台需要，另外的平台不需要。 现在的方式是没法做区别，唯一的方式就只能是打包之后，用脚本来做移除 或者主入口创建不同的项目

• 代码
  现在还没办法根据平台来选择是否执行某行代码，现在只能把他们放到不同的文件，根据平台来import。希望能像C#一样增加可以添加平台symbol
  
  结语

最后

针对于上面的问题，我总结出了互联网公司Android程序员面试涉及到的绝大部分面试题及答案，并整理做成了文档，以及系统的进阶学习视频资料。
（包括Java在Android开发中应用、APP框架知识体系、高级UI、全方位性能调优，NDK开发，音视频技术，人工智能技术，跨平台技术等技术资料），希望能帮助到你面试前的复习，且找到一个好的工作，也节省大家在网上搜索资料的时间来学习。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

cs/618156601)**

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！