Add SliverSizeTransition

[akshdeep-singh]

To animate sliver sizes, for example when using SliverAnimatedSwitcher, flutter provides SliverFadeTransition but there is nothing for animating sizes.

[Kavantix]

@akshdeep-singh Perhaps you are looking for my SliverAnimatedPaintExtent ?

[akshdeep-singh]

My use case is to hide/show sliver list like this:

sliver: show ? SliverList() : null

I will try with SliverAnimatedPaintExtent and see if it works...

[akshdeep-singh]

@Kavantix SliverAnimatedPaintExtent works but not completely as desired.

• I can't use it with Fade transition
• There are no options to set the curve of animation

I was actually looking for something to use in transitionBuilder of AnimatedSwitcher.

[Kavantix]

SliverAnimatedPaintExtent has a curve option. And you can use it together with animated switcher

[akshdeep-singh]

I missed the curve option.
But still, I am not able to use it with AnimatedSwitcher for the fade transition.
Can you check the code below?

Method 1: neither expand nor collapse animation works as intended

import 'package:flutter/material.dart';
import 'package:sliver_tools/sliver_tools.dart';

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

class _TestApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _State();
}

class _State extends State<_TestApp> {
  var _expanded = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: CustomScrollView(
            slivers: [
              SliverToBoxAdapter(
                child: Switch(
                  value: _expanded,
                  onChanged: (value) {
                    setState(() {
                      _expanded = value;
                    });
                  },
                ),
              ),
              AnimatedSwitcher(
                duration: const Duration(seconds: 1),
                layoutBuilder: SliverAnimatedSwitcher.defaultLayoutBuilder,
                transitionBuilder: (child, animation) {
                  return SliverFadeTransition(
                    opacity: animation,
                    sliver: SliverAnimatedPaintExtent(
                      duration: const Duration(seconds: 1),
                      curve: Curves.easeInOut,
                      child: child,
                    ),
                  );
                },
                child: _expanded
                    ? SliverList.builder(
                        itemCount: 10,
                        itemBuilder: (context, index) {
                          return Container(
                            height: 40,
                            color: Colors.red,
                            padding: const EdgeInsets.all(10),
                            child: Text('$index'),
                          );
                        },
                      )
                    : const SliverToBoxAdapter(),
              ),
              SliverToBoxAdapter(
                child: Container(
                  height: 40,
                  color: Colors.green,
                  padding: const EdgeInsets.all(10),
                  child: const Text('**'),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

Method 2: expand animation works, but collapse animation is not as intended

import 'package:flutter/material.dart';
import 'package:sliver_tools/sliver_tools.dart';

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

class _TestApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _State();
}

class _State extends State<_TestApp> {
  var _expanded = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: CustomScrollView(
            slivers: [
              SliverToBoxAdapter(
                child: Switch(
                  value: _expanded,
                  onChanged: (value) {
                    setState(() {
                      _expanded = value;
                    });
                  },
                ),
              ),
              SliverAnimatedPaintExtent(
                duration: const Duration(seconds: 1),
                curve: Curves.easeInOut,
                child: SliverAnimatedSwitcher(
                  duration: const Duration(seconds: 1),
                  child: _expanded
                      ? SliverList.builder(
                          itemCount: 10,
                          itemBuilder: (context, index) {
                            return Container(
                              height: 40,
                              color: Colors.red,
                              padding: const EdgeInsets.all(10),
                              child: Text('$index'),
                            );
                          },
                        )
                      : const SliverToBoxAdapter(),
                ),
              ),
              SliverToBoxAdapter(
                child: Container(
                  height: 40,
                  color: Colors.green,
                  padding: const EdgeInsets.all(10),
                  child: const Text('**'),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

[Kavantix]

I see it seems you need more control to get the effect you are looking for, I would be open for a PR with tests for a SliverPaintExtentTransition. I believe the basis for it could be the SliverAnimatedPaintExtent

[Dabbit-Chan]

@akshdeep-singh Hi, I develop a SliverListSizeTransition Widget based on SliverList and SliverClip, it can change its size by changing the value, maybe you can try it.

Example:

AnimatedBuilder(
  animation: animationController,
  builder: (_, __) {
    return SliverListSizeTransition.list(
      value: animationController.value,
      children: <Widget>[
        // Something
      ],
    );
  },
),