像支付宝那样“致敬”第三方开源代码

站长

2023年06月22日 11:50 · 阅读数 12

前言

通常我们在App中会使用第三方的开源代码，按照许可协议，我们应该在App中公开使用的开源代码并且附上对应的开源协议。当然，实际上只有少部分注重合规性的大厂才会这么干，比如下图是支付宝的关于界面的第三方信息。当然，对于小企业，基本上都不会放使用的第三方开源代码的任何信息。像支付宝那样“致敬”第三方开源代码

不过，作为一个有“追求”的码农，我们还是想对开源软件致敬一下的，毕竟，没有他们我都不知道怎么写代码。然而，我们的 App 里用了那么多第三方开源插件，总不能一个个找出来一一致敬吧？怎么办？其实，Flutter 早就为我们准备好了一个组件，那就是本篇要介绍的 AboutDialog。

AboutDialog 简介

AboutDialog 是一个对话框，它可以提供 App 的基本信息，如 Icon、版本、App 名称、版权信息等。像支付宝那样“致敬”第三方开源代码

同时，AboutDialog还提供了一个查看授权信息（View Licenses）的按钮，点击就可以查看 App 里所有用到的第三方开源插件，并且会自动收集他们的 License 信息展示。所以，使用 AboutDialog 可以让我们轻松表达敬意。怎么使用呢？非常简单，我们点击一个按钮的时候，调用 showAboutDialog 就搞定了，比如下面的代码：

IconButton(
  onPressed: () {
    showAboutDialog(
      context: context,
      applicationName: '岛上码农',
      applicationVersion: '1.0.0',
      applicationIcon: Image.asset('images/logo.png'),
      applicationLegalese: '2023 岛上码农版权所有'
    );
  },
  icon: const Icon(
    Icons.info_outline,
    color: Colors.white,
  ),
),

参数其实一目了然，具体如下：

context：当前的 context；
applicationName：应用名称；
applicationVersion：应用版本，如果要自动获取版本号也可以使用 package_info_plus 插件。
applicationIcon：应用图标，可以是任意的 Widget，通常会是一个App 图标图片。
applicationLegalese：其他信息，通常会放置应用的版权信息。

点击按钮，就可以看到相应的授权信息了，点击一项就可以查看具体的 License。我看了一下使用的开源插件非常多，要是自己处理还真的很麻烦。像支付宝那样“致敬”第三方开源代码

可以说非常简单，当然，如果你直接运行还有两个小问题。

按钮本地化

AboutDialog 默认提供了两个按钮，一个是查看授权信息，一个是关闭，可是两个按钮的标题默认是英文的（分别是VIEW LICENSES和 CLOSE）。像支付宝那样“致敬”第三方开源代码

如果要改成本地话的，还需要做一个自定义配置。我们扒一下 AboutDialog 的源码，会发现两个按钮在DefaultMaterialLocalizations中定义，分别是viewLicensesButtonLabel和closeButtonLabel。这个时候我们自定义一个类集成DefaultMaterialLocalizations就可以了。

class MyMaterialLocalizationsDelegate
    extends LocalizationsDelegate<MaterialLocalizations> {
  const MyMaterialLocalizationsDelegate();

  @override
  bool isSupported(Locale locale) => true;

  @override
  Future<MaterialLocalizations> load(Locale locale) async {
    final myTranslations = MyMaterialLocalizations(); // 自定义的本地化资源类
    return Future.value(myTranslations);
  }

  @override
  bool shouldReload(
          covariant LocalizationsDelegate<MaterialLocalizations> old) =>
      false;
}

class MyMaterialLocalizations extends DefaultMaterialLocalizations {
  @override
  String get viewLicensesButtonLabel => '查看版权信息';

  @override
  String get closeButtonLabel => '关闭';

}

然后在 MaterialApp 里指定本地化localizationsDelegates参数使用自定义的委托类对象就能完成AboutDialog两个按钮文字的替换。

return MaterialApp(
  debugShowCheckedModeBanner: false,
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  home: const AboutDialogDemo(),
  localizationsDelegates: const [MyMaterialLocalizationsDelegate()],
);

添加自定义的授权信息

虽然 Flutter 会自动收集第三方插件，但是如果我们自己使用了其他第三方的插件的话，比如没有在 pub.yaml 里引入，而是直接使用了源码。那么还是需要手动添加一些授权信息的，这个时候我们需要自己手动添加了。添加的方式也不麻烦，Flutter 提供了一个LicenseRegistry的工具类，可以调用其 addLicense 方法来帮我们添加授权信息。具体使用如下：

LicenseRegistry.addLicense(() async* {
  yield const LicenseEntryWithLineBreaks(
    ['关于岛上码农'],
    '我是岛上码农，微信公众号同名。\f如有问题可以加本人微信交流，微信号：island-coder。',
  );
});

这个方法可以在main方法里调用。其中第一个参数是一个数组，是因为可以允许多个开源代码共用一份授权信息。同时，如果一份开源插件有多个授权信息，可以多次添加，只要名称一致，Flutter就会自动合并，并且会显示该插件的授权信息条数，点击查看时，会将多条授权信息使用分割线分开，代码如下所示：

void main() {
  runApp(const MyApp());
  LicenseRegistry.addLicense(() async* {
    yield const LicenseEntryWithLineBreaks(
      ['关于岛上码农'],
      '我是岛上码农，微信公众号同名。如有问题可以加本人微信交流，微信号：island-coder。',
    );
  });

  LicenseRegistry.addLicense(() async* {
    yield const LicenseEntryWithLineBreaks(
      ['关于岛上码农'],
      '使用时请注明来自岛上码农、。',
    );
  });
}

像支付宝那样“致敬”第三方开源代码

总结

本篇介绍了在 Flutter 中快速展示授权信息的方法，通过 AboutDialog 就可以轻松搞定，各位“抄代码”的码农们，赶紧用起来向大牛们致敬吧！

我是岛上码农，微信公众号同名。如有问题可以加本人微信交流，微信号：island-coder。

👍🏻：觉得有收获请点个赞鼓励一下！

🌟：收藏文章，方便回看哦！

💬：评论交流，互相进步！