Flutter - How to scroll Container over another

Question

I'm begginning Flutter and I'm searching to scroll ListView over a Container like below

Answer 1

You can use DraggableScrollableSheet

DraggableScrollableSheet(
  builder: (context, scrollController) {
    return SingleChildScrollView(
      controller: scrollController,
      child: Column(
        children: [],
      ),
    );
  },
)

You can follow the doc example

A complete widget

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  openDraggable(context) {
    showModalBottomSheet(
        isScrollControlled: true,
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
          topLeft: Radius.circular(22),
          topRight: Radius.circular(22),
        )),
        context: context,
        builder: (context) => DraggableScrollableSheet(
              maxChildSize: 1,
              initialChildSize: .4,
              expand: false,
              builder: (context, scrollController) {
                return SingleChildScrollView(
                  controller: scrollController,
                  child: Column(
                    children: [
                      for (int i = 0; i < 32; i++)
                        ListTile(
                          title: Text("item"),
                        ),
                    ],
                  ),
                );
              },
            ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                openDraggable(context);
              },
              child: Text("open"),
            )
          ],
        ),
      ),
    );
  }
}

Answer 2

Don't use DraggableScrollableSheet. instead of that widget use the sliver widget, this widget is amazing, you can use this article and this