Flutter，应用程序和设计插件的预览？答案

【问题标题】：Flutter, preview of app and design plugin?Flutter，应用程序和设计插件的预览？
【发布时间】：2019-03-13 03:50:18
【问题描述】：

为什么 Flutter 在我们编程时不包含应用程序的预览？

是否有任何设计插件能够像在 android studio 中一样为 android 应用程序拖放小部件？

如果没有应用程序的预览，很难从代码构建界面。

谢谢！！

【问题讨论】：

标签： flutter

【解决方案1】：

免责声明：这不是第一方工具。

我认为您正在寻找的是： https://flutterstudio.app/

这是一个用于构建 Flutter 布局的拖放编辑器。

我个人的建议是使用模拟器并了解所有布局小部件的工作原理。多亏了热重载，实验和创建您正在寻找的东西非常容易。

【讨论】：

【解决方案2】：

嗯，你有模拟器。您还想预览您的应用什么？

同样在 dart 开发工具上，你有一个渲染树和小部件检查器。有一个名为 show debug paint 的选项，我经常使用它来查看小部件的大小和边界，以及许多其他我还没有发现的选项。

如果你想通过拖放小部件创建你的用户界面，你可以使用flutter studio，但我没有使用它。

我刚刚找到that。

我真的不明白你说的预览是什么意思。

【讨论】：

我不知道flutter studio，我认为它对我有用。谢谢！！
通过“预览”，我猜用户的意思是预览应用程序的设计，而无需为您的手机或模拟器编译/构建它。在带有 Java SDK 的 Android Studio 中，您必须使用 XML 设计应用程序的用户界面。 XML 编辑器曾经有一个预览模式，当您在手机上运行应用程序时，您可以在其中看到该 XML 的外观。另外，您可以使用鼠标拖动 n 个放置项目并更改属性（大小位置等）。
如果应用程序无法构建，我需要知道屏幕是什么样子的，例如，使用原生 android 应用程序的 jetpack compose 可以预览与整个应用程序隔离的小部件并且没有编译
我不只是想预览我的整个正在运行的应用程序，问题是关于预览特定的屏幕/小部件，例如在 jetpack compose 中使用注释 @preview
在 Android Studio 中预览会很棒的原因是模拟器很重，我们不想让它一直运行