Flutter draggable container: expand from top to bottom

Question

I want to achieve the following example:

As you can see, user must be able to drag from top to bottom. At start, only an image will be seen, but once the user drags the element from top to bottom it will show more content. While expanding the orange container, it should go above all other green elements.

I have looked into DraggableScrollableSheet but the output is not as the expected.

DraggableScrollableSheet(
    initialChildSize: 0.5,
    minChildSize: 0.5,
    maxChildSize: 1,
    builder: (context, scrollCrontroller) {
      return SingleChildScrollView(
        controller: scrollCrontroller,
        child: Column(
          children: [
            Image.network(
              'https://via.placeholder.com/600x400',
              height: 200,
              width: double.infinity,
              fit: BoxFit.cover,
            ),
            Text('Example'),
            Text('Example'),
            Text('Example'),
            Text('Example'),
          ],
        ),
      );
    }
);

Answer 1

Solved .

Using GestureDetector I'm able to update the height of the container while dragging from top to bottom.

return Container(
  height: bannerHeight,
  child: SingleChildScrollView(
    child: Column(
      children: [
        Stack(
          alignment: Alignment.bottomCenter,
          children: [
            Image.network(
              'https://via.placeholder.com/600x400',
              height: 200,
              width: double.infinity,
              fit: BoxFit.cover,
            ),
            GestureDetector(
              onVerticalDragUpdate: (DragUpdateDetails details) {
                setState(() {
                  double positionY = details.globalPosition.dy;
                  double maxHeight =
                      MediaQuery.of(context).size.height - 100;
                
                  /// Limits at 200 height minimum
                  if (positionY < 200)
                    bannerHeight = 200;
                  /// Limits the max height of expanded
                  else if (positionY <= maxHeight) bannerHeight = positionY;
                });
              },
              child: FaIcon(
                FontAwesomeIcons.gripLines,
                color: Colors.white,
              ),
            ),
          ],
        ),
        Text('Example'),
      ],
    ),
  ),
);

Finally the variable bannerHeight should be set as global like:

double bannerHeight = 200;