I can't add border radius when I create a modelbottomsheet

Question

I've tried a lot of way to add border radius but they didn't work.

So this is the way I call bottom sheet

showModalBottomSheet(
                    isScrollControlled: true,
                    barrierColor: Color.fromARGB(92, 0, 0, 0),
                    backgroundColor: Color.fromARGB(0, 0, 0, 0),
                    context: context,
                    builder: (context) => DraggableScrollableSheet(
                      maxChildSize: 0.87,
                      initialChildSize: 0.87,
                      builder: ((context, scrollController) =>
                          PlaceMenuForDiscoverPage(),
                    ),
                  ),

And this is the main part of my bottom sheet

Container(
          color: const Color.fromARGB(0, 0, 0, 0),
          child: StreamBuilder(
              stream:
                  FirebaseFirestore.instance.collection('Name').snapshots(),
              builder: (BuildContext context,
                  AsyncSnapshot<QuerySnapshot> snapshot) {
                return ListView(
                  scrollDirection: Axis.vertical,
                  children: [
                    Positioned(
                        top: 0,
                        left: 0,
                        right: 0,
                        child: Stack(
                          children: [
                            SizedBox(
                              width: double.maxFinite,
                              height: 310,
                              child: PageView.builder(
                                  itemCount: 3,
                                  pageSnapping: true,
                                  itemBuilder: (context, pagePosition) {
                                    return Container(
                                      margin: EdgeInsets.all(0),
                                      child: Image.network(
                                          fit: BoxFit.cover,
                                          imgList[pagePosition], frameBuilder:
                                              (context, child, frame,
                                                  wasSynchronouslyLoaded) {
                                        return child;
                                      }, loadingBuilder: (context, child,
                                              loadingProgress) {
                                        if (loadingProgress == null) {
                                          return child;
                                        } else {
                                          return Center(
                                            child: CircularProgressIndicator(
                                              color: Color.fromRGBO(
                                                  250, 17, 79, 1),
                                            ),
                                          );
                                        }
                                      }),
                                    );
                                  }),
                            ),
                          ],
                       )),
                    ],
                );
              })),

I've tried to add border radius to showmodalbottomsheet() part and my bottom sheet but they didn't work. Thanks for your help from now.

Answer 1

You can add borderRadius to Container inside PlaceMenuForDiscoverPage like blew, don't forget to add clipBehavior to container:

Container(
        clipBehavior: Clip.antiAlias,//<-- add this
        decoration: BoxDecoration(//<-- add this
          borderRadius: new BorderRadius.only(
              topLeft: const Radius.circular(16.0),
              topRight: const Radius.circular(16.0)),
          color: const Color.fromARGB(0, 0, 0, 0),
        ),
        child: StreamBuilder(
            stream: FirebaseFirestore.instance
                .collection('Name')
                .snapshots(),
        ...
)