How do I add effect on button like below image? - flutter

Question

I wanna add effect on button ,like while we press the button , background color of button should get change to transparent and button borderline color should be enable, then we release the button , background color get back into yellow color and borderline color should get disable.
Here is some code which I tried button but It doesn't work properly.
class CustomButton extends StatefulWidget {
final void Function()? onPressed;
final String lable;
final int backgroundColor;
final Color textColor;
final FontWeight fontWeight;
final EdgeInsetsGeometry margin;
const CustomButton(
{Key? key,
required this.onPressed,
required this.lable,
required this.backgroundColor,
this.textColor = Colors.black,
this.fontWeight = FontWeight.bold,
this.margin = EdgeInsets.zero})
: super(key: key);
#override
State<CustomButton> createState() => _CustomButtonState();
}
class _CustomButtonState extends State<CustomButton> {
bool isColorChanged = false;
#override
Widget build(BuildContext context) {
AppSize appSize = AppSize(context);
return GestureDetector(
onLongPress: () {
setState(() {
isColorChanged = true;
});
},
onLongPressCancel: () {
setState(() {
isColorChanged = false;
});
},
onTap: widget.onPressed,
child: Container(
margin: widget.margin,
height: isMobile(context) ? appSize.scaledHeight(0.065) : 80,
alignment: Alignment.center,
decoration: BoxDecoration(
color: isColorChanged
? Colors.transparent
: Color(widget.backgroundColor),
borderRadius: BorderRadius.all(Radius.circular(isMobile(context)
? 8
: 15) // <--- border radius here
),
border: Border.all(
color:
isColorChanged ? Color(themeColor) : Colors.transparent)),
padding: EdgeInsets.fromLTRB(20, 1, 20, 1),
child: Text(
widget.lable,
style: TextStyle(
fontSize: isMobile(context)
? MyFontSize().mediumTextSizeMobile
: MyFontSize().mediumTextSizeTablet,
color: widget.textColor,
fontWeight: widget.fontWeight),
),
// child:
),
);
}
}
Using Button :
class ExampleView extends StatelessWidget {
const ExampleView({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: CustomButton(
onPressed: () {},
lable: StringFile.service_provider.toUpperCase(),
backgroundColor: colorYellowBtn),
),
);
}
}
before :
while we press the button:
when we release the button :

Answer 1

You can create a custom widget and use GestureDetector (onTapDown, onTapUp events to change color) with AnimatedContainer (to animate the color)

Answer 2

Try below code hope its help to you.
Refer ElevatedButton
Refer MaterialStateProperty
ElevatedButton(
child: Text(
'Service Provider'.toUpperCase(),
style: TextStyle(
color: Colors.black,
),
),
onPressed: () {
print('Pressed');
},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.pressed)) return Colors.teal;
return Colors.yellow;
},
),
),
),
After and before pressed result->
when you pressed the button result->

Answer 3

Try this :
RaisedButton(
onPressed: () {},
child: Text("Test"),
highlightColor: YOUR_PRESSED_COLOR, //Replace with actual colors
color: IDLE_STATE_COLOR,
),

Answer 4

ElevatedButton(
child: Text('Elevated Button', style: TextStyle(color: Colors.black),),
onPressed: () {
},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.resolveWith<Color>(
(Set<MaterialState> states) {
if (states.contains(MaterialState.pressed)) return Colors.white;
return Colors.yellow;
},
),
),
)
You can use like this.