Is there a way to exclude a BottomAppBar from animations in Flutter?

Question

I tried to wrap it in a Hero widget, as that should achieve what I want. This works with BottomNavigationBar, but not with BottomAppBar, which gives this error: Scaffold.geometryOf() called with a context that does not contain a Scaffold. I tried to give it a context by using Builder, but that did not work either. Here is a sample app to showcase the behaviour:

void main() {
  runApp(
    MaterialApp(
      home: PageOne(),
    ),
  );
}

Widget _bottomNavigationBar() {
  return BottomNavigationBar(items: [
    BottomNavigationBarItem(icon: Icon(Icons.menu), title: Text('menu')),
    BottomNavigationBarItem(icon: Icon(Icons.arrow_back), title: Text('back')),
  ]);
}

Widget _bottomAppBar() {
  return BottomAppBar(
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        IconButton(icon: Icon(Icons.menu), onPressed: null),
        IconButton(icon: Icon(Icons.arrow_back), onPressed: null),
      ],
    ),
  );
}

class PageOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: Hero(
        tag: 'bottomNavigationBar',
        child: _bottomAppBar(),
      ),
      body: Center(
        child: IconButton(
          iconSize: 200,
          icon: Icon(Icons.looks_two),
          onPressed: () => Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => PageTwo()),
          ),
        ),
      ),
    );
  }
}

class PageTwo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: Hero(
        tag: 'bottomNavigationBar',
        child: _bottomAppBar(),
      ),
      body: Center(
        child: IconButton(
          iconSize: 200,
          icon: Icon(Icons.looks_one),
          onPressed: () => Navigator.pop(context),
        ),
      ),
    );
  }
}

William Terrill · Answer 1 · 2020-02-24T04:02:31.853

The problem seems to be the animation that is used with the Navigation stack. Therefore, getting rid of the animation during the page load will stop this animation. I added the PageRouteBuilder to the PageOne class in your example to get rid of the Navigation stack animation. Use the code below to replace the PageOne class from your example.

class PageOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: _bottomAppBar(),
      body: Center(
        child: IconButton(
          iconSize: 200,
          icon: Icon(Icons.looks_two),
          onPressed: () => Navigator.push(
            context,
            PageRouteBuilder(
              pageBuilder: (context, anim1, anim2) => PageTwo(),
              transitionsBuilder: (context, anim1, anim2, child) =>
                  Container(child: child),
            ),
          ),
        ),
      ),
    );
  }
}

There are additional ways to control the animation for Navigation here (Oh, and I got rid of the Hero() widget)

Sarunas Djacenko · Answer 2 · 2020-02-24T10:34:23.150

0

I have solved this by wrapping the Row with a Hero widget in BottomAppBar. This still allows page transitions, and does not animate the BottomAppBar as intended.

BottomAppBar(
  child: Hero(
    tag: 'bottomAppBar',
    child: Material(
      child: Row(
        ...
      ),
    ),
  ),
);

However, this has laggy animations when using a CircularNotchedRectangle.

edited Feb 24 '20 at 10:34

answered Feb 24 '20 at 08:29

Sarunas Djacenko

21
2

Is there a way to exclude a BottomAppBar from animations in Flutter?

2 Answers2