Flutter - 定义按钮的优雅方式

Question

我想为我的新应用程序创建一个设计系统。

      child: ElevatedButton.icon(               
            icon: Icon(Icons.power_settings_new),
            onPressed: () => context.go('/login'),
            label: const Text('Log out'),
          ),

没关系，但在这种情况下它应该有红色强调。通过使用 foregroundColor 属性可以轻松实现此目标。通过使用这种技术，无需担心图标的颜色、文本的颜色、波纹效果颜色。

      child: ElevatedButton.icon(
            style: ElevatedButton.styleFrom(
              foregroundColor: Colors.red,
            ),
            icon: Icon(Icons.power_settings_new),
            onPressed: () => context.go('/login'),
            label: const Text('Log out'),
          ),

但是我不想每次都指定这种颜色。我更喜欢制作这样的东西，并且我想避免为按钮编写任何包装。

      child: ElevatedButton.error( // Color accent is red
                    icon: Icon(Icons.power_settings_new),
                    onPressed: () => context.go('/login'),
                    label: const Text('Log out'),
                  ),

问题1：这个事件可能发生吗？

问题 2：图标、文本和波纹效果如何知道它们需要使用前景色来渲染自身？

Answer 1

不带参数的扩展

您只需更改颜色即可定义error,的每个实例。success

extension ExtendedElevatedButton on ElevatedButton {
  ElevatedButton error() {
    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        foregroundColor: Colors.red,
      ),
      onPressed: onPressed,
      child: child,
    );
  }
}

并将其用作

ElevatedButton(
   onPressed: () => context.go('/login'),
   child: const Text('Log out'),
).error(),

带参数的扩展

您可以通过使用参数并传入所需的颜色使其更通用

extension ExtendedElevatedButton on ElevatedButton {
  ElevatedButton addColor(Color color) {
    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        foregroundColor: color,
      ),
      onPressed: onPressed,
      child: child,
    );
  }
}

并将其用作

ElevatedButton(
   onPressed: () => context.go('/login'),
   child: const Text('Log out'),
).addColor(Colors.red),

额外：如果您还想使用带有所有参数的扩展，您应该使用首选名称定义每个所需的扩展。

extension ExtendedElevatedButton on ElevatedButton {
  ElevatedButton error(Function<void> onPressed,Widget child) {
    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        foregroundColor: Colors.red,
      ),
      onPressed: onPressed,
      child: child,
    );
  }
  ElevatedButton success(Function<void> onPressed,Widget child) {
    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        foregroundColor: Colors.green,
      ),
      onPressed: onPressed,
      child: child,
    );
  }
}

并将其用作

ElevatedButton.error(
   onPressed: () => context.go('/login'),
   child: const Text('Log out'),
);

ElevatedButton.success(
   onPressed: () => context.go('/login'),
   child: const Text('Log out'),
);