How can I have an animated SliverAppBar like this?

Question

I want these animation between to be smooth, I tried using AnimatedSize, AnimatedOpacity and AnimatedPositioned but there were few errors. And I don't know how to use these with SliverAppBar. In other examples I saw people using LayoutBuilder but they didn't share the full code so I couldn't test it. I will share my code snippet but it has a really odd transition between the two states.

I want CircleAvatar to become smaller and change position I want Icon(Icons.arrow_back) and Text('Previous Page') to disappear. I also want my name and job to disappear. I want that three Containers to become smaller and change position.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dialog Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: CustomScrollView(
          slivers: [
            SliverAppBar(
              elevation: 0,
              pinned: true,
              expandedHeight: 190,
              collapsedHeight: kToolbarHeight + 8,
              flexibleSpace: FlexibleSpaceBar(
                collapseMode: CollapseMode.none,
                centerTitle: true,
                titlePadding: EdgeInsetsDirectional.only(
                  start: 20.0,
                  end: 20.0,
                  top: 12.0,
                  bottom: 12.0,
                ),
                title: SafeArea(
                  child: Column(
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          CircleAvatar(
                            radius: 16,
                          ),
                          Row(
                            children: [
                              Container(
                                decoration: BoxDecoration(
                                  color: Colors.white10,
                                  borderRadius: BorderRadius.all(
                                    Radius.circular(12),
                                  ),
                                ),
                                padding: EdgeInsets.all(8.0),
                                child: Icon(Icons.person),
                              ),
                              SizedBox(
                                width: 8,
                              ),
                              Container(
                                decoration: BoxDecoration(
                                  color: Colors.white10,
                                  borderRadius: BorderRadius.all(
                                    Radius.circular(12),
                                  ),
                                ),
                                padding: EdgeInsets.all(8.0),
                                child: Icon(Icons.menu),
                              ),
                              SizedBox(
                                width: 8,
                              ),
                              Container(
                                decoration: BoxDecoration(
                                  color: Colors.white10,
                                  borderRadius: BorderRadius.all(
                                    Radius.circular(12),
                                  ),
                                ),
                                padding: EdgeInsets.all(8.0),
                                child: Icon(Icons.message),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
                background: SafeArea(
                  child: Column(
                    children: [
                      Container(
                        alignment: Alignment.topLeft,
                        child: Row(
                          children: [
                            IconButton(
                              icon: Icon(Icons.arrow_back),
                              onPressed: () {},
                            ),
                            Text(
                              'PREVIOUS PAGE',
                              style: TextStyle(
                                fontSize: 12,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ],
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(
                          left: 20,
                          top: 12,
                          bottom: 24,
                        ),
                        child: Row(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            CircleAvatar(
                              radius: 20,
                            ),
                            SizedBox(
                              width: 12,
                            ),
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  'Sertan Hakkı İmamoğlu',
                                  style: TextStyle(
                                    fontSize: 18,
                                    color: Colors.white,
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                                Text(
                                  'Student',
                                  style: TextStyle(
                                    fontSize: 14,
                                    color: Colors.grey,
                                  ),
                                ),
                                SizedBox(
                                  height: 12,
                                ),
                                Row(
                                  children: [
                                    Container(
                                      decoration: BoxDecoration(
                                        color: Colors.white10,
                                        borderRadius: BorderRadius.all(
                                          Radius.circular(12),
                                        ),
                                      ),
                                      padding: EdgeInsets.symmetric(
                                        horizontal: 34,
                                        vertical: 12,
                                      ),
                                      child: Icon(Icons.menu),
                                    ),
                                    SizedBox(
                                      width: 4,
                                    ),
                                    Container(
                                      decoration: BoxDecoration(
                                        color: Colors.white10,
                                        borderRadius: BorderRadius.all(
                                          Radius.circular(12),
                                        ),
                                      ),
                                      padding: EdgeInsets.symmetric(
                                        horizontal: 34,
                                        vertical: 12,
                                      ),
                                      child: Icon(Icons.person),
                                    ),
                                    SizedBox(
                                      width: 4,
                                    ),
                                    Container(
                                      decoration: BoxDecoration(
                                        color: Colors.white10,
                                        borderRadius: BorderRadius.all(
                                          Radius.circular(12),
                                        ),
                                      ),
                                      padding: EdgeInsets.symmetric(
                                        horizontal: 34,
                                        vertical: 12,
                                      ),
                                      child: Icon(Icons.message),
                                    ),
                                  ],
                                )
                              ],
                            )
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return Container(
                    color: index.isOdd ? Colors.white : Colors.black12,
                    height: 100.0,
                    child: Center(
                      child: Text('$index', textScaleFactor: 5),
                    ),
                  );
                },
                childCount: 20,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

Here's my take on your issue, as suggested by pskink I've used a SliverPersistentHeader and tried to make it responsive so when the size is reducing it has a bit of an animation.

Sample Code

class CustomPageHeader extends SliverPersistentHeaderDelegate {
  CustomPageHeader({
    required double collapsedHeight,
    required double expandedHeight,
  }) : minExtent = collapsedHeight, maxExtent = expandedHeight;

  @override
  final double minExtent;

  @override
  final double maxExtent;

  Widget _buildBtn(IconData icon, double scale) {
    double horizontal = 34.0 * scale;
    horizontal = horizontal < 8 ? 8.0 : horizontal;

    double vertical = 12.0 * scale;
    vertical = vertical < 8 ? 8.0 : vertical;

    return Container(
      decoration: const BoxDecoration(
        color: Colors.white10,
        borderRadius: BorderRadius.all(
          Radius.circular(12),
        ),
      ),
      padding: EdgeInsets.symmetric(horizontal: horizontal, vertical: vertical),
      child: Icon(icon),
    );
  }

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    final theme = Theme.of(context);
    final backgroundColor =
        theme.appBarTheme.backgroundColor ?? theme.colorScheme.primary;
    final scale = 1 - shrinkOffset / maxExtent;
    final isReduced = shrinkOffset >= maxExtent * 0.12;
    final wrappedBtns = Wrap(
      spacing: 8,
      children: [
        _buildBtn(Icons.menu, scale),
        _buildBtn(Icons.person, scale),
        _buildBtn(Icons.message, scale),
      ],
    );
    
    double avatarRadius = 20.0 * scale;
    avatarRadius = avatarRadius > 16 ? avatarRadius : 16.0;

    return Container(
      padding: const EdgeInsets.only(
        left: 20,
        top: 12,
        bottom: 12,
      ),
      color: backgroundColor,
      child: Column(
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              CircleAvatar(radius: avatarRadius),
              !isReduced
                  ? const SizedBox(width: 12)
                  : Expanded(child: Container()),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  if (!isReduced)
                    Text(
                      'Sertan Hakkı İmamoğlu',
                      style: TextStyle(
                        fontSize: 18 * scale,
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  if (!isReduced)
                    Text(
                      'Student',
                      style: TextStyle(
                        fontSize: 14 * scale,
                        color: Colors.grey,
                      ),
                    ),
                ],
              ),
              if (isReduced) wrappedBtns,
            ],
          ),
          Flexible(
            child: Container(
              constraints: const BoxConstraints(maxHeight: 12),
            ),
          ),
          if (!isReduced) wrappedBtns,
        ],
      ),
    );
  }

  @override
  bool shouldRebuild(_) => true;
}

Use it in your sliver list like this:

SliverPersistentHeader(
  pinned: true,
  delegate: CustomPageHeader(
    collapsedHeight: kToolbarHeight + 8,
    expandedHeight: 190,
  ),
),

Try the full test code on DartPad

The code is perfectible but should help you enough so you can improve it and continue by yourself.