Flutter+Android/ios 桌面小组件

Flutter+Android/ios 桌面组件

总结：

1. Android和iOS 桌面小组件 需要原生去绘制小组件和更新数据，Flutter层 可以使用 MethodChannel 与原生 通信 来控制 更新数据，app无法主动控制 小组件的添加 和 删除， 只能是用户手动操作 。
2. 小组件支持显示的内容包括：文字，图片，列表，虚拟时钟，勾选框，进度条等，注意：只能显示原生的view 不可显示自定义画的view。
3. 负一屏：Google原生暂时还没开放API可以直接添加小组件到负一屏，目前Google原生的负一屏 是一个简单的 新闻 feed流 不可自定义编辑，国内的很多厂商整合了负一屏和桌面小组件，也就说小组件可以直接添加在负一屏，不过开发需要适配不同的厂商系统如小米，华为，Oppo，vivo等，iOS负一屏 也可以自定义编辑，小组件直接添加在负一屏。

官方文档：

Android小组件：https://developer.android.com/develop/ui/views/appwidgets?hl=zh-cn
IOS小组件：https://developer.apple.com/cn/documentation/widgetkit/creating-a-widget-extension/
小米小部件：https://dev.mi.com/console/doc/detail?pId=2465
华为荣耀小组件：https://developer.honor.com/cn/doc/guides/100170
Oppo小组件：https://open.oppomobile.com/new/developmentDoc/info?id=12704
vivo小组件：https://developers.vivo.com/doc/d/e88425fe41c94924a052e98dd956c0fb

参考文档：

Flutter小组件开发：https://juejin.cn/post/6933559401462628365
Android小组件开发：https://juejin.cn/post/7296031991320870912

上手开发:

使用Flutter插件：home_widget
插件地址：https://pub-web.flutter-io.cn/packages/home_widget

iOS	Android

平台设置

为了正常工作，需要一些特定于平台的设置。请查看以下内容，了解如何添加对 Android 和 iOS 的支持

iOS

在 Xcode 中将小部件添加到您的应用程序

通过添加小部件扩展 File > New > Target > Widget Extension

添加groupId

您需要向应用程序和小部件扩展添加一个groupId

注意：为了添加 groupId，您需要一个付费的 Apple 开发者帐户

转到您的Apple 开发者帐户并添加一个新组。将此组添加到您的 Runner 和 XCode 内的 Widget Extension: Signing & Capabilities > App Groups > +。
(要在您的应用程序和扩展程序之间交换，请更改目标)

同步 CFBundleVersion（可选）

此步骤是可选的，这会将小部件扩展构建版本与您的应用程序版本同步，因此您在上传应用程序时不会收到 App Store Connect 版本不匹配的警告。

在您的 Runner（应用程序）目标中，转到 Build Phases > + > New Run Script Phase 并添加以下脚本：

generatedPath="$SRCROOT/Flutter/Generated.xcconfig"

# Read and trim versionNumber and buildNumber
versionNumber=$(grep FLUTTER_BUILD_NAME "$generatedPath" | cut -d '=' -f2 | xargs)
buildNumber=$(grep FLUTTER_BUILD_NUMBER "$generatedPath" | cut -d '=' -f2 | xargs)

infoPlistPath="$SRCROOT/HomeExampleWidget/Info.plist"

# Check and add CFBundleVersion if it does not exist
/usr/libexec/PlistBuddy -c "Print :CFBundleVersion" "$infoPlistPath" 2>/dev/null
if [ $? != 0 ]; then
    /usr/libexec/PlistBuddy -c "Add :CFBundleVersion string $buildNumber" "$infoPlistPath"
else
    /usr/libexec/PlistBuddy -c "Set :CFBundleVersion $buildNumber" "$infoPlistPath"
fi

# Check and add CFBundleShortVersionString if it does not exist
/usr/libexec/PlistBuddy -c "Print :CFBundleShortVersionString" "$infoPlistPath" 2>/dev/null
if [ $? != 0 ]; then
    /usr/libexec/PlistBuddy -c "Add :CFBundleShortVersionString string $versionNumber" "$infoPlistPath"
else
    /usr/libexec/PlistBuddy -c "Set :CFBundleShortVersionString $versionNumber" "$infoPlistPath"
fi

将HomeExampleWidget 替换为您创建的小部件扩展文件夹的名称。

编写你的小组件

Check the Example App for an Implementation of a Widget.
A more detailed overview on how to write Widgets for iOS 14 can be found on the Apple Developer documentation.
In order to access the Data send with Flutter can be access with
检查示例应用程序以了解小部件的实现。有关如何为 iOS 14 编写 Widget 的更详细概述可以在Apple 开发人员文档中找到。为了访问使用 Flutter 发送的数据，可以使用

let data = UserDefaults.init(suiteName:"YOUR_GROUP_ID")

Android (Jetpack Glance)

将 Jetpack Glance 添加为应用程序 Gradle 文件的依赖项

implementation 'androidx.glance:glance-appwidget:LATEST-VERSION'

在 android/app/src/main/res/xml中创建小部件配置

<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    android:initialLayout="@layout/glance_default_loading_layout"
    android:minWidth="40dp"
    android:minHeight="40dp"
    android:resizeMode="horizontal|vertical"
    android:updatePeriodMillis="10000">
</appwidget-provider>

将 WidgetReceiver 添加到 AndroidManifest

<receiver android:name=".glance.HomeWidgetReceiver"
          android:exported="true">
   <intent-filter>
      <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
   </intent-filter>
   <meta-data
           android:name="android.appwidget.provider"
           android:resource="@xml/home_widget_glance_example" />
</receiver>

创建 WidgetReceiver

要获得自动更新，您应该从 HomeWidgetGlanceWidgetReceiver 扩展

Your Receiver should then look like this
你的Receiver 应该看起来像这样

package es.antonborri.home_widget_example.glance

import HomeWidgetGlanceWidgetReceiver

class HomeWidgetReceiver : HomeWidgetGlanceWidgetReceiver<HomeWidgetGlanceAppWidget>() {
   
    override val glanceAppWidget = HomeWidgetGlanceAppWidget()
}

构建您的 AppWidget

class HomeWidgetGlanceAppWidget : GlanceAppWidget() {
   

    /**