Flutter 定义按钮的优雅方式

不带参数的扩展

只需更改 colored颜色 ，即可定义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(),

带参数的扩展

通过使用参数并传递所需的 colored颜色 ，可以使其更加通用

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),

Extra: If you further want to use the extension with all parameters you should define every desired extension with the preffered name.

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'),
);