android - 如何在 flutter 上制作按钮

Question

你好，我有一些问题，我需要在我的 flutter 代码上制作按钮 Like this , 但是当我尝试 flutter 时，它变得像 This , 有没有办法让它像第一张图片一样？

这是我的按钮代码

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),
                      ),),
                ),
                ),
              ],
            ),

Answer 1

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),
                      ),
                    ),
                  )),
            ],
          ),
        ),
      ),
    );
  }