CODEWITHSUNDEEP
flutterflutter-layout
Juan Carlos Mavesoy Orozco
Juan Carlos Mavesoy Orozco

Reputation: 87

How do I make the button shown below in flutter

I want to put one button on top of another, but when I click on one of them the other becomes opaque and vice versa. How do i do it? strong textenter image description here

Upvotes: 0

Views: 47

Answers (2)

S4nj33v
S4nj33v

Reputation: 459

Try the below code... In the given code on tapping button1, button1 becomes grey and button2 gets a background color, vice-versa.

class _MyHomePageState extends State<MyHomePage> {
  bool buttonState = false;

  void _buttonChange() {
    setState(() {
      buttonState = !buttonState;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Change Button State'),
        ),
        body: Center(
            child: Column(
          children: <Widget>[
            MaterialButton(
              onPressed: buttonState ? null : _buttonChange,
              child: Text("button1"),
              color: Colors.greenAccent,
            ),
            MaterialButton(
              onPressed: buttonState ? _buttonChange : null,
              child: Text("button2"),
              color: Colors.greenAccent,
            ),
          ],
        )));
  }
}

Upvotes: 1

Newcoder
Newcoder

Reputation: 23

Hi Juan what you want to use is a TabBar and not two buttons, just use the tab bar and style it appropriately

Upvotes: 0

Related Questions