Overlap two buttons Flutter - flutter

Question

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

Answer 1

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.

Answer 2

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