Flutter – CustomScrollView with center key and mulitple slivers: Expand widgets in different directions

I have completed the necessary work on your case and have devised a final solution.
The current code utilizes the center key for the CustomScrollView, causing the upper half to move upwards and the lower half to move downwards. This conflicts with the requirement for the product description to expand downwards.
Therefore, I propose removing the center key and implementing a custom ScrollPhysics class to maintain the position of the CustomScrollView.

You must manually determine when to retain the scroll and when not to. The system cannot automatically recognize what is appropriate for your specific case. Please refer to the _shouldRetainScroll usage for more information.

Also, with the removal of the center key, the page will now start at the top when a user opens it.

Finally, the solution may not be perfect, but give it a go. I look forward to your response.

Below is the implemented code:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: TestPage(),
  ));
}

class TestPage extends StatefulWidget {
  const TestPage({super.key});

  @override
  State<TestPage> createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  List<Widget> newList = List.generate(
    20,
    (index) => Text('Upper ${index.toString()}'),
  );
  List<Widget> myList = List.generate(
    20,
    (index) => Text('Lower ${index.toString()}'),
  );

  final Key centerKey = const ValueKey('second-sliver-list');
  final scrollController = ScrollController();
  final keyTop = GlobalKey();
  final ValueNotifier<bool> _shouldRetainScroll = ValueNotifier(false);
  @override
  void dispose() {
    scrollController.dispose();
    _shouldRetainScroll.dispose();
    super.dispose();
  }

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

  bool _isExpanded = false;

  @override
  Widget build(BuildContext context) {
    String productDescription =
        "Peanut butter, a creamy concoction crafted from roasted peanuts, is a timeless culinary delight cherished by millions worldwide. Its rich, nutty flavor and smooth texture make it a versatile ingredient that transcends traditional boundaries, finding its way into sandwiches, desserts, sauces, and even savory dishes. This delectable spread has captured the hearts and palates of food enthusiasts for generations, evolving from a humble pantry staple to a beloved icon of gastronomy. In this exploration, we delve deep into the captivating world of peanut butter, uncovering its history, culinary uses, nutritional benefits, and enduring appeal. Peanut butter, a creamy concoction crafted from roasted peanuts, is a timeless culinary delight cherished by millions worldwide. Its rich, nutty flavor and smooth texture make it a versatile ingredient that transcends traditional boundaries, finding its way into sandwiches, desserts, sauces, and even savory dishes. This delectable spread has captured the hearts and palates of food enthusiasts for generations, evolving from a humble pantry staple to a beloved icon of gastronomy. In this exploration, we delve deep into the captivating world of peanut butter, uncovering its history, culinary uses, nutritional benefits, and enduring appeal.";

    return Scaffold(
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton.extended(
            onPressed: () {
              _shouldRetainScroll.value = true;
              setState(() {
                newList.add(Text('Upper ${newList.length}'));
              });
            },
            label: const Text('Add to Upper'),
          ),
          const SizedBox(height: 10),
          FloatingActionButton.extended(
            onPressed: () {
              _shouldRetainScroll.value = false;
              scrollController.jumpTo(scrollController.position.pixels + 0.000000001); //Quite tricky here. Purpose is force the PositionRetainedScrollPhysics recalculate the position;
              setState(() {
                myList.add(Text('Lower ${myList.length}'));
              });
            },
            label: const Text('Add to Lower'),
          ),
        ],
      ),
      appBar: AppBar(),
      body: CustomScrollView(
        //center: centerKey,
        physics: PositionRetainedScrollPhysics(shouldRetainScroll: _shouldRetainScroll),
        controller: scrollController,
        slivers: [
          SliverToBoxAdapter(
            key: keyTop,
            child: Column(
              children: [
                Image.network(
                    "https://m.media-amazon.com/images/I/719NQBiqh9L.jpg"),
                SizedBox(height: 16.0),
                Text(
                  'Product Name',
                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                ),
                SizedBox(height: 8.0),
                Text(
                  '$100', // Replace with actual price
                  style: TextStyle(fontSize: 16),
                ),
                SizedBox(height: 16.0),
                AnimatedContainer(
                  duration: Duration(milliseconds: 500),
                  curve: Curves.easeInOut,
                  height: _isExpanded
                      ? null
                      : 85.0, // Adjust height to show around 3-4 lines
                  child: Text(
                    productDescription,
                    style: TextStyle(fontSize: 16),
                    overflow: TextOverflow.fade,
                  ),
                ),
                SizedBox(height: 16.0),
                GestureDetector(
                  onTap: () {
                    _shouldRetainScroll.value = false;
                    setState(() {
                      _isExpanded = !_isExpanded;
                    });
                  },
                  child: Text(
                    _isExpanded ? 'Read less' : 'Read more',
                    style: TextStyle(color: Colors.blue),
                  ),
                ),
              ],
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) {
                return ListTile(
                  title: newList.reversed.toList()[index],
                );
              },
              childCount: newList.length,
            ),
          ),
          SliverList(
            //key: centerKey,
            delegate: SliverChildBuilderDelegate(
              (context, index) {
                return ListTile(title: myList[index]);
              },
              childCount: myList.length,
            ),
          ),
        ],
      ),
    );
  }
}

class PositionRetainedScrollPhysics extends ScrollPhysics {
  final ValueNotifier<bool> shouldRetainScroll;
  const PositionRetainedScrollPhysics({super.parent, required this.shouldRetainScroll});

  @override
  PositionRetainedScrollPhysics applyTo(ScrollPhysics? ancestor) {
    return PositionRetainedScrollPhysics(
      parent: buildParent(ancestor),
        shouldRetainScroll: shouldRetainScroll
    );
  }

  @override
  double adjustPositionForNewDimensions({
    required ScrollMetrics oldPosition,
    required ScrollMetrics newPosition,
    required bool isScrolling,
    required double velocity,
  }) {
    final position = super.adjustPositionForNewDimensions(
      oldPosition: oldPosition,
      newPosition: newPosition,
      isScrolling: isScrolling,
      velocity: velocity,
    );

    final diff = newPosition.maxScrollExtent - oldPosition.maxScrollExtent;

    if (oldPosition.pixels > oldPosition.minScrollExtent && diff > 0 && shouldRetainScroll.value == true) {
      return position + diff;
    } else {
      return position;
    }
  }
}