DraggableScrollableSheet with header leaves a shade

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final _scaffoldKey = GlobalKey<ScaffoldState>();
  void _showSheet() => _scaffoldKey.currentState!.showBottomSheet((context) =>
      DraggableScrollableSheet(
          expand: false,
          builder: (BuildContext context, ScrollController scrollController) =>
              Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Container(
                      height: 80,
                      color: Colors.grey,
                      child: Center(child: Text('Drag me down from top'))),
                  Flexible(
                      child: Container(
                          color: Colors.blue[100],
                          child: ListView.builder(
                            controller: scrollController,
                            itemCount: 25,
                            itemBuilder: (BuildContext context, int index) {
                              return ListTile(title: Text('Item $index'));
                            },
                          )))
                ],
              )));

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        key: _scaffoldKey,
        floatingActionButton: FloatingActionButton(onPressed: _showSheet),
        body: Align(
            alignment: Alignment.topCenter,
            child: ElevatedButton(
                onPressed: () {},
                child: Text('I am a button, but am I under a shade?'))),
      ),
    );
  }
}

thank you! ❤