我怎样才能让我的臀部 sheet 看起来像这样？

Question

我想把我的屁股sheet做成这样-没有背景，高度和宽度由内容决定。

  showModalBottomSheet(
                      context: context,
                      elevation: 0,
                      backgroundColor: Colors.transparent,
                      builder: (context) => Container(
                        height: 60,
                        decoration: BoxDecoration(
                          color: Colors.transparent,
                          borderRadius: BorderRadius.only(
                            topLeft: const Radius.circular(50.0),
                            topRight: const Radius.circular(50.0),
                          ),
                        ),
                        child: Container(
                             color: AppColors.grey8,
                            padding: EdgeInsets.all(12),
                            child: Text("Call Doctor",
                              style: TextStyle(
                                fontSize: 14,
                                fontWeight: FontWeight.w600,
                                fontFamily: 'Euclid',
                                color: AppColors.textColor,
                              ),)
                        ),
                      ),
                    );

Answer 1

检查这段代码，让我知道这对你有用

有关详细信息，请查看此 link cupertino Widgets also refer cupertino-ios-style-actionsheet

  import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: HomePage(),
        );
      }
    }
    
    class HomePage extends StatefulWidget {
      @override
      _HomePageState createState() => _HomePageState();
    }
    
    class _HomePageState extends State<HomePage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("CupertinoActionSheet"),
          ),
          body: Center(
            child: ElevatedButton(
              onPressed: () {
                final action = CupertinoActionSheet(
                  title: Text(
                    "Flutter dev",
                    style: TextStyle(fontSize: 30),
                  ),
                  message: Text(
                    "Select any action ",
                    style: TextStyle(fontSize: 15.0),
                  ),
                  actions: <Widget>[
                    CupertinoActionSheetAction(
                      child: Text("Action 1"),
                      isDefaultAction: true,
                      onPressed: () {
                        print("Action 1 is been clicked");
                      },
                    ),
                    CupertinoActionSheetAction(
                      child: Text("Action 2"),
                      isDestructiveAction: true,
                      onPressed: () {
                        print("Action 2 is been clicked");
                      },
                    )
                  ],
                  cancelButton: CupertinoActionSheetAction(
                    child: Text("Cancel"),
                    onPressed: () {
                      Navigator.pop(context);
                    },
                  ),
                );
    
                showCupertinoModalPopup(
                    context: context, builder: (context) => action);
              },
              child: Text("Click me "),
            ),
          ),
        );
      }

}

我怎样才能让我的臀部 sheet 看起来像这样？

How can I make my bottom sheet look like this?

flutter

dart

bottom-sheet