Flutter自定义Widget集合插件widgetarian的使用

Flutter自定义Widget集合插件widgetarian的使用

Widgetarian 是一个UI工具包，它不依赖于任何特定平台或设计系统。你可以通过可扩展的主题预设和事件驱动样式机制进行定制，并且它包含了许多酷炫的功能和直观的API。

特性

• 不依赖于任何特定平台或设计系统
• 提供一些著名平台的主题预设
• 可以自定义或创建主题预设以满足你的需求
• 相比MaterialState，事件驱动样式机制更简单
• 内置直观的事件驱动样式引擎
• 强大的内置主题提供器
• 从零开始构建的大量酷炫功能和直观API

预览

Demo

使用

要查看完整的使用示例，请参见 example。

若要进一步了解 widgetarian 中使用的类和其他引用，请参阅 API Reference。

待办事项

• 添加类似涟漪或闪烁效果的锚点效果
• 采用更直观API的 smart_select
• 适配适应式抽屉、卡片、骨架等更多酷炫小部件
• 改进API文档
• 构建一个着陆页
• 将示例上传到Play商店和App商店
• 建立社区，创建Discord服务器或其他社区渠道

赞助

如果你觉得这个包或我创建的其他包对你有帮助，请考虑赞助我，这样我就能有更多时间来解决这些问题、修复bug、合并PR并添加新特性。

示例代码

import 'dart:developer';
import 'package:flutter/material.dart' hide
    ButtonThemeData,
    ChipThemeData,
    CheckboxThemeData,
    RadioThemeData,
    SwitchThemeData;
import 'package:widgetarian/theme.dart';
import 'pages/routes.dart';

void main() {
  // debugRepaintRainbowEnabled = true;
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // 这个小部件是你应用的根节点。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return ThemeProvider.builder(
      controller: ThemeController(
        onAvailableChanged: (_) => log('可用的主题发生了变化'),
        onThemeChanged: (theme) => log('主题已更改至 ${theme.selected}'),
        onModeChanged: (theme) =>
            log('主题模式已更改至 ${theme.mode.name}'),
        onColorChanged: (theme) =>
            log('主题颜色已更改至 ${theme.color.toString()}'),
        onChanged: (theme) => log('值已更改'),
        themes: {
          'm2': ThemeConfig.fromColor(
            Colors.blue,
            description: 'Material 2',
            extensionBuilder: ThemePreset.m2,
          ),
          'm3': ThemeConfig.fromColor(
            Colors.purple,
            description: 'Material 3',
            extensionBuilder: ThemePreset.m3,
          ),
          'ios': ThemeConfig.fromColor(
            Colors.pink,
            description: 'iOS',
            extensionBuilder: ThemePreset.ios,
          ),
        },
        extensionBuilder: ThemePreset.m2,
      ),
      builder: (context, theme) {
        return MaterialApp(
          title: 'Widgetarian',
          theme: theme.lightData,
          darkTheme: theme.darkData,
          themeMode: theme.mode,
          initialRoute: '/',
          routes: routes,
          builder: (context, child) {
            return Theme(
              data: Theme.of(context).copyWith(
                extensions: theme.extensionBuilder?.call(context),
              ),
              child: child ?? const SizedBox.shrink(),
            );
          },
        );
      },
    );
  }
}