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 :

CodePudding user response：

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

CodePudding user response：

Try this :

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

CodePudding user response：

Try below code hope its help to you.

Refer

when you pressed the button result->

CodePudding user response：

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.