在Flutter中，我已经制作了一个ElevatedButton，它本身显示2种颜色，但我找不到一种方法，也可以在触摸上

Question

我是新来的扑动:)我想我已经习惯了()无处不在。我以前用过Kivy。

我有我的小部件显示两种颜色显示%按钮表示使用渐变。我的小部件的这一部分工作得很好。

然而，我找不到一种方法让它在用户的点击上也有红色的"飞溅/涟漪"效果。

致以亲切的问候，提前感谢您的帮助。

PS:我喜欢Kivy的方式，分离布局和逻辑-我认为Flutter缺少这方面。

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
scaffoldBackgroundColor: const Color(0xFF445577),
),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: GradientElevatedButton(25),
),
),
);
}
}

class GradientElevatedButton extends StatelessWidget {

final double percent;

GradientElevatedButton(this.percent);


@override
Widget build(BuildContext context) {
final Color background = Colors.green;
final Color fill = Colors.lightGreen;
final List<Color> gradient = [
background,
background,
fill,
fill,
];

final double fillPercent = percent;
final double fillStop = fillPercent / 100;
final List<double> stops = [0.0, fillStop, fillStop, 1.0];

return DecoratedBox(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: gradient,
stops: stops,
end: Alignment.bottomCenter,
begin: Alignment.topCenter,
),
borderRadius: BorderRadius.circular(2),
boxShadow: <BoxShadow>[
BoxShadow(
color: Color.fromRGBO(0, 0, 0, 0.57), //shadow for button
blurRadius: 5) //blur radius of shadow
]),
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.transparent,
onSurface: Colors.transparent,
shadowColor: Colors.transparent,
//make colour or elevated button transparent
),
onPressed: () {
print("You pressed Elevated Button");
},
child: Padding(
padding: EdgeInsets.only(top: 0, bottom: 0,),
child: Text("25%"),
)));
}
}

Answer 1

您可以使用onPrimary更改splash颜色

ElevatedButton(

style: ElevatedButton.styleFrom(
onPrimary: Colors.red,
primary: Colors.transparent,
onSurface: Colors.transparent,
shadowColor: Colors.transparent,
//make colour or elevated button transparent
),
onPressed: () {
print("You pressed Elevated Button");
},
child: Padding(
padding: EdgeInsets.only(top: 0, bottom: 0,),
child: Text("25%"),
)),

Answer 2

//试试这个方法

ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
splashFactory: NoSplash.splashFactory,
),
child: child,
),