9

I just updated flutter to 2.0, and I realized all the back buttons disappeared if the appbar also conatains an endDrawer

Appbar with endDrawer

I tried to get rid of the endDrawer, the back button shows up, just not together with the endDrawer, it wasn't like that before the update, anybody knows how to solve this?

Appbar without endDrawer

my code:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Page1(),
    );
  }
}

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Center(
            child: TextButton(
          child: Text(
            'Page 1',
            style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.bold),
          ),
          onPressed: () {
            Navigator.push(
                context, MaterialPageRoute(builder: (context) => Page2()));
          },
        )),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Demo'),
      ),
      body: Container(
        child: Center(
          child: TextButton(
          child: Text(
            'Page 2',
            style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.bold),
          ),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
        ),
      ),
      endDrawer: Drawer(),
    );
  }
}
qwea
  • 476
  • 1
  • 5
  • 16

2 Answers2

12

This is current behavior in version 2.0, if condition also check !hasEndDrawer
version 1.17

if (canPop)
          leading = useCloseButton ? const CloseButton() : const BackButton();

https://github.com/flutter/flutter/blob/aee9e94c21009bfc6c08f442eacde06f001c25f9/packages/flutter/lib/src/material/app_bar.dart#L510

version 2.0

if (!hasEndDrawer && canPop)
      leading = useCloseButton ? const CloseButton() : const BackButton();

https://github.com/flutter/flutter/blob/ca2bef6ee915d943b5a160055b5065ec3391f19a/packages/flutter/lib/src/material/app_bar.dart#L793

You can add your own logic in leading
code snippet

appBar: AppBar(
        leading: Builder(
          builder: (BuildContext context) {
            final ScaffoldState scaffold = Scaffold.maybeOf(context);
            final ModalRoute<dynamic> parentRoute = ModalRoute.of(context);
            final bool hasEndDrawer = scaffold?.hasEndDrawer ?? false;
            final bool canPop = parentRoute?.canPop ?? false;

            if (hasEndDrawer && canPop) {
              return BackButton();
            } else {
              return SizedBox.shrink();
            }
          },
        ),
        title: Text('Page 2'),
      ),

working demo

enter image description here

full code

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Page1(),
    );
  }
}

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Center(
            child: TextButton(
          child: Text(
            'Page 1',
            style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.bold),
          ),
          onPressed: () {
            Navigator.push(
                context, MaterialPageRoute(builder: (context) => Page2()));
          },
        )),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Builder(
          builder: (BuildContext context) {
            final ScaffoldState scaffold = Scaffold.maybeOf(context);
            final ModalRoute<dynamic> parentRoute = ModalRoute.of(context);
            final bool hasEndDrawer = scaffold?.hasEndDrawer ?? false;
            final bool canPop = parentRoute?.canPop ?? false;

            if (hasEndDrawer && canPop) {
              return BackButton();
            } else {
              return SizedBox.shrink();
            }
          },
        ),
        title: Text('Page 2'),
      ),
      body: Container(
        child: Center(
          child: TextButton(
            child: Text(
              'Page 2',
              style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.bold),
            ),
            onPressed: () {
              Navigator.pop(context);
            },
          ),
        ),
      ),
      endDrawer: Drawer(),
    );
  }
}
chunhunghan
  • 51,087
  • 5
  • 102
  • 120
12

Just add this to your AppBar/SliverAppBar

      leading: (ModalRoute.of(context)?.canPop ?? false) ? BackButton() : null,
Abdul Rahman
  • 1,833
  • 1
  • 21
  • 21