本文由 简悦SimpRead 转码，原文地址 medium.com
将Flutter功能连接到原生应用，只需几行代码就能启动和运行
将Flutter功能连接到原生应用，只需几行代码就能启动和运行
如果你曾经想尝试使用Flutter，但又不想从头开始建立什么，Flutter的add-to-app功能是一个不错的开始。为了使Flutter更容易为您所用，我们与Flutter团队合作，创建了一个添加到应用程序的原型样本，以展示Flutter如何以最小的努力集成到本地代码库中。无论您是想试用Flutter，还是想向您的团队展示Flutter的实际工作情况，这篇文章都是为您准备的!
将Flutter添加到一个原生的新闻源应用中
在本教程中，我们将向您展示如何利用Flutter功能，并使用Flutter的add-to-app API，在短短几行中把它纳入一个本地应用程序。
我们要看的项目被分成两部分。第一部分包含三个相同的新闻提要应用程序，分别用于三个独立的本地平台。安卓、iOS和网络。这个应用程序是互动的，所以你可以在设备上运行它，滚动浏览文章，点击新闻项目，等等。这个项目的第二部分是一个对话框，在与应用程序互动时弹出，要求用户提交反馈。这个功能，我们称之为NPS（Net Promoter Score）模块，是用Flutter构建的。
首先，进入示例库。在这里，你会看到每个平台都有一个文件夹，包含了新闻源应用的本地代码。存储库中还有一个flutter_nps文件夹，包含NPS模块的所有Flutter代码。
用Angular在Web上添加Flutter
Flutter模块作为<iframe>在本地网络应用中运行。要将该功能集成到Angular代码库中，首先为Web目标运行Flutter构建。这一步会生成index.html和其他必要的文件。将所有的构建文件复制到Angular应用程序的src文件夹中。在那里，你可以在 "iframe "中引用这些构建文件。下次你运行网络应用时，你就会看到Flutter的功能!
用Kotlin将Flutter添加到Android中
现在让我们把NPS模块添加到Android应用中。首先启动一个使用缓存引擎的Flutter活动。一旦你启动本地新闻应用，Flutter引擎就会在后台进行预热。然后，你会启动一个新的活动，并把它指向Flutter活动。这确保了从原生Kotlin代码到Flutter的快速过渡，并允许Flutter功能在Android应用中无缝工作。
在iOS上用SwiftUI添加Flutter
最后，我们可以将NPS模块添加到iOS应用中。首先，在Xcode的构建设置中把编译好的Flutter模块嵌入到你的应用程序中。然后，在你的应用程序委托中，创建一个Flutter引擎的实例并启动它。完成这些后，您就可以在任何需要的地方显示Flutter UI了--只需使用Flutter引擎创建一个FlutterViewController并将其呈现出来。然后运行flutter build ios-framework，路径为。
让Flutter为你工作（和你的团队！）。
现在你已经有了Flutter代码并在你的应用程序中运行，你可以尝试Flutter的一些有趣部分。下面的章节包括了一些可以开始的想法。
支持多个平台
在这个新闻提要的例子中，你可以看到NPS模块如何支持平台差异。在网页上，该模块以对话框的形式出现在新闻联播的顶部，并对来自鼠标或屏幕阅读器的输入做出反应。在手机上，该模块占据了整个屏幕空间，并对通过触摸或屏幕阅读器的输入做出反应。
请注意，Flutter NPS模块包含Material widgets，它可以根据用户的设备自动处理手势检测。如果使用桌面设备，应用程序会接收鼠标输入，如果使用移动设备，应用程序会接收触摸输入。
动画
这个原型包括一些隐性动画，由于它们是内置于Flutter框架中的，所以很容易调整。例如，如果你想对AnimatedContainer部件进行修改，只需调整其属性，如动画的持续时间、容器的高度、形状和颜色。
...
return AnimatedContainer(
duration: duration,
height: Spacing.huge,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: isSelected
? NpsColors.colorSecondary
: NpsColors.colorGrey5,
),
...
)
NPS模块包括一个自定义的页面动画过渡。看看SlideTransition小部件，它可以通过更新其持续时间和其他元素来定制另一个动画例子。
SlideTransition(
position: Tween<Offset>(
begin: const Offset(0, 1),
end: Offset.zero,
).animate(animation),
child: child,
);
如果你想让你的动画更上一层楼，你可以从pub.dev导入animations包，并使用一些花哨的、预先建立的动画。
更新NPS模块的主题也很简单。因为它通过ThemeData使用内置的Material主题，你可以简单地在一个地方更新颜色、按钮样式和字体。例如，要用Flutter改变NPS模块的accentColor和backgroundColor，使用提供的Material color palette shades更新为您想要的颜色，或者您想要的自定义颜色。
class AppTheme {
ThemeData get theme => ThemeData(
colorScheme: ColorScheme.fromSwatch(
accentColor: NpsColors.colorSecondary,
backgroundColor: NpsColors.colorWhite,
),
scaffoldBackgroundColor: NpsColors.colorWhite,
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
primary: NpsColors.colorSecondary,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24),
),
).copyWith(
backgroundColor: MaterialStateProperty.resolveWith<Color?>(
(Set<MaterialState> states) {
if (!states.contains(MaterialState.disabled)) {
return NpsColors.colorSecondary;
} else if (states.contains(MaterialState.disabled)) {
return NpsColors.colorWhite;
}
return null;
},
),
),
),
textTheme: const TextTheme(
headline5: NpsStyles.headline5,
subtitle1: NpsStyles.subtitle1,
bodyText2: NpsStyles.link,
),
);
Flutter NPS模块使用flutter_bloc进行状态管理，以跟踪用户的得分反应。Cubit是构建Flutter应用程序时状态管理的众多选项之一。该功能还包括单元和部件测试，这些都是有用的工具，可以确保你所写的代码按预期工作。最后，该代码库有本地化，支持78种语言的开箱即用。这个项目有GitHub Actions integration for continuous integration，可以在合并修改前运行格式化、林特化和测试阶段。
虽然这个原型目前没有与后台互动，但你可以用你选择的后台来配置它，以存储来自NPS模块的数据，或者甚至为原生新闻源拉入样本文章。一个可以探索的选项是Firebase，它可以与Flutter无缝集成。参见Firebase文档，将Firebase添加到你的Flutter应用中。
现在你知道了如何将Flutter功能添加到本地Web、Android和iOS代码库中，你可以按照类似的流程将该功能集成到任何本地应用中。请参阅完整的 add-to-app 文档 以了解更多信息。
