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

Solution 1: Rajshekhar

I think you are talking about paralax behavior. Flutter already provides a widget for this. You can use 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: () { /* ... */ }, ), ] )

Solution 2: qix

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)?
  final double height;

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

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

  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. E.g. you can also condition it on the child's Key inside the transitionBuilder you supply if needed.