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?

CodePudding user response：

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

CodePudding user response：

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