DraggableScrollableSheet

main.dart

import 'package:flutter/material.dart';

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

class Home extends StatefulWidget {
  const Home({super.key});
  
  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final DraggableScrollableController sheetController = DraggableScrollableController();
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: Text('App Bar'),
        ),
        body: Stack(
          children: [
            Container(
              color: Colors.black54,
              child: Center(
                child: ElevatedButton(
                  onPressed: () => sheetController.jumpTo(0.8),
                  child: Text('Press'),
                ),
              ),
            ),
            DraggableScrollableSheet(
              controller: sheetController,
              initialChildSize: 0,
              minChildSize: 0,
              builder: (BuildContext context, scrollController) {
                return Container(
                  clipBehavior: Clip.hardEdge,
                  decoration: BoxDecoration(
                    color: Theme.of(context).canvasColor,
                    borderRadius: const BorderRadius.only(
                      topLeft: Radius.circular(25),
                      topRight: Radius.circular(25),
                    ),
                  ),
                  child: CustomScrollView(
                    controller: scrollController,
                    slivers: [
                      SliverToBoxAdapter(
                        child: Center(
                          child: Container(
                            decoration: BoxDecoration(
                              color: Theme.of(context).hintColor,
                              borderRadius: const BorderRadius.all(
                                Radius.circular(10)
                              ),
                            ),
                            height: 4,
                            width: 40,
                            margin: const EdgeInsets.symmetric(
                              vertical: 10
                            ),
                          ),
                        ),
                      ),
                      const SliverAppBar(
                        title: Text('My App'),
                        primary: false,
                        pinned: true,
                        centerTitle: false,
                      ),
                      SliverList.list(
                        children: [
                          FilledButton.tonal(
                            onPressed: () {
                              sheetController.animateTo(
                                0.3,
                                duration: const Duration(milliseconds: 200),
                                curve: Curves.bounceIn,
                              );
                            },
                            child: const Text('Scrool to 0.3'),
                          ),
                          const ListTile(title: Text('Jane Doe')),
                          const ListTile(title: Text('Jack Reacher')),
                          const ListTile(title: Text('Jane Doe')),
                          const ListTile(title: Text('Jack Reacher')),
                          const ListTile(title: Text('Jane Doe')),
                          const ListTile(title: Text('Jack Reacher')),
                          const ListTile(title: Text('Jane Doe')),
                          const ListTile(title: Text('Jack Reacher')),
                        ]
                      ), // SliverList
                    ], // slivers
                  ), // CustomScrollView
                ); // return Container
              }, // builder
            ),
          ],
        ),
      ),
    );
  }
}