飘动的自定义小部件样式

Question

我正在与设计师紧密地研究一个大型应用程序。
我是样式指南和组件设计过程的一部分，
设计师交出了他的作品，现在轮到我将一些原型和样式转换为真正的Flutter应用程序了。

我很难将“样式指南”转换为颤动小部件。
例如，我有一个从头开始创建的自定义芯片小部件，具有许多样式属性。
该芯片有两种主要的不同样式（正常和突出显示），
广泛使用芯片（我相信有50多个参考文献），不包括使用它的其他更复杂的小部件。

我尝试：

1. 为每个大型小部件创建一个样式类，并在主题上创建扩展名。

class MyCustomChip extends StatelessWidget {
    Widget build(BuildContext context) {
       final style = Theme.of(context).myCustomChip;
       /** return the custom chip **/
    }
}

class MyCustomChipStyle {
/** many style properties **/
}

extension MyCustomChipThemeData on ThemeData {
    MyCustomChipStyle get myCustomChip => ...
}

2. 创建一个静态样式类，并在小部件使用时传递相关样式属性。

class MyCustomChip extends StatelessWidget {
    final Color color;
    final BorderRadius borderRadius;
    /** many more styling properties **/
}

abstract class MyCustomChipValues {
    static const BorderRadius kBorder = /** Getting value from a predefined radiuses **/
    static const Color kColor = /** Getting value from a predefined palette **/
    /** Many more **/
}

class WidgetUsingTheChip extends StatelessWidget {
    Widget build(BuildContext context) {
      /** those lines will be duplicated alot **/
      return MyCustomChip(
        color: MyCustomChipValues.kColor,
        borderRadius: MyCustomChipValues.kBorder,
        /** Many more **/
      );
    }
}

3. 使用自定义小部件内的所有相关样式属性，并且没有揭露它们。

abstract class MyCustomChipValues {
    static const BorderRadius kBorder = /** Getting value from a predefined radiuses **/
    static const Color kColor = /** Getting value from a predefined palette **/
    /** Many more **/
}

class MyCustomChip extends StatelessWidget {
    Widget build(BuildContext context) {
       /** making it virtually impossible to change style depending on state **/
       return Container(
          color: MyCustomChipValues.kColor,
          /** Many more **/
       );
    }
}

class WidgetUsingTheChip extends StatelessWidget {
    Widget build(BuildContext context) {
      return MyCustomChip();
    }
}

我已经定义了其他样式类：

• 插图（各种填充和边距）
• 颜色（我们的调色板，按钮，芯片，输入，脚手架等）
• Borderradiuses
• Shadows
• Animations（持续时间和曲线）
• 指南（基于天沟和设计网格网格我们对
• 其他课程进行了原型的原型...

在需要时我无法将以下哪项更容易维护和重构。.

关于如何管理整个样式指南的任何建议 -代码将有所帮助，
特别是如何管理自定义小部件样式。

谢谢 ！

Answer 1

基本上，您需要了解自定义小部件的概念，并了解存在的不同类型的芯片。

1. 您可以有几种类型的子弹 - 选择，过滤器，动作，输入 - 芯片。 芯片 - 材料设计

2. 来自材料设计提供的不同类型的样式，您将其调整到您从设计团队中收到的小部件。例如，将子弹包裹在一列中以带有额外的标签。

class MyActionChip extends StatelessWidget {
  /// Default chip have a string label
  const MyActionChip({
    required this.label,
    required this.onPressed,
    Key? key,
    this.onTapAvatar,
  })  : child = null, super(key: key);
  
  /// Default chip have a widget label
  const MyActionChip.child({
    required this.child,
    required this.onPressed,
    Key? key,
    this.onTapAvatar,
  })  : label = null, super(key: key);
  
  final String? label;
  final Widget? child;
  final VoidCallback? onTapAvatar;
  final Function()? onPressed;
  
  @override
  Widget build(BuildContext context) {
    return InputChip(
      backgroundColor: MyColors.milk,
      shape: const RoundedRectangleBorder(
          borderRadius:
          BorderRadius.all(Radius.circular(MyConstants.borderRadiusMedium)),
          side: BorderSide(color: MyColors.anthracite20),
      ),
      avatar: const Icon(
          MyIcons.plus,
          size: 18,
          color: MyColors.anthracite,
      ),
      labelPadding:
          const EdgeInsets.only(right: SdConstants.contentPaddingMedium),
          label: child ??
              Text(
                  label!,
                  style: const TextStyle(
                    color: MyColors.anthracite,
            fontSize: 14,
            fontWeight: FontWeight.bold,
          ),
        ),
      onPressed: onPressed,
    );
  }
}

3. 在复杂的情况下，您可以根据复杂性构建自定义芯片。

注意：根据屏幕和回调而变化的参数仅在构造函数之外暴露。您需要几个构造函数/类来自定义所有芯片。

Answer 2

我建议使用sarenitedwidget，那么您不必依靠外部软件包。

例如：

class CustomStyle extends InheritedWidget {
  const CustomStyle({
    Key? key,
    required this.data,
    required Widget child,
  }) : super(key: key, child: child);

  final StyleData data;

  static CustomStyle of(BuildContext context) {
    final CustomStyle? result =
        context.dependOnInheritedWidgetOfExactType<CustomStyle>();
    assert(result != null, 'No CustomStyle found in context');
    return result!;
  }

  @override
  bool updateShouldNotify(CustomStyle oldWidget) => data != oldWidget.data;
}

您可以创建这些并以任何方式添加到customStyle，也许根据小部件具有多个类，或者通过颜色分开。

class StyleData {
  const StyleData({
    required this.color,
    required this.padding,
  });

  final Color color;
  final EdgeInsets padding;
}

用CustomStyle将您的Interialapp包装，传递您的数据。

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

  @override
  Widget build(BuildContext context) {
    return CustomStyle(
      data: const StyleData(
        color: Colors.blue,
        padding: EdgeInsets.zero,
      ),
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const MyHomePage(title: 'Flutter Demo Home Page'),
      ),
    );
  }
}

然后，您可以在所有自定义小部件中访问样式：

class CustomContainer extends StatelessWidget {
  const CustomContainer({Key? key, this.color, this.padding}) : super(key: key);

  final Color? color;
  final EdgeInsets? padding;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: color ?? CustomStyle.of(context).data.color,
      padding: padding ?? CustomStyle.of(context).data.padding,
      child: const Text('Hello'),
    );
  }
}

任何问题都让我知道。