CODEWITHSUNDEEP
flutterdart
ali262883
ali262883

Reputation: 369

Overlap two buttons Flutter

I am new to flutter. I have created two raised buttons. Both are created as widgets which are then being called in the main Scaffold widget. I want them to overlap with each other. I am trying the stack widget but then one button goes missing. I have also tried padding and positioning but nothing works. I do not want to use toggle buttons as those are just placed next to each other and are not overlapped.

Code


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();
    
  }

enter image description here

Upvotes: 1

Views: 1747

Answers (2)

Abhishek Ghaskata
Abhishek Ghaskata

Reputation: 1960

I have minimal reproduction code of stack in flutter which I can give you

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

Upvotes: 0

Patrick Freitas
Patrick Freitas

Reputation: 751

Based on Flutter Oficial Documentation, you can use the Stack widget to achieve this effect. Here is a quick tutorial about this widget.

Using RaisedButton, always remember to remove the elevation from the upper buttons, to not cause a black overlay impression.

Here is a example:

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

Here is the result.

Upvotes: 1

Related Questions