I'd like to implement the UI as shown in the attached photo. When a I press on "Show More" , it should show a modal bottom sheet like this. I tried to do it using bottomSheet using a package called : solid_bottom_sheet as follows but it doesn't work the same as expected:

Scaffold(
        bottomSheet: SolidBottomSheet(
            draggableBody: true,
            headerBar: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Stack(
                  children: [
                    Container(
                      padding: const EdgeInsets.only(top: 35,),
                      alignment: Alignment.center,
                      child: const Center(
                        child: Text(
                          "Show More`enter code here`",
                          style: TextStyle(color: Colors.red),
                        ),
                      ),
                    ),
                    const Align(
                      alignment: Alignment.topCenter,
                      child: Card(
                        child: Padding(
                          padding: EdgeInsets.symmetric(horizontal: 10.0),
                          child: Icon(
                            Icons.keyboard_double_arrow_up,
                            color: ColorUtil.redColor,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
            body: Container(
              color: Colors.white,
              height: 30,
              child: Center(
                child: Text(
                  "Hello! I'm a bottom sheet :D",
                ),
              ),
            ),
          ),
)

CodePudding user response：

Use another stack to have background white for half stack

class _XGGFState extends State<XGGF> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      extendBody: true, // m  
      bottomSheet: Container(
        color: Colors.black,
        child: SolidBottomSheet(
          draggableBody: true,
          headerBar: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Stack(
                children: [
                  Positioned(
                    left: 0,
                    right: 0,
                    bottom: 0,
                    top: 35 / 2, //35 from text top padding widget
                    child: Container(
                      decoration: const BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(24),
                            topRight: Radius.circular(24),
                          )),
                    ),
                  ),
                  Container(
                    padding: const EdgeInsets.only(
                      top: 35,
                    ),
                    alignment: Alignment.center,
                    child: const Center(
                      child: Text(
                        "Show More`enter code here`",
                        style: TextStyle(color: Colors.red),
                      ),
                    ),
                  ),
                  const Align(
                    alignment: Alignment.topCenter,
                    child: Card(
                      child: Padding(
                        padding: EdgeInsets.symmetric(horizontal: 10.0),
                        child: Icon(Icons.keyboard_double_arrow_up,
                            color: Colors.red),
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
          body: Container(
            color: Colors.white,
            height: 130,
            child: Center(
              child: Text(
                "Hello! I'm a bottom sheet :D",
              ),
            ),
          ),
        ),
      ),
    );
  }
}