Flutter Interact 的 Flutter 1(4)

flutter run -d chrome

flutter run -d macOS

///打包

flutter build web

flutter build macos

二、更多开发工具

---

1、DartPad

DartPad是用于在线体验 Dart 功能的平台，而本次更新后 DartPad也支持 Flutter 的在线编写预览，这代表着开发者可以在没有 idea的情况下也能实时测试自己的 Flutter 代码，算是补全了 Flutter 的在线用例测试。

DartPad 的官方地址：dartpad.dev 和国内镜像地址 dartpad.cn

2、Spuernova

Spuernova 可以说是本次 Flutter Interact 的亮点之一，通过导入设计师的 Sketch 文件就可以生成 Flutter 代码，这无疑提升了 Flutter 的生产力和可想象空间，虽然这种生成代码的方法并不罕见，完整实用程度有待考验，但是这也让开发者可以更聚焦于业务逻辑和操作逻辑。

放心，这个坑不是谷歌 Flutter 团队开的，它属于另外一家商业公司。

使用 Spuernova可以从 supernova.io 下载 Supernova Studio ，之后需要注册用户信息（可能需要科学S网），最后就可以看到如下图所示的界面。

在导入 Sketch文件后可以看到设计师完成的界面效果，同时选中 "</>" 按键，可以在右侧看到对应的 Flutter 代码，左侧可以看到对应的层级设计，但是这时候的代码看起来还比较简单和笨重，并且不具备交互能力。

如果进一步配置，用户需要在对应的控件上，使用右键的弹出框配置控件的功能，比如 List、Button、TextField等组件去 Convert 原有的控件，让控件更新具备交互能力，同时还可以为控件配置布局属性和动画效果等。

当然， Spuernova 并不是什么完全的公益项目，目前只有对于 Flutter 的简单支持上是免费的，其他项目支持还是处于收费状态。

另外类似的还有 AdobeXD， Adobe 的 Creative Cloud 添加了 Flutter 支持，只需一个插件，用户就可以将 AdobeXD导出到 Flutter，目前处于注册参加优先体验计划 的进度。

3、Hot UI

Hot UI 就是大家盼星盼月的预览功能，如下图所示，在 Android Studio 的 Flutter 插件中在开发 widget 开发的过程中，直接在 IDE 的镜像里进行预览并与之进行交互。

在官方的 HotUI-Getting-Started-instructions 中可以看到相关的描述：This feature is currently experimental. To enable, go to Preferences > Languages & Frameworks > Flutter Then check “Enable Hot UI” under “Experiments”. 目前该功能还处于实验阶段，在 Android Studio 的设置中，如图所示底部勾选启动这个功能。

但是如下图所示，开启后会发现和官方宣传的不一样？因为目前预览的 Screen mirror 处于 coming soon 的状态。

现阶段的 Hot UI 如下 GIF 所示，暂时只支持用户动态调试和配置控件的属性等逻辑，让我们期待官方填坑吧。

4、Layout Explorer

Layout Explorer 是另外实验性的布局调试模式，Layout Explorer主要是用于帮助开发者更直观地适配屏幕和调试如 overflowed 等场景的问题。

在最新的 Dart DevTools 工具添加了一个名为 Layout Explorer的功能，它能够以可视化的方式呈现应用的布局信息，从而让检查器可以更好地发挥功，同时 Layout Explorer 不仅能以可视化的方式展现正在运行的应用中的 widget 布局，而且还允许以交互的方式更改布局选项。

启动 Layout Explorer同样需要 Flutter SDK 处于 master分支，然后在程序运行之后，点击 DevTools在 chrome 打开，之后点击最右侧的按键进入 Flutter 调试模式。

如下 GIF 所示，当选中的控件是具备 Flex 的支持时，可以看到有 Layout Explorer 的面板，在面板中可以动态调整控件的显示逻辑和控件的布局情况。

比如当控件出现了 overflowed ，我们可以很直观的看到问题的根源并且进行调整。

另外可以在 Layout Explorer 中动态调整控件的 flex 等相关信息，实时预览修改情况。

三、Flutter SDK 改进

---

Flutter SDK 相关的更新本次解决了 4,571 个报错，合并了 1,905 份 pr，同时包含了许多的新功能支持。

• 首先 Flutter 1.12 建议开发者将 Android 项目迁移到 AndroidX，SDK 的瘦身，增加了 google_fonts 字体的支持等。

• Android 插件的改进 Android plugins APIs，相比起以前更为简单明了，分割了 FlutterPlugin and MethodCallHandler ,同时提供 ActivityAware、 ServiceAware作为独立支持。

• iOS 13 深色模式,支持使用 darkTheme 设置，同时还增加了如 CupertinoContextMenu、CupertinoSlidingSegmentedControl、CupertinoAlertDialog、CupertinoDatePicker 等 iOS 风格的控件支持。

new MaterialApp(

title: ‘’,

navigatorKey: navigatorKey,

theme: model.themeData,

darkTheme: model.darkthemeData,

locale: model.locale,

• Add-to-App 混合集成模式的进一步的更新。

• 新增加了不兼容的 breaking change，比如: PageView 启用 RenderSliverFillViewport 、 WidgetsBinding 中的 attachRootWidget 被替换为 scheduleAttachRootWidget 、Allow gaps in the initial route、TextField’s minimum height from 40 to 48 等需要开发者注意重新适配的修改，更多可查阅 release-notes-1.12.13。

• 增加了 MediaQuery.systemGestureInsets 支持 Android Q 的手势导航；增加了 SliverIgnorePointer 、SliverOpacity、SliverAnimatedList 等控件支持；PageRouteBuilder 支持 fullscreenDialog。

• Dart 2.7 的发布，支持扩展方法。

extension ExtendsFun on String {

int parseInt() {

return int.parse(this);

} double parseDouble() {

return double.parse(this);

}

}

main() {

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！