在flutter M3中为材质按钮添加渐变

Question

作为一名 flutter 开发人员，您可能需要使用具有渐变颜色的按钮来实现设计。虽然您可以使用

Container()

和

InkWell()

为此目的构建自己的小部件，但仍有更多需要处理，其中包括

MaterialStatesProperty<>

。

Answer 1

这就是

backGroundBuilder: 

属性的用武之地。只需将下面的代码插入到您的

theme:

中，将

ElevatedButton()

替换为您想要的按钮，然后让所有这些按钮都有您的自定义背景。

ThemeData(
    useMaterial3: true,
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
        backgroundBuilder: (ctx, state, child) {
          return DecoratedBox(
            decoration: const BoxDecoration(
              gradient: LinearGradient(
                end: Alignment.topRight,
                begin: Alignment.bottomLeft,
                colors: [Color(0xff24225E), Color(0xff08A1DA)],
              ),
            ),
            child: child,
          );
        },
      ),
    ),
  ),