Flutter - Changing color of RaisedButton on press

Question

Everything I have read about this suggests you can do this work with SetState. This is what I have been using and it will just not redraw.

class ServerSelectionState extends State<ServerSelection> {

  bool server1Selected, server2Selected, server3Selected = false;

  @override
  void initState() {
    setState(() {
      server1Selected= false;
      server2Selected= false;
      server3Selected= false;
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
    //Basically have an onTap method from a ListTile that opens a dialog, like this:  
    onTap: () {
      showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            backgroundColor: greyTheme,
            content: Form(
              child: Container(
                children: <Widget>[
                  ButtonTheme(
                    child: RaisedButton(
                      onPressed: (){
                        if (!mounted) return;
                          setState(() {
                            server1Selected = true;
                            server2Selected = false;
                            server3Selected = false;
                          });
                        },
                        color: server1Selected == true ? Colors.pink : Colors.blue,
                        child: Text(
                          'Server 1',
                          style: TextStyle(
                            color: Colors.red,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          }
       );
     }

This will update the button colour just fine on a hot reload, but until then it doesn't seem like it is happy doing a redraw. The if (!mounted) section prevents an error that I was seeing about dispose being called before redraw, or similar, and print outputs this is working, it is changing the state of the booleans correctly, it just doesn't actually update the colour until you force the widget to redraw.

Answer 1

showDialog directly can not change the value, but to do so your dialog must be stateful widget.

As it can be seen from your code, you have to create another stateful widget which return whole alert dialog something like below code.

you have to pass all the variables which require in new stateful widget.

import 'package:flutter/material.dart';

class Homestack extends StatefulWidget {
  @override
  _HomestackState createState() => _HomestackState();
}

class _HomestackState extends State<Homestack> {


  String dropdownValue ;

  @override
  Widget build(BuildContext context) {

    return new Container(
      color: Colors.blue,
        padding: const EdgeInsets.all(20),
        child: GestureDetector(
          child: new Text("Tap ME!"),
          onTap: (){
            return showDialog(
                context: context,
                builder: (context){
                  return xyz(
                    server3Selected: false,
                    greyTheme: Colors.blueAccent,
                    server1Selected: false,
                    server2Selected: false,
                  );
                }
            );
          },
        )
    );

  }
}



class xyz extends StatefulWidget {

    Color greyTheme ;
    bool server1Selected;
    bool server2Selected;
    bool server3Selected;

    xyz({Key key, this.greyTheme,this.server1Selected,this.server2Selected,this.server3Selected}): super(key: key);

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

  class _xyzState extends State<xyz> {
    @override
    Widget build(BuildContext context) {
      return AlertDialog(
        backgroundColor: widget.greyTheme,
        content: Form(
          child: Column(
            children: <Widget>[
              ButtonTheme(
                child: RaisedButton(
                  onPressed: (){
                    if (!mounted) return;
                    setState(() {
                      widget.server1Selected = true;
                      widget.server2Selected = false;
                      widget.server3Selected = false;
                    });
                  },
                  color: widget.server1Selected == true ? Colors.pink : Colors.blue,
                  child: Text(
                    'Server 1',
                    style: TextStyle(
                      color: Colors.red,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      );
    }
  }