How to add Back Button without using AppBar in Flutter?

Question

I wanted to add a back button on my appBar and wanted to make the appBar transparent so that it shows only the back button.

Answer 1

Simran, this is a little tricky but it is possible with the combination of Stack, SingleChildScrollView and AppBar. Here is quick example demonstrating this,

return Scaffold(
              body: Stack(children: <Widget>[
                Container(
                  color: Colors.white,// Your screen background color
                ),
                SingleChildScrollView(
                    child: Column(children: <Widget>[
                      Container(height: 70.0),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                      buildRow('This is test row.'),
                    ])
                ),
                new Positioned(
                  top: 0.0,
                  left: 0.0,
                  right: 0.0,
                  child: AppBar(
                    title: Text(''),// You can add title here
                    leading: new IconButton(
                      icon: new Icon(Icons.arrow_back_ios, color: Colors.grey),
                      onPressed: () => Navigator.of(context).pop(),
                    ),
                    backgroundColor: Colors.blue.withOpacity(0.3), //You can make this transparent
                    elevation: 0.0, //No shadow
                  ),),
              ]),
              );

Note: You can make the AppBar completely transparent. However, you'll need to design your widgets accordingly to make sure back button is visible. In the example above, i just set the opacity.

Hope this helps. Good luck!

Answer 2

Just WRAP your widget into a Stack and then add an IconButton on top of the Stack and Navigator.pop(context) on button onPressed(). That should solve your problem.

return Stack(
    alignment: Alignment.topLeft,
    children: <Widget>[
      YourScrollViewWidget(),
      IconButton(
        icon: Icon(Icons.arrow_back),
        onPressed: (){
          Navigator.pop(context);
        },
      )
    ],
  );