Appbar Transition Animation (Flutter)

Question

I am beginner for Flutter App Development, I want to know how can I make a app like the UI like those pictures I want to make a(an) UI which is when I scroll the page, the appbar can change itself color or change the contents.

Can someone let me know about what Widget I have to use or show the accurate step(codes) to do that?

Thank you very much

Answer 1

I think you are talking about paralax behavior. Flutter already provides a widget for this. You can use SliverAppbar.

SliverAppBar

SliverAppBar( expandedHeight: 150.0, flexibleSpace: const FlexibleSpaceBar( title: Text('Available seats'), ), actions: [ IconButton( icon: const Icon(Icons.add_circle), tooltip: 'Add new entry', onPressed: () { /*... */ }, ), ] )

Answer 2

SliverAppBar is the way to go for that type of dynamic app bar, but in case anyone lands here and only needs a fixed height bar, you could use an AnimatedSwitcher for changing just individual components inside, or if its easier for you to rebuild a new AppBar , you can use this simple wrapper with a builder function return to the appropriate AppBar, while setting the Scaffold 's appBar field to an instance of this:

class AnimatedAppBar extends StatelessWidget implements PreferredSizeWidget {
  final Widget Function() builder;
  final Widget Function(Widget child, Animation<double> animation)?
      transitionBuilder;
  final double height;

  const AnimatedAppBar(
      {Key? key,
      required this.builder,
      this.transitionBuilder,
      this.height = kToolbarHeight})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AnimatedSwitcher(
      transitionBuilder:
          transitionBuilder ?? AnimatedSwitcher.defaultTransitionBuilder,
      duration: const Duration(milliseconds: 300),
      child: builder(),
    );
  }

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

This still gives you a little flexibility in playing with the transition if you want something other than a cross-fade. Eg you can also condition it on the child's Key inside the transitionBuilder you supply if needed.