Flutter Package推荐：home_widget

在移动应用开发中，"HomeScreen" 和 "LockScreen" 小部件是为用户提供实时信息的利器，用户无需主动浏览手机即可获取所需信息。与我们在 Flutter 生态系统中所熟悉的小部件有所不同，这些小部件在概念上有所区别。在这里，小部件是指在 "HomeScreen"（主屏幕）上运行的应用程序的精简版本，或者在苹果设备中还可以出现在 "LockScreen"（锁屏）和 "Today" 视图中。这些小部件非常适合以一种快速、直观的方式呈现重要信息。然而需要注意的是，与我们通常在 Flutter 中编写 UI 的方式不同，我们无法直接使用 Flutter 代码来绘制小部件的用户界面。然而，幸运的是，有一个名为 "home_widget" 的包填补了这一差距，使我们能够在 Flutter 代码中直接管理 "HomeScreen" 小部件的数据流和更新。

创建本地主屏幕小部件

我们需要在应用程序的平台端创建一个本地的屏幕小部件。

dart 复制代码

Button(
    child: Text('Add to Home Screen'),
    onPressed: (context) {
        HomeWidget•saveWidgetData<String>('currentTemperature','87 degrees');
    },
);

更新您的屏幕小部件

为了强制重新加载 HomeScreenWidget，您需要调用

dart 复制代码

HomeWidget.updateWidget(
    name: 'HomeWidgetExampleProvider',
    androidName: 'HomeWidgetExampleProvider',
    iOSName: 'HomeWidgetExample',
    qualifiedAndroidName: 'com.example.app.HomeWidgetExampleProvider',
);

Android 的名称将通过检查来选择qualifiedAndroidName，回退到<packageName>.androidName，如果没有提供，它将回退到<packageName>.name。该名称需要等于 WidgetProvider 的类名

iOS 的名称将通过检查来选择，iOSName如果未提供，它将回退到name. 该名称需要等于您在 Widget 中指定的 Kind

使用 Flutter 小部件的图像

在某些情况下，您可能不想在小部件的本机框架中重写 UI 代码。例如，假设您的 Flutter 应用程序中有一个图表配置为CustomPaint：

scala 复制代码

class LineChart extends StatelessWidget {
  const LineChart({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: LineChartPainter(),
      child: const SizedBox(
        height: 200,
        width: 200,
      ),
    );
  }
}

重写代码以在 Android 和 iOS 上创建此图表可能非常耗时。相反，您可以生成 Flutter 小部件的 png 文件，并将其保存到 Flutter 应用程序和主屏幕小部件之间的共享容器中。

less 复制代码

var path = await HomeWidget.renderFlutterWidget(
  const LineChart(),
  key: 'lineChart',
  logicalSize: Size(width: 400, height: 400),
);

LineChart()是将渲染为图像的小部件。
key是设备上键/值存储中的键，存储文件的路径，以便在本机端轻松检索

如果您想要更详细地了解 "home_widget" 能够实现哪些功能，您可以访问 "home_widget主页" 获取更多相关信息。这个包将为您提供关于如何最大程度地利用 "HomeScreen" 和 "LockScreen" 小部件的信息和资源。在移动应用开发的道路上，这些小部件无疑将成为提升用户体验的有力工具。