Flutter - How to change background color of Elevated Button

In flutter, previously we were using RaisedButton but now in the latest version of flutter RaisedButton deprecated. So now instead of RaisedButton we can use ElevatedButton.

Properties of ElevatedButton:

ElevatedButton({
    Key? key,
    required VoidCallback? onPressed,
    VoidCallback? onLongPress,
    ValueChanged<bool>? onHover,
    ValueChanged<bool>? onFocusChange,
    ButtonStyle? style,
    FocusNode? focusNode,
    bool autofocus = false,
    Clip clipBehavior = Clip.none,
    required Widget? child,
  }) 

In ElevatedButton we can easily change the color of the background using the style's primary properties. You can see the below example.

  ElevatedButton(
              child: Text('Elevated Button'),
              style: ElevatedButton.styleFrom(
                primary: Colors.pink,//Change color here
              ),
              onPressed: () {},
            ),

Full Example:

class Errorgram extends StatefulWidget {
  const Errorgram({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  State<Errorgram> createState() => _ErrorgramState();
}

class _ErrorgramState extends State<Errorgram> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("Errorgram",style:TextStyle(color:Colors.black),),//Change color here
      ),
      body: Container(
        margin: EdgeInsets.only(left: 10,right: 10),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              child: Text('Errorgram'),
              style: ElevatedButton.styleFrom(
                primary: Colors.pink,
              ),
              onPressed: () {},
            ),
          ],
        ),
      ),

    );
  }
}

I hope you like this article and it will be help to you.

 

Tags: