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.

CodePudding user response：

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(),
        ...
)