How to make Flutter RaisedButton selected state

Question

How to make RaisedButton as selected state as in toggle button selected state?

How to make RaisedButton not taking extra width, i.e, shrimpWrap the label text.

Answer 1

I believe I have managed to do the same thing without using RaisedButton.

From my understanding you are trying to make RaisedButton switch between two cases in your first question, you can achieve this by alternating between the two States when onPressed is called.

However, in order to answer your second question as well, I used a Container instead of a RaisedButton , this Container acts now as a Button and when tapped, it switches between states. And the Container will be sizing itself to its child, which is the Text that has a changing state in my example (The String and Color values).

Finally, in order to give this Container a similar behavior to the press functionality of the RaisedButton, I wrapped it within a GestureDetector, and controlled the change of the state inside onTap call.

Here is my full code:

import 'package:flutter/material.dart';


void main() {
  runApp(new MaterialApp(
      home: new MyApp()));
}

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new _MyAppState();
  }
}

class _MyAppState extends State<MyApp> {
  Color _myColor = Colors.green;
  String _myAccountState = "Account Enabled";

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Manage Accounts"),
        centerTitle: true,
      ),
      body: new Center(
          child: new GestureDetector(
            child: new Container(
              decoration: new BoxDecoration(color: Colors.grey),
              child: new Text(
                _myAccountState, style: new TextStyle(color: _myColor),),
            ),
            onTap: () {
              setState(() {
                if (_myColor == Colors.green) {
                  _myAccountState = "Account Disabled";
                  _myColor = Colors.orange;
                }
                else {
                  _myAccountState = "Account Enabled";
                  _myColor = Colors.green;
                }
              });
            },

          )
      ),
    );
  }

}

PS: For a switch on/off behavior, you can definitely use RaisedButton and produce a similar behavior as follows:

return new Scaffold(
      appBar: new AppBar(
        title: new Text("Manage Accounts"),
        centerTitle: true,
      ),
      body: new Center(
        child: new Column(
          children: <Widget>[
            new Text(_myAccountState),
            new RaisedButton(
                child: new Text("Click Me"), color: _myColor, onPressed: () {
              setState(() {
                if (_myColor == Colors.green) {
                  _myAccountState = "Account Disabled";
                  _myColor = Colors.red;
                }
                else {
                  _myAccountState = "Account Enabled";
                  _myColor = Colors.green;
                }
              });
            })
          ],
        ),
      ),
    );

However, the only reason I tried using a Container with a GestureDetector is to answer your second question, I am not sure how to use shrinkWrap with a RaisedButton.