Place an IconButton on the top right corner of your scaffold

Question

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?

Answer 1

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.

Answer 2

Here the MyHomePage class is the AppBar you need for your Scaffold. All you need to do is change the icon.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: MyHomePage(),
        drawer: Container(
          width: 100,
          color: Colors.red,
        ),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget implements PreferredSizeWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Container(
        color: Colors.transparent,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            AppBarAction(),
          ],
        ),
      ),
    );
  }

  @override
  Size get preferredSize => Size.fromHeight(60);
}

class AppBarAction extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: Icon(Icons.print),
      onPressed: () {
        Scaffold.of(context).openDrawer();
      },
    );
  }
}