为此，您可以使用showModalBottomSheet方法，简单示例如下

import 'package:flutter/material.dart';

void main() => runApp(const BottomSheetApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Bottom Sheet Sample')),
        body: const BottomSheetExample(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        child: const Text('showModalBottomSheet'),
        onPressed: () {
          showModalBottomSheet<void>(
            context: context,
            builder: (BuildContext context) {
              return Container(
                height: 200,
                color: Colors.amber,
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      const Text('Modal BottomSheet'),
                      ElevatedButton(
                        child: const Text('Close BottomSheet'),
                        onPressed: () => Navigator.pop(context),
                      ),
                    ],
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

你可以阅读更多关于这个方法here

您可以像下面一样使用showModalBottomSheet（）...

showModalBottomSheet<void>(
            // context and builder are
            // required properties in this widget
            context: context,
            builder: (BuildContext context) {
              // we set up a container inside which
              // we create center column and display text
 
              // Returning SizedBox instead of a Container
          return SizedBox(
            height: MediaQuery.of(context).size.height * 0.6,
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: const <Widget>[
                  Text('HERE You'll add all your content'),
                ],
              ),
            ),
          );
        },
      );

您可以在中调用上述方法
屏幕或按钮onPressed或onTap的initState（）。

根据您共享的图像，我已经尝试了类似的东西使用ModalBottomSheet
您的按钮小工具

ElevatedButton(
  child: const Text('Show Modal BottomSheet'),
  onPressed: () {
    showModalBottomSheet<void>(
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(25.0)),
      ),
      context: context,
      builder: (BuildContext context) {
        return modelSheet(context);
      },
    );
  },
)

bottomSheet小工具：

modelSheet(BuildContext context) {
return Container(
  padding: const EdgeInsets.all(12),
  decoration: const BoxDecoration(
    borderRadius: BorderRadius.vertical(top: Radius.circular(25.0)),
  ),
  child: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        const Icon(
          Icons.hourglass_empty_outlined,
          color: Colors.red,
          size: 40,
        ),
        const SizedBox(
          height: 10,
        ),
        const Text(
          'Beta version',
          style: TextStyle(
            fontSize: 30,
            fontWeight: FontWeight.bold,
          ),
        ),
        const SizedBox(
          height: 20,
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            Icon(
              Icons.check,
              color: Colors.red,
            ),
            Text('better price')
          ],
        ),
        const SizedBox(
          height: 10,
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            Icon(
              Icons.check,
              color: Colors.red,
            ),
            Text('early access')
          ],
        ),
        const SizedBox(
          height: 20,
        ),
        RichText(
          text: const TextSpan(
            text:
                'Please mind that this is a beta version of the app. As a founding member you can get',
            style: TextStyle(fontSize: 20, color: Colors.black),
            children: <TextSpan>[
              TextSpan(
                  text: '50% off',
                  style: TextStyle(fontWeight: FontWeight.bold)),
              TextSpan(text: ' the price & early access. !'),
            ],
          ),
        ),
        const SizedBox(
          height: 20,
        ),
        const Text(
            'You can look forward to more teachers and practices very soon.'),
        const SizedBox(
          height: 20,
        ),
        ElevatedButton(
          onPressed: () => Navigator.pop(context),
          style: ElevatedButton.styleFrom(
              backgroundColor: Colors.red,
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20)),
              fixedSize: const Size(double.maxFinite, 50)),
          child: const Text('Got it'),
        ),
      ],
    ),
  ),
 );
}

结果屏幕-〉