Raised Button Replacement Flutter Update

Question

I have the problem that the Raised Button is no longer a usable Button in Flutter so I have to replace it with a elevated Button for example.

But when I try to convert it to an elevated Button it gives me an error with the color and shape Property. They seem to belong to the: style Button Style() but I can't convert them. Can someone help me with that.

The code for the Raised Button was:

Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 40.0),
                  child: RaisedButton(
                    child: Text(
                      "Gruppen Id kopieren",
                      style: TextStyle(
                        color: Colors.white,
                      ),
                    ),
                    onPressed: () => _copyGroupId(context),
                    color: Color.fromRGBO(245, 168, 0, 1),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(20.0),
                      side: BorderSide(
                        color: Theme.of(context).secondaryHeaderColor,
                        width: 2,
                      ),
                    ),
                  ),
                ),

score 0 · Answer 1 · answered Sep 01 '22 at 17:19

You can set ButtonStyle for ElevatedButton which uses MaterialStateProperty. Now you can set color (or other properties) by checking the state, for example if button is disabled, use

backgroundColor: MaterialStateProperty.resolveWith<Color>(
   (Set<MaterialState> states) {
      if (states.contains(MaterialState.disabled)) {
         return Colors.grey.shade600;
      }
      return Color.fromRGBO(245, 168, 0, 1);
   },
),

or you can set a color for all the states like this:

ElevatedButton(
   style: ButtonStyle(
     shape: MaterialStateProperty.resolveWith(
       (states) => RoundedRectangleBorder(
         borderRadius: BorderRadius.circular(20.0),
         side: BorderSide(
           color: Theme.of(context)
               .secondaryHeaderColor,
           width: 2,
         ),
       ),
     ),
     backgroundColor: MaterialStateProperty.all(
       const Color.fromRGBO(245, 168, 0, 1),
     ),
   ),
   onPressed: () => _copyGroupId(context),
   child: const Text(
     "Gruppen Id kopieren",
     style: TextStyle(
       color: Colors.white,
     ),
   ),
),

score 0 · Answer 2 · answered Sep 01 '22 at 17:23

You can check the buttons#context

So now instead of RaisedButton we need to useElevatedButton

Similarly, to make an ElevatedButton look like a default RaisedButton:

final ButtonStyle raisedButtonStyle = ElevatedButton.styleFrom(
  onPrimary: Colors.black87,
  primary: Colors.grey[300],
  minimumSize: Size(88, 36),
  padding: EdgeInsets.symmetric(horizontal: 16),
  shape: const RoundedRectangleBorder(
    borderRadius: BorderRadius.all(Radius.circular(2)),
  ),
);
ElevatedButton(
  style: raisedButtonStyle,
  onPressed: () { },
  child: Text('Looks like a RaisedButton'),
)

Ref and from restoring-the-original-button-visuals

Raised Button Replacement Flutter Update

2 Answers2