Flutter设计系统插件flutter_design_system的使用

发布于 1周前 作者 eggper 来自 Flutter

Flutter设计系统插件flutter_design_system的使用

Flutter设计系统

这是Flutter设计系统与响应式教程包。

开始使用

1. 安装flutter_design_system包

flutter pub add flutter_design_system

2. 将根部件包装在ThemeInjector中

import 'package:flutter_design_system/flutter_design_system.dart';

void main() {
  runApp(
    const ThemeInjector(
      child: MyApp(),
    ),
  );
}

3. 在MaterialApp中传递context.themeService.themeData和navigatorKey，并在builder中调用Toast.init()

final GlobalKey<NavigatorState> navigatorKey = GlobalKey();

[@override](/user/override)
Widget build(BuildContext context) {
  return MaterialApp(
    navigatorKey: navigatorKey,
    theme: context.themeService.themeData,
    builder: (context, child) => Toast.init(navigatorKey, child),
    ...
  );
}

示例

以下是一个完整的示例代码，展示了如何使用flutter_design_system插件来创建一个具有自定义主题和响应式UI的应用程序。

import 'package:flutter/material.dart';
import 'package:flutter_design_system/flutter_design_system.dart';

import 'my_theme/my_dark_theme.dart';
import 'my_theme/my_light_theme.dart';

void main() {
  runApp(
    ThemeInjector(
      themeService: ThemeService(
        brightness: Brightness.light, // 当前主题
        lightTheme: MyLightTheme(), // 我的亮色主题
        darkTheme: MyDarkTheme(), // 我的暗色主题
      ),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  MyApp({super.key});

  final GlobalKey<NavigatorState> navigatorKey = GlobalKey();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Design System',
      navigatorKey: navigatorKey,
      theme: context.themeService.themeData,
      debugShowCheckedModeBanner: false,
      builder: (context, child) => Toast.init(navigatorKey, child),
      home: const SamplePage(),
    );
  }
}

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

  [@override](/user/override)
  State<SamplePage> createState() => _SamplePageState();
}

class _SamplePageState extends State<SamplePage> {
  int count = 1;
  int colorIndex = 0;
  bool get isLightTheme => context.theme.brightness == Brightness.light;
  final TextEditingController textController = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Design System'),
        titleSpacing: 16,
        actions: [
          /// 切换主题按钮
          Button(
            type: ButtonType.flat,
            color: isLightTheme ? context.color.secondary : context.color.tertiary,
            icon: isLightTheme ? 'sunny' : 'moon',
            onPressed: () {
              context.readThemeService.toggleTheme();
            },
          ),
        ],
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: HideKeyboard(
          child: Column(
            children: [
              const SizedBox(width: double.infinity),

              /// 按钮组件
              buildButton(),

              /// 资源图标
              buildAssetIcon(context),

              /// 输入框
              buildInputField(),

              /// 瓷砖
              buildTile(),

              /// 颜色选择器
              buildColorPicker(),

              /// 计数按钮
              buildCounterButton(),

              /// 评分
              buildRating(),

              Wrap(
                crossAxisAlignment: WrapCrossAlignment.center,
                alignment: WrapAlignment.center,
                runSpacing: 16,
                spacing: 16,
                children: [
                  /// 显示提示信息
                  Button(
                    text: '显示提示信息',
                    onPressed: () => Toast.show(
                      textController.text.isEmpty
                          ? DateTime.now().toString()
                          : textController.text,
                    ),
                  ),

                  /// 显示对话框
                  buildDialog(context),

                  /// 显示底部弹出层
                  buildBottomSheet(context),
                ],
              ),
            ]
                .map((e) => Padding(
                      padding: const EdgeInsets.all(16),
                      child: e,
                    ))
                .toList(),
          ),
        ),
      ),
    );
  }

  Button buildBottomSheet(BuildContext context) {
    return Button(
      text: '显示底部弹出层',
      onPressed: () {
        showModalBottomSheet(
          context: context,
          builder: (context) {
            return BaseBottomSheet(
              child: SizedBox(
                width: double.infinity,
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Text(
                      "Hello Bottom Sheet",
                      style: context.typo.headline3,
                    ),
                    const SizedBox(height: 32),
                  ],
                ),
              ),
            );
          },
        );
      },
    );
  }

  Button buildDialog(BuildContext context) {
    return Button(
      text: '显示对话框',
      onPressed: () {
        showDialog(
          context: context,
          builder: (context) {
            return BaseDialog(
              title: '对话框标题',
              content: Text(
                '对话框内容',
                style: context.typo.headline6,
              ),
              actions: [
                Button(
                  text: '取消',
                  type: ButtonType.flat,
                  color: context.color.secondary,
                  onPressed: () {
                    Navigator.pop(context);
                  },
                ),
                Button(
                  text: '确认',
                  type: ButtonType.flat,
                  onPressed: () {
                    Navigator.pop(context);
                  },
                ),
              ],
            );
          },
        );
      },
    );
  }

  Rating buildRating() => const Rating(rating: '5.0');

  Widget buildInputField() => SizedBox(
        width: 500,
        child: InputField(
          controller: textController,
          hint: '输入框',
        ),
      );

  Widget buildTile() {
    return SizedBox(
      width: 500,
      child: Tile(
        icon: 'moon',
        title: '标题',
        subtitle: '副标题',
        onPressed: () {},
      ),
    );
  }

  ColorPicker buildColorPicker() {
    return ColorPicker(
      colorIndex: colorIndex,
      colorList: const [
        Colors.amber,
        Colors.pink,
        Colors.purple,
        Colors.blue,
      ],
      onColorSelected: (index) {
        setState(() {
          colorIndex = index;
        });
      },
    );
  }

  CounterButton buildCounterButton() {
    return CounterButton(
      count: count,
      onChanged: (v) {
        setState(() {
          count = v;
        });
      },
    );
  }

  Widget buildButton() {
    return Wrap(
      crossAxisAlignment: WrapCrossAlignment.center,
      alignment: WrapAlignment.center,
      spacing: 16,
      runSpacing: 16,
      children: [
        Button(
          text: "小填充按钮",
          size: ButtonSize.small,
          type: ButtonType.fill,
          onPressed: () {},
        ),
        Button(
          text: "中填充按钮",
          size: ButtonSize.medium,
          type: ButtonType.fill,
          onPressed: () {},
        ),
        Button(
          text: "大填充按钮",
          size: ButtonSize.large,
          type: ButtonType.fill,
          onPressed: () {},
        ),
        Button(
          text: "小轮廓按钮",
          size: ButtonSize.small,
          type: ButtonType.outline,
          onPressed: () {},
        ),
        Button(
          text: "中轮廓按钮",
          size: ButtonSize.medium,
          type: ButtonType.outline,
          onPressed: () {},
        ),
        Button(
          text: "大轮廓按钮",
          size: ButtonSize.large,
          type: ButtonType.outline,
          onPressed: () {},
        ),
        Button(
          text: "小扁平按钮",
          size: ButtonSize.small,
          type: ButtonType.flat,
          onPressed: () {},
        ),
        Button(
          text: "中扁平按钮",
          size: ButtonSize.medium,
          type: ButtonType.flat,
          onPressed: () {},
        ),
        Button(
          text: "大扁平按钮",
          size: ButtonSize.large,
          type: ButtonType.flat,
          onPressed: () {},
        ),
      ],
    );
  }
}

Widget buildAssetIcon(BuildContext context) {
  return Wrap(
    crossAxisAlignment: WrapCrossAlignment.center,
    alignment: WrapAlignment.center,
    spacing: 24,
    runSpacing: 16,
    children: [
      'arrow-left',
      'basket',
      'check',
      'chevron-right',
      'close',
      'language',
      'minus',
      'moon',
      'option',
      'plus',
      'search',
      'star',
      'sunny',
      'uncheck',
    ]
        .map((e) => Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                AssetIcon(e),
                const SizedBox(height: 8),
                Text(
                  e,
                  style: context.typo.body2,
                ),
              ],
            ))
        .toList(),
  );
}

更多关于Flutter设计系统插件flutter_design_system的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter设计系统插件flutter_design_system的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用flutter_design_system插件的一个简单示例。请注意，由于flutter_design_system并非一个官方或广泛认知的插件（在撰写此回复时），我将假设它是一个自定义设计系统插件，并展示如何集成和使用一个类似功能的插件。如果flutter_design_system实际上存在且有所不同，请根据官方文档进行调整。

假设flutter_design_system提供了一些预定义的主题、颜色和组件，以下是如何在Flutter项目中集成并使用它的示例代码。

1. 添加依赖

首先，在pubspec.yaml文件中添加flutter_design_system依赖（假设它存在于pub.dev上或你的私有包仓库中）：

dependencies:
  flutter:
    sdk: flutter
  flutter_design_system: ^x.y.z  # 替换为实际版本号

然后运行flutter pub get来安装依赖。

2. 导入插件

在你的Dart文件中导入flutter_design_system：

import 'package:flutter/material.dart';
import 'package:flutter_design_system/flutter_design_system.dart';  // 假设的包路径

3. 使用设计系统

假设flutter_design_system提供了一个DesignSystemTheme和一个DesignSystemButton组件，以下是如何使用它们的示例：

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Design System Example',
      theme: DesignSystemTheme.light(),  // 使用设计系统提供的主题
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Design System Demo'),
      ),
      body: Center(
        child: DesignSystemButton(
          onPressed: () {
            // 按钮点击事件
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('Button pressed!')),
            );
          },
          child: Text('Design System Button'),
        ),
      ),
    );
  }
}

4. 自定义主题（假设支持）

如果flutter_design_system允许自定义主题，你可以这样做：

final ThemeData customTheme = DesignSystemTheme.light().copyWith(
  primaryColor: Colors.blue,
  accentColor: Colors.green,
  // 其他自定义属性
);

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Design System Example',
      theme: customTheme,  // 使用自定义主题
      home: MyHomePage(),
    );
  }
}

注意事项

  • 实际插件可能有所不同：请确保查阅flutter_design_system的官方文档，因为实际的API和组件可能会有所不同。
  • 版本兼容性：确保你使用的Flutter版本与flutter_design_system插件兼容。
  • 私有或第三方仓库：如果flutter_design_system是一个私有包或位于第三方仓库，请确保你的Flutter环境已正确配置以访问这些仓库。

由于flutter_design_system的具体实现细节未知，上述代码提供了一个基于假设的集成和使用示例。如果这是一个实际存在的插件，请参考其官方文档和示例代码进行集成。

回到顶部