how to make button together on flutter

user_16411631 0
Viewed 55

Hello i have some problem, I need to make button together on my flutter code Like this, but when i try on flutter it become like This, is there any way to make it like in first image?

heres my code for the button

Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                SizedBox(
                  width: 130,
                  height: 50,
                  child: TextButton(
                    style: ButtonStyle(
                        backgroundColor:
                            MaterialStateProperty.all(Colors.blue)),
                    onPressed: () {},
                    child: Text(
                      'Login',
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
                Expanded(
                    child: SizedBox(
                  width: 130,
                  height: 50,
                  
                  child: TextButton(
                      style: ButtonStyle(
                        backgroundColor:
                            MaterialStateProperty.all(Colors.white),
                            
                      ),
                      onPressed: () {},
                      child: Text(
                        'Daftar',
                        style: TextStyle(color: Colors.blue),
                      ),),
                ),
                ),
              ],
            ),
dart flutter android
2 Answers

enter image description here

var selectedButton = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          margin: EdgeInsets.all(16),
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(16),
              shape: BoxShape.rectangle,
              border: Border.all(color: Colors.blue, width: 3)),
          child: Row(
            children: [
              Expanded(
                  child: Container(
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(8),
                        shape: BoxShape.rectangle,
                        color: selectedButton == 0 ? Colors.blue : Colors.white),
                    child: TextButton(
                      onPressed: () {
                        setState(() {
                          selectedButton = 0;
                        });
                      },
                      style: TextButton.styleFrom(
                        primary: selectedButton == 0 ? Colors.white : Colors.blue,
                      ),
                      child: Text(
                        'TextButton',
                        style: TextStyle(fontSize: 16),
                      ),
                    ),
                  )),
              Expanded(
                  child: Container(
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(8),
                        shape: BoxShape.rectangle,
                        color: selectedButton == 1 ? Colors.blue : Colors.white),
                    child: TextButton(
                      onPressed: () {
                        setState(() {
                          selectedButton = 1;
                        });
                      },
                      style: TextButton.styleFrom(
                        primary: selectedButton == 1 ? Colors.white : Colors.blue,
                      ),
                      child: Text(
                        'TextButton',
                        style: TextStyle(fontSize: 16),
                      ),
                    ),
                  )),
            ],
          ),
        ),
      ),
    );
  }
user_166165830 
 Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        Container(
          width: 260,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              SizedBox(
                width: 130,
                height: 50,
                child: TextButton(
                  style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all(Colors.blue),
                    shape: MaterialStateProperty.all(
                      RoundedRectangleBorder(
                        borderRadius: BorderRadius.all(
                          Radius.circular(
                            15,
                          ),
                        ),
                      ),
                    ),
                  ),
                  onPressed: () {},
                  child: Text(
                    'Login',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
              SizedBox(
                width: 130,
                height: 50,
                child: TextButton(
                  style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all(Colors.white),
                  ),
                  onPressed: () {},
                  child: Text(
                    'Daftar',
                    style: TextStyle(color: Colors.blue),
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  ),
user_135261870
Related