Flutter主题管理插件easydev_theme的使用

Flutter主题管理插件easydev_theme的使用

easydev_theme

此包包含来自EasyDev UI Kit的装饰小部件的主题。

此包包括来自以下包的主题：easydev_basics, easydev_base_ui 和 easydev_forms。这些包中的大多数小部件必须用自包中的EasyDevTheme进行包装以设置其样式参数。

安装

要使用此包，在您的pubspec.yaml文件中添加easydev_theme作为依赖项。

dependencies:
  easydev_theme: ^x.x.x

使用

在代码中导入该包：

import 'package:easydev_theme/easydev_theme.dart';

当使用EasyDevApp（来自easydev_basics）时，可以将浅色和深色的EasyDevThemeData添加到相应的字段中。此包包含两个可以使用的默认主题数据：defaultLightTheme 和 defaultDarkTheme。

EasyDevApp(
  // 其他配置...
  darkThemeData: defaultDarkTheme,
  lightThemeData: defaultLightTheme,
)

另外，可以直接使用EasyDevTheme来为小部件提供样式。同时，当使用MaterialApp或CupertinoApp时，EasyDevTheme会自动解析。

基础

EasyDevThemeData 包含可以通过整个应用应用的公共元素，例如 ColorPalette，TextTheme 和 EasyDevIconThemeData。它还包含可以应用于来自EasyDev UI Kit的特定小部件的具体主题。这些主题如下所示。

EasyDevThemeData 包含来自 easydev_base_ui 的小部件的主题：

• EasyDevButtonThemeData
• EasyDevCarouselThemeData
• EasyDevInputThemeData
• EasyDevTabsThemeData
• EasyDevActionSheetThemeData
• EasyDevActionMenuThemeData

EasyDevThemeData 包含来自 easydev_basics 的小部件的主题：

• EasyDevAppBarThemeData
• EasyDevBottomNavigationBarThemeData
• EasyDevDialogThemeData
• EasyDevSnackbarThemeData
• EasyDevToastThemeData
• EasyDevFloatingActionButtonThemeData
• EasyDevBottomSheetThemeData

EasyDevThemeData 包含来自 easydev_forms 的小部件的主题：

• EasyDevSelectablesThemeData
• EasyDevSwitchThemeData
• EasyDevCodeInputThemeData
• EasyDevInputNumberThemeData
• EasyDevSelectThemeData
• EasyDevMultiselectThemeData
• EasyDevSliderThemeData
• EasyDevDatePickerDialogThemeData
• EasyDevCalendarThemeData
• EasyDevDateInputThemeData
• EasyDevChipsThemeData

完整示例Demo

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

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return EasyDevApp(
      title: 'EasyDev Theme Demo',
      darkThemeData: defaultDarkTheme,
      lightThemeData: defaultLightTheme,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('EasyDev Theme Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 示例按钮
            EasyDevButton(
              text: '点击我',
              onPressed: () {},
            ),
            // 示例输入框
            EasyDevInput(
              hintText: '请输入内容',
              onChanged: (value) {},
            ),
            // 示例开关
            EasyDevSwitch(
              value: false,
              onChanged: (bool newValue) {},
            ),
          ],
        ),
      ),
    );
  }
}