How to I change the disabled color of an ElevatedButton

Question

I am using Flutter ElevatedButton, which is recommended over RaisedButton in the docs.

In raised button, you could specify and disabledColor. In ElevatedButton, I can not.

How can I stylize what the ElevatedButton looks like when it is disabled?

score 37 · Accepted Answer · answered Nov 25 '20 at 01:27

You can copy paste run full code below
You can use ButtonStyle and check states.contains(MaterialState.disabled) return color you need
In demo code, disabled color is green
code snippet

    ElevatedButton(
      onPressed: null,
      child: Text('Submit disable'),
      style: ButtonStyle(
        backgroundColor: MaterialStateProperty.resolveWith<Color>(
          (Set<MaterialState> states) {
            if (states.contains(MaterialState.pressed))
              return Theme.of(context)
                  .colorScheme
                  .primary
                  .withOpacity(0.5);
            else if (states.contains(MaterialState.disabled))
              return Colors.green;
            return null; // Use the component's default.
          },
        ),
      ),
    ),

working demo

full code

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: null,
              child: Text('Submit disable'),
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.resolveWith<Color>(
                  (Set<MaterialState> states) {
                    if (states.contains(MaterialState.pressed))
                      return Theme.of(context)
                          .colorScheme
                          .primary
                          .withOpacity(0.5);
                    else if (states.contains(MaterialState.disabled))
                      return Colors.green;
                    return null; // Use the component's default.
                  },
                ),
              ),
            ),
            ElevatedButton(
              onPressed: () {
                print("clicked");
              },
              child: Text('Submit enable'),
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.resolveWith<Color>(
                  (Set<MaterialState> states) {
                    if (states.contains(MaterialState.pressed))
                      return Theme.of(context)
                          .colorScheme
                          .primary
                          .withOpacity(0.5);
                    else if (states.contains(MaterialState.disabled))
                      return Colors.green;
                    return null; // Use the component's default./ Use the component's default.
                  },
                ),
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

score 13 · Answer 2 · answered May 17 '21 at 09:26

13

A simple solution would be to use onSurface property:

ElevatedButton(
  onPressed: null,
  style: ElevatedButton.styleFrom(
    onSurface: Colors.brown,
  ),
  child: Text('Button'),
)

answered May 17 '21 at 09:26

iDecode

22,623
19
99
186

iDecode, thanks for the answer. But how can I change the disabled state text color? – Aminul Haque Aome Jun 15 '21 at 05:24
@AminulHaqueAome You should then use `ButtonStyle.foregroundColor` instead of `ElevatedButton.styleFrom`. – iDecode Jun 15 '21 at 08:25

score 9 · Answer 3 · answered Nov 20 '22 at 16:12

9

Try This:

style: ElevatedButton.styleFrom(
                  disabledBackgroundColor:
                      Theme.of(context).primaryColor.withOpacity(.8), // Background Color
                  disabledForegroundColor: Colors.white70, //Text Color
                ),

answered Nov 20 '22 at 16:12

Gautam Tikha

91
1
3

3

this simple answer need more vote – aldo Jan 28 '23 at 01:55
This simple answer works – devqmr Feb 23 '23 at 14:22

score 3 · Answer 4 · answered Dec 13 '21 at 15:10

use onSurface in ElevatedButton.styleFrom

 ElevatedButton(
          style: ElevatedButton.styleFrom(
                   primary: Colors.white,
                   onSurface: Colors.green,
          ),
          child: Text("next"),
          onPressed:null
 )

score 0 · Answer 5 · answered Nov 24 '20 at 22:05

0

Use button's style property. It contains backgroundColor of MaterialStateProperty<Color>. There is a constant MaterialState.disabled. I think this is what you need. https://api.flutter.dev/flutter/material/MaterialStateProperty-class.html

answered Nov 24 '20 at 22:05

BambinoUA

6,126
5
35
51

score 0 · Answer 6 · answered Feb 19 '21 at 16:24

I created some code to handle disabledText and disabledColor for both FlatButton and RaisedButton with the new TextButton and ElevatedButton widgets.

This gist is here (I couldn't get dartpad to recognize the gist... but you can copy and paste it there directly and it works... it just won't link) https://gist.github.com/wterrill/7942b4bf5d74a8b2ace952ebf213fe5d

And here's the code itself if you want to copy and paste from here:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final bool disableButton = true; // <-- Change this to see buttons disabled
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              FlatButton(
                  child: Text("FlatButton"),
                  onPressed: disableButton
                      ? null
                      : () {
                          print("FlatButton normal");
                        },
                  color: Colors.green,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(
                        Radius.circular(50),
                      ),
                      side: BorderSide(color: Colors.purple, width: 3.0)),
                  disabledColor: Colors.grey,
                  disabledTextColor: Colors.pink),
              SizedBox(height: 25),
              FlatButtonX(
                  childx: Text("TextButton"),
                  onPressedx: disableButton
                      ? null
                      : () {
                          print("FlatButtonX (TextButton)");
                        },
                  colorx: Colors.green,
                  textColorx: Colors.black,
                  shapex: RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(
                        Radius.circular(50),
                      ),
                      side: BorderSide(color: Colors.purple, width: 3.0)),
                  disabledColorx: Colors.grey,
                  disabledTextColorx: Colors.pink),
              SizedBox(height: 100),
              RaisedButton(
                child: Text('RaisedButton'),
                color: Colors.green,
                textColor: Colors.black,
                onPressed: disableButton
                      ? null
                      : () {
                          print("RaisedButton normal");
                        },
                shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(
                        Radius.circular(50),
                      ),
                      side: BorderSide(color: Colors.purple, width: 3.0)),
                disabledColor: Colors.grey,
                  disabledTextColor: Colors.pink,
              ),
              SizedBox(height: 25),
              RaisedButtonX(
                childx: Text('ElevatedButton'),
                colorx: Colors.green,
                textColorx: Colors.black,
                onPressedx:disableButton
                      ? null
                      : () {
                          print("RaisedButtonX (ElevatedButton)");
                        },
                shapex: RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(
                        Radius.circular(50),
                      ),
                      side: BorderSide(color: Colors.purple, width: 3.0)),
                                  disabledColorx: Colors.grey,
                  disabledTextColorx: Colors.pink,
              )
            ],
          ),
        ),
      ),
    );
  }
}

Widget FlatButtonX(
    {Color colorx,
    @required Widget childx,
    RoundedRectangleBorder shapex,
    @required Function onPressedx,
    Key keyx,
    Color disabledColorx,
    Color disabledTextColorx,
    Color textColorx}) {
  if (disabledTextColorx == null && textColorx == null) {
    disabledTextColorx = colorx;
  }
  if (textColorx == null) {
    textColorx = colorx;
  }
  return TextButton(
      key: keyx,
      style: ButtonStyle(
        foregroundColor: MaterialStateProperty.resolveWith<Color>(
          // text color
          (Set<MaterialState> states) => states.contains(MaterialState.disabled)
              ? disabledTextColorx
              : textColorx,
        ),
        backgroundColor: MaterialStateProperty.resolveWith<Color>(
          // background color    this is color:
          (Set<MaterialState> states) =>
              states.contains(MaterialState.disabled) ? disabledColorx : colorx,
        ),
        shape: MaterialStateProperty.all(shapex),
      ),
      onPressed: onPressedx as void Function(),
      child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8.0), child: childx));
}

Widget RaisedButtonX(
    {Color colorx,
    @required Widget childx,
    RoundedRectangleBorder shapex,
    @required Function onPressedx,
    Key keyx,
    Color disabledColorx,
    Color disabledTextColorx,
    Color textColorx}) {
  if (disabledTextColorx == null && textColorx == null) {
    disabledTextColorx = colorx;
  }
  if (textColorx == null) {
    textColorx = colorx;
  }
  return ElevatedButton(
      key: keyx,
      style: ButtonStyle(
        foregroundColor: MaterialStateProperty.resolveWith<Color>(
          // text color
          (Set<MaterialState> states) => states.contains(MaterialState.disabled)
              ? disabledTextColorx
              : textColorx,
        ),
        backgroundColor: MaterialStateProperty.resolveWith<Color>(
          // background color    this is color:
          (Set<MaterialState> states) =>
              states.contains(MaterialState.disabled) ? disabledColorx : colorx,
        ),
        shape: MaterialStateProperty.all(shapex),
      ),
      onPressed: onPressedx as void Function(),
      child: childx);
}

score 0 · Answer 7 · answered Jul 26 '22 at 14:33

Because the original disabled color has opacity you can simply wrap it in a container and give the container the color you want. It's a bit hacky but it works and is fast done. Especialy if you have many buttons with different colors.

The cleanest way would be a custom button widget where you can handover the parameters you need.

Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(const Radius.circular(radius)),
          color: containerColor,
        ),
        width: containerWidth,
        height: containerHeight,
        child: ElevatedButton(
          onPressed: bool ? onPressed : null,
          child: Text(
            buttonText,
          ),
        ),
      ),

Make all variables nullable which are not allways needed.

How to I change the disabled color of an ElevatedButton

7 Answers7