Flutter应用定制化插件app_customizer的使用

app_customizer 是一个方便的工具，用于从根实例自定义应用程序的颜色、像素、边框、对齐方式等。

示例

以下是使用 app_customizer 的示例代码：

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

void main() {
  runApp(
    AppCustomizer(
      customizer: Customizer(
        customizers: [
          const CustomizerConfigData<Alignment>(
            name: "box",
            config: CustomizerConfig(
              mobile: Customizers(
                primary: Alignment.center,
              ),
            ),
          ),
        ],
      ),
      deviceConfig: const DeviceConfig(),
      dimen: Dimen(
        dimens: [],
      ),
      theme: ColorTheme(
        base: const ColorThemeConfig(
          light: ThemeColors(
            primary: Colors.deepPurple,
          ),
        ),
        colors: [],
        gradients: [],
      ),
      child: const MyApp(),
    ),
  );
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'APP CUSTOMIZER',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: context.primary),
        useMaterial3: true,
      ),
      home: const Home(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: context.scaffoldColor.primary,
      body: ResponsiveLayout(
        builder: (context, device) {
          return Container(
            alignment: context.customizerOf<Alignment>("box").primary,
            width: context.sizes.large,
            height: context.sizes.large,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(context.corners.medium),
              border: Border.all(
                color: context.backgroundColor.primary ?? Colors.black,
                width: context.borders.normal ?? 1,
              ),
            ),
            child: Text(
              "$device",
              style: TextStyle(
                fontSize: context.fontSizes.medium,
                fontWeight: context.fontWeights.bold.fontWeight,
              ),
            ),
          );
        },
      ),
    );
  }
}

代码解释

main 函数

void main() {
  runApp(
    AppCustomizer(
      customizer: Customizer(
        customizers: [
          const CustomizerConfigData<Alignment>(
            name: "box",
            config: CustomizerConfig(
              mobile: Customizers(
                primary: Alignment.center,
              ),
            ),
          ),
        ],
      ),
      deviceConfig: const DeviceConfig(),
      dimen: Dimen(
        dimens: [],
      ),
      theme: ColorTheme(
        base: const ColorThemeConfig(
          light: ThemeColors(
            primary: Colors.deepPurple,
          ),
        ),
        colors: [],
        gradients: [],
      ),
      child: const MyApp(),
    ),
  );
}

• AppCustomizer 是包裹整个应用的组件。
• Customizer 包含了多个 CustomizerConfigData 对象，每个对象定义了一个配置。
• CustomizerConfigData 中定义了一个名为 "box" 的配置，其中 Alignment.center 表示在移动设备上将子组件居中对齐。

MyApp 类

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'APP CUSTOMIZER',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: context.primary),
        useMaterial3: true,
      ),
      home: const Home(),
    );
  }
}

• MyApp 是应用的主入口。
• 使用 context.primary 来设置主题颜色。

Home 类

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: context.scaffoldColor.primary,
      body: ResponsiveLayout(
        builder: (context, device) {
          return Container(
            alignment: context.customizerOf<Alignment>("box").primary,
            width: context.sizes.large,
            height: context.sizes.large,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(context.corners.medium),
              border: Border.all(
                color: context.backgroundColor.primary ?? Colors.black,
                width: context.borders.normal ?? 1,
              ),
            ),
            child: Text(
              "$device",
              style: TextStyle(
                fontSize: context.fontSizes.medium,
                fontWeight: context.fontWeights.bold.fontWeight,
              ),
            ),
          );
        },
      ),
    );
  }
}