Weird issue with AppBar shadow while navigating

68 views Asked by At

I face an issue with my AppBar shadow when I navigate to a page and then pop back to the main page. The structure is :

  1. HomePage : Scaffold with custom sliding AppBar and PageView as body : - sliding AppBar is made of a Stack with some AppBar widgets as children, which appear with animation - PageView shows the pages content, and its controller is linked to the AppBar's animation
  2. SearchPage ==> access through tap on the FAB calling Navigator.push(context, MaterialPageRoute(builder: (context) => SearchPage()))

Here is the AppBar bug : if I go to the SearchPage and then pop back, the shadow becomes deeper each time, like if AppBar's elevation was growing... See GIF below :

enter image description here

This does not appear if I use standard AppBar instead of my custom sliding AppBar. Its code is here :

class MenuAppBar extends StatefulWidget implements PreferredSizeWidget
{
    final PageController pageController;
    final List<Widget> children;

    MenuAppBar({@required this.pageController, @required this.children});

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

    @override
    State<StatefulWidget> createState() => _MenuAppBarState();
}

class _MenuAppBarState extends State<MenuAppBar> with SingleTickerProviderStateMixin
{
    final List<Widget> sliders = new List<Widget>();
    AnimationController _animationController;

    @override
    void initState()
    {
        super.initState();

        this._animationController = new AnimationController(upperBound: widget.children.length.toDouble() - 1, vsync: this);
        widget.pageController.addListener(_onPageSwitch);
    }

    void _onPageSwitch()
    {
        this._animationController.value = widget.pageController.page;
    }

    @override
    Widget build(BuildContext context)
    {
        for(int i = 0; i < widget.children.length; i++)
        {
            this.sliders.add(this._buildSlider(index: i.toDouble(), child: widget.children[i]));
        }
        
        return Stack(children: this.sliders);
    }

    Widget _buildSlider({double index, Widget child})
    {
        return SlideTransition(
            position: Tween<Offset>(
                begin: Offset(index, 0),
                end: Offset(index - 1, 0)
            ).animate(this._animationController),
            child: child
        );
    }
}

Any idea of what could go wrong ? :(

Thanks !

1

There are 1 answers

0
Galactose On

Well, seems not very inspiring... Yet someone gave me some advice and it solved the problems, which may appear as a bug in the framework.

What solved the issue was to define a SlideTransitionWidget which manages its own Tween and receive a child Widget and an AnimationController. I think it may change the way AppBar are build taking into account animation/transition while navigating, I don't really know.