Ad

Disable Evaluated Button Animation On Tap / Click

- 1 answer

How can I disable the animation of an Evaluated Button while tapping.

I tried it with ElevatedButton.styleFrom, but I can't find the property for that:

style: ElevatedButton.styleFrom(
          primary: const Color(0xFF232441),
          padding: EdgeInsets.symmetric(vertical: 15),
          onPrimary: AppColors.PrimaryTextColor,
          shape: RoundedRectangleBorder(
              side: isSelected
                  ? BorderSide(color: Colors.white, width: 3)
                  : BorderSide(color: AppColors.DayButtonColor, width: 0),
              borderRadius: BorderRadius.circular(10.0)))),
Ad

Answer

when u are using the ElevatedButton.styleFrom method it is a factory method and constructs ButtonStyle with simple inputs but a low degree of customization you could create ButtonStyle from scratch that gives you high-level access to customize the button or also the simple way you can use the copy with on the button style object that is constructed by the ElevatedButton.styleFrom method here is the code that's when isSelected is true button elevation doesn't animate when you press it

ElevatedButton(
            child: Text("Click"),
            onPressed: () => print("is pressing"),
            style: ElevatedButton.styleFrom(
              primary: const Color(0xFF232441),
              padding: EdgeInsets.symmetric(vertical: 15),
              onPrimary: Colors.pink,
              shape: RoundedRectangleBorder(
                side: isSelected
                    ? BorderSide(color: Colors.white, width: 3)
                    : BorderSide(color: Colors.green, width: 0),
                borderRadius: BorderRadius.circular(10.0),
              ),
            ).copyWith(
              elevation: MaterialStateProperty.resolveWith(
                (states) {
                  double defaultElevation=3;
                  if (states.contains(MaterialState.disabled)) return 0;
                  else if (states.contains(MaterialState.hovered)) return 2;
                  else if (states.contains(MaterialState.focused)) return 2;
                  else if (states.contains(MaterialState.pressed)) {
                    if (isSelected)
                      return defaultElevation;
                    else
                      return 6;
                  }
                  return defaultElevation;
                },
              ),
            ),
          )
Ad
source: stackoverflow.com
Ad