Search code examples
flutterflutter-scaffold

Place an IconButton on the top right corner of your scaffold


I want to place an Iconbutton in the top right corner of my Scaffold that programmatically opens a drawer. It should be the top right corner for every displaytype. Using an appbar would ruin the look of the page since I just need a small icon that shows that a drawer is available. How do I do this the best way? My Scaffold is a default one. How can I achieve this the best way?


Solution

  • You can achieve this using a Stack . Wrap the body of your Scaffold with a Stack widget and use the Positioned widget as the first child of the stack.

    GlobalKey<ScaffoldState> _scafKey = GlobalKey();
    
     @override
    Widget build(BuildContext context) {
    
    return SafeArea(
        child: Scaffold(
          key: _scafKey,
          drawer: YourDrawerWidget(),
          body: Stack(
            children: <Widget>[
              Positioned(
                  top: 0,
                  right: 0,
                  child: IconButton(
                      icon: Icon(Icons.short_text),
                      onPressed: (){
                        _scafKey.currentState.openDrawer();
                      })),
              Container(),
           ],
         ),
       ),
     );
    }
    

    Replace the container with your widget(the original body of the scaffold).

    And also the icon of the IconButton to your Icon.