重叠两个按钮 Flutter

Question

我是新来的颤振。我创建了两个凸起的按钮。两者都被创建为小部件，然后在主 Scaffold 小部件中被调用。我希望它们相互重叠。我正在尝试堆栈小部件，但随后缺少一个按钮。我也尝试过填充和定位，但没有任何效果。我不想使用切换按钮，因为它们只是彼此相邻放置并且没有重叠。

代码

Widget business(context, setState) {


 
      return
          Padding(
            padding: const EdgeInsets.only(left: 12.0),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(25.0),
              child: SizedBox(
                height: 60,
                width: 60,
                child: RaisedButton(
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(25.0),
                      side: BorderSide(color: button2 ? primaryColor : Colors.white)
                  ),

                  color: button1 ? primaryColor : Colors.white,
                  onPressed: () {
                    setState(() {
                      button1 = true;
                      button2 = false;
                    });

                    Fluttertoast.showToast(
                      msg:
                      "Business",
                      toastLength: Toast.LENGTH_SHORT,
                      gravity: ToastGravity.BOTTOM,
                      timeInSecForIosWeb: 4,
                      backgroundColor: primaryColor,
                      textColor: Colors.white,
                      fontSize: 16.0,
                    );
                  },
                  child: Icon(
                    MyFlutterApp.office,
                    color: button1 ? Colors.white : Colors.black,
                  ),
                ),
              ),
            ),
          );

    }

    else {
      return Container();
    }
  

  Widget personal(context, setState) {


    
      return
        Padding(
          padding: const EdgeInsets.only(left: 12.0),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(25.0),
            child: SizedBox(
              height: 60,
              width: 60,
              child: RaisedButton(
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(25.0),
                    side: BorderSide(color: button1 ? primaryColor : Colors.white)
                ),

                color: button2 ? primaryColor : Colors.white,
                onPressed: () {
                  setState(() {
                    button1 = false;
                    button2 = true;
                  });

                  Fluttertoast.showToast(
                    msg:
                    "Personal",
                    toastLength: Toast.LENGTH_SHORT,
                    gravity: ToastGravity.BOTTOM,
                    timeInSecForIosWeb: 4,
                    backgroundColor: primaryColor,
                    textColor: Colors.white,
                    fontSize: 16.0,
                  );
                },
                child: Icon(
                  MyFlutterApp.personal,
                  color: button2 ? Colors.white : Colors.black,
                ),
              ),
            ),
          ),
        );

    }

    else {
      return Container();
    
  }

Answer 1

基于Flutter Oficial Documentation，可以使用Stack小部件来实现这个效果。 Here 是关于这个小部件的快速教程。

使用RaisedButton，请始终记住从上方按钮中删除高度，以免造成黑色叠加印象。

这是一个例子：

Stack(
  children: <Widget>[
    RaisedButton(
      onPressed: () => {},
      color: Colors.red,
      child: Text('First'),
    ),
    RaisedButton(
      onPressed: () => {},
      color: Colors.transparent,
      elevation: 0,
      child: Text('Second'),
    ),
  ],
)

这里是result。

Answer 2

我可以给你最小的堆栈复制代码，我可以给你

Stack(
  children: [
    Icon(
      Icons.shopping_cart,
    ),
    
      Positioned(
        right: 0,
        top: 0,
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20),
            color: Colors.red,
          ),
          child: Padding(
            padding: const EdgeInsets.all(2),
            child: Text(
              _bookModel.conutCart.toString(),
              style: TextStyle(
                color: Colors.white,
                fontSize: 8.0,
              ),
            ),
          ),
        ),
      ),
  ],
),