Flutter right side floating actions bar - flutter

Question

I want to show this kind of side menu when I click button, like a drawer. It is only for specific screen control only not for every screen. May I know which control I can use.
There will be vertical slider and some buttons to control the page.
Should I use bottom sheet or dialog or floating action button? Or is there any library like side menu?

Answer 1

Please refer below code
double _value = 0.0;
#override
Widget build(BuildContext context) {
return Stack(
overflow: Overflow.visible,
children: [
Container(
color: Colors.white,
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Center(
child: Text("Example"),
),
),
Align(
alignment: Alignment.center,
child: Row(
children: [
Spacer(),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
margin: EdgeInsets.symmetric(
vertical: 3.0,
),
padding: EdgeInsets.symmetric(
horizontal: 9.0,
vertical: 12.0,
),
decoration: BoxDecoration(
color: Colors.black54,
borderRadius: BorderRadius.circular(
8.0,
),
),
child: Icon(
Icons.vibration_rounded,
color: Colors.blue,
size: 28.0,
),
),
Container(
margin: EdgeInsets.symmetric(
vertical: 5.0,
),
padding: EdgeInsets.symmetric(
horizontal: 0.0,
vertical: 12.0,
),
decoration: BoxDecoration(
color: Colors.black54,
borderRadius: BorderRadius.circular(
8.0,
),
),
child: Column(
children: [
SfSlider.vertical(
min: 0.0,
max: 100.0,
value: _value,
interval: 10,
showTicks: false,
showLabels: false,
enableTooltip: false,
minorTicksPerInterval: 1,
inactiveColor: Colors.white24,
onChanged: (dynamic value) {
setState(() {
_value = value;
});
},
),
Icon(
Icons.music_note_rounded,
color: Colors.blue,
size: 25.0,
),
SizedBox(
height: 12.0,
),
Icon(
Icons.settings,
color: Colors.white,
size: 25.0,
),
],
),
),
],
),
SizedBox(
width: 9.0,
),
],
),
),
],
);
}

Answer 2

You can use the stack to create a floating menu and also show or hide the floating menu with the Visibility widget.
bool showMenu = false;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Column(
children: <Widget>[
......................
],
),
Positioned(
top: 50.0,
left: 25.0,
child: Visibility(
child; YourFloatingMenu(),
visible: showMenu,
),
),
],
),
);
}