Flutter基础组件插件simple_widget的使用

简介

simple_widget 是一个用于创建基于时间线的原生小部件的 Flutter 插件。通过该插件，您可以将 Flutter 小部件转换为图像并生成 Base64 编码字符串，然后将其作为时间线小部件提供给系统。

创建一个带有 Flutter 小部件的时间线原生小部件！

截图

iOS

Android

使用此插件的应用

您可以查看以下应用以了解如何使用此插件：

• Widget Maker: 一款允许您创建自定义小部件的应用。
  • 下载链接：
    • iOS
    • Android

工作原理

如果您想创建时间线小部件，此插件非常适合您。时间线小部件会提前计算并提供给系统。

您需要将小部件转换为图像，然后将其转换为 Base64 字符串。之后，将 Base64 字符串和显示时间提供给插件。

入门指南

请查看文档文件夹以获取有关如何使用插件的详细说明。

安装

在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  simple_widget: any       # 添加此行

运行 flutter pub get 以安装插件。

示例代码

以下是一个完整的示例代码，展示如何使用 simple_widget 插件。

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:simple_widget_example/widgets_screen.dart';
import 'package:simple_widget/simple_widget.dart';

import 'off_topic/app_button.dart';
import 'game_widget_example.dart';
import 'multiple_types_example.dart';
import 'one_widget_example.dart';

void main() {
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.white,
    statusBarColor: Colors.white,
    statusBarIconBrightness: Brightness.dark,
    statusBarBrightness: Brightness.light,
  ));
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _simpleWidgetPlugin = SimpleWidget();

  [@override](/user/override)
  void initState() {
    super.initState();

    _setup();
  }

  void _setup() async {
    await _simpleWidgetPlugin.setGroupID("group.abedalkareem.widgets");
    await _simpleWidgetPlugin.setAppScheme("widgets");
    _listenForWidgetClicked();
  }

  void _listenForWidgetClicked() {
    _simpleWidgetPlugin.widgetClicked.listen((event) async {
      debugPrint(event.toString());
      final id = event?.queryParameters["id"];
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => WidgetsScreen(
            id: id ?? "",
          ),
        ),
      );
      debugPrint(id);
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: const ColorScheme.light(
          primary: Colors.white,
          secondary: Colors.black,
          onPrimary: Colors.white,
        ),
        appBarTheme: const AppBarTheme(
          color: Colors.white,
          elevation: 0,
          foregroundColor: Colors.black,
          titleTextStyle: TextStyle(
            color: Colors.black,
            fontSize: 30,
            fontFamily: "Michelia",
          ),
        ),
      ),
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  [@override](/user/override)
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final _simpleWidgetPlugin = SimpleWidget();

  [@override](/user/override)
  void initState() {
    super.initState();

    _setup();
  }

  void _setup() async {
    await _simpleWidgetPlugin.setGroupID("group.abedalkareem.widgets");
    await _simpleWidgetPlugin.setAppScheme("widgets");
    _listenForWidgetClicked();
  }

  void _listenForWidgetClicked() {
    if (Platform.isIOS) {
      return;
    }
    _simpleWidgetPlugin.widgetClicked.listen((event) async {
      debugPrint(event.toString());
      final id = event?.queryParameters["id"];
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => WidgetsScreen(
            id: id ?? "",
          ),
        ),
      );
      debugPrint(id);
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Simple widget example'),
      ),
      body: Container(
        color: Colors.white,
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              AppButton(
                onPressed: () async {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => const MultipleTypesExample()),
                  );
                },
                text: "Multiple types example",
              ),
              AppButton(
                onPressed: () async {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => const OneWidgetExample()),
                  );
                },
                text: "One widget example",
              ),
              AppButton(
                onPressed: () async {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => const GameWidgetExample()),
                  );
                },
                text: "Game widget example",
              ),
              AppButton(
                onPressed: () async {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => const WidgetsScreen(
                              id: '',
                            )),
                  );
                },
                text: "View widgets",
              ),
            ],
          ),
        ),
      ),
    );
  }
}