Place an IconButton on the top right corner of your scaffold

Issue

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.

Answered By – Tonny Baw

Answer Checked By – Dawn Plyler (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *