bottomsheet_sucks.dart

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        resizeToAvoidBottomInset: false,
        body: const Center(
          child: MyWidget(),
        ),
        floatingActionButton: Builder(builder: (context) {
          return FloatingActionButton(
            onPressed: () {
              showModalBottomSheet(
                isScrollControlled: true,
                context: context,
                builder: (context) {
                  return Container(
                    margin: EdgeInsets.only(
                      bottom: MediaQuery.of(context).viewInsets.bottom,
                    ),
                    child: const BottomSheetExample(),
                  );
                },
              );
            },
          );
        }),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Text(
      'Hello, World!',
      style: Theme.of(context).textTheme.headlineMedium,
    );
  }
}

class BottomSheetExample extends StatelessWidget {
  const BottomSheetExample({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return DraggableScrollableSheet(
      expand: false,
      builder: (context, scrollController) {
        return Column(
          children: [
            Container(
              height: 50,
              color: Colors.blue,
              child: const Center(child: Text('Header')),
            ),
            Expanded(
              child: ListView(
                padding: EdgeInsets.zero,
                controller: scrollController,
                children: const [
                  TextField(),
                  TextField(),
                  TextField(),
                  TextField(),
                  TextField(),
                  TextField(),
                  TextField(),
                  TextField(),
                  TextField(),
                  TextField(),
                  TextField(),
                  TextField(),
                ],
              ),
            ),
            Container(
              height: 50,
              color: Colors.blue,
              child: const Center(child: Text('Footer')),
            ),
          ],
        );
      },
    );
  }
}