Flutter: BorderRadius Doesn't work under showGeneralDialog

Question

Why this BorderRadius Under showGeneralDialog doesn't work? Here is my code --

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
          actions: <Widget>[
            IconButton(
                icon: Icon(Icons.arrow_downward),
                splashColor: Colors.red,
                onPressed: _showDrawer)
          ],
        ),
        body: Container(
            color: Colors.white,
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            child: Center(child: Text("This Is Body"))),
      ),
    );
  }

  _showDrawer() {
    return showGeneralDialog(
      context: context,
      barrierDismissible: true,
      transitionDuration: Duration(milliseconds: 600),
      barrierLabel: MaterialLocalizations.of(context).dialogLabel,
      barrierColor: Colors.black.withOpacity(0.5),
      pageBuilder: (context, _, __) {
        return SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Container(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height / 2.5,
                padding: EdgeInsets.all(0),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(
                    bottomLeft:
                        Radius.circular(50.0), //This Border Radius doesn't Work
                  ),
                  boxShadow: [
                    BoxShadow(
                        color: Colors.black12,
                        blurRadius: 3.0,
                        spreadRadius: 3.0),
                  ],
                ),
                child: Material(
                  child: ListView(
                    children: <Widget>[
                      Align(
                        alignment: Alignment.topRight,
                        child: IconButton(
                            icon: Icon(Icons.close),
                            splashColor: Colors.red,
                            onPressed: () {
                              Navigator.pop(context, false);
                            }),
                      ),
                      Align(
                        alignment: Alignment.topCenter,
                        child: ClipOval(
                            child: Image.asset(
                          "assets/images/avator.jpg",
                          width: MediaQuery.of(context).size.height / 10,
                          height: MediaQuery.of(context).size.height / 10,
                          fit: BoxFit.cover,
                        )),
                      ),
                      Align(
                        alignment: Alignment.topCenter,
                        child: Text(
                          "Abir Ahsan",
                          style: TextStyle(
                              color: Colors.black,
                              fontWeight: FontWeight.bold,
                              fontSize: 20),
                        ),
                      ),
                      Align(
                        alignment: Alignment.topCenter,
                        child: Text(
                          "[email protected]",
                          style: TextStyle(
                            fontStyle: FontStyle.italic,
                          ),
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.all(20.0),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text(
                              "Menu",
                              style: TextStyle(
                                  fontSize: 15.0, fontWeight: FontWeight.bold),
                            ),
                            Text(
                              "Offers",
                              style: TextStyle(
                                  fontSize: 15.0, fontWeight: FontWeight.bold),
                            ),
                            Text(
                              "My Cart",
                              style: TextStyle(
                                  fontSize: 15.0, fontWeight: FontWeight.bold),
                            ),
                            Text(
                              "Last Orders",
                              style: TextStyle(
                                  fontSize: 15.0, fontWeight: FontWeight.bold),
                            ),
                            Text(
                              "Favourite",
                              style: TextStyle(
                                  fontSize: 15.0, fontWeight: FontWeight.bold),
                            ),
                            Text(
                              "My Settings",
                              style: TextStyle(
                                  fontSize: 15.0, fontWeight: FontWeight.bold),
                            )
                          ],
                        ),
                      )
                    ],
                  ),
                ),
              ),
            ],
          ),
        );
      },
      transitionBuilder: (context, animation, secondaryAnimation, child) {
        return SlideTransition(
          position: CurvedAnimation(
            parent: animation,
            curve: Curves.easeOut,
          ).drive(Tween<Offset>(
            begin: Offset(0, -1.0),
            end: Offset.zero,
          )),
          child: child,
        );
      },
    );
  }
}

Solution

The Container BoxDecoration paint over a Material Component, but there is no material above the tree in that page, the first material you use it's below the container. Also from the documentation

The shape or the borderRadius won't clip the children of the decorated Container. If the clip is required, insert a clip widget (e.g., ClipRect, ClipRRect, ClipPath) as the child of the Container. Be aware that clipping may be costly in terms of performance

For Example if you apply a color to BoxDecoration

BoxDecoration(
   color: Colors.green, //For example this color
   borderRadius: BorderRadius.only(
   bottomLeft:
     Radius.circular(50.0), //This Border Radius doesn't Work
   ),
   boxShadow: [
     BoxShadow(
       color: Colors.black12,
       blurRadius: 3.0,
       spreadRadius: 3.0
    ),
  ],
),

You will still see the the color of the Material (the child of the container). The way to solve it in this case would be to apply that decoration to the Material

Container(
  width: MediaQuery.of(context).size.width,
  height: MediaQuery.of(context).size.height / 2.5,
  padding: EdgeInsets.zero,
  child: Material(
     elevation: 8,
     shadowColor: Colors.black12,
     borderRadius: BorderRadius.only(
       bottomLeft:
       Radius.circular(50.0), //Use the border raidus property of the Material
     ),
     child: ... //The ListView and everything else
  )
)

Or you could use the Material above the container and then you can use its BoxDecoration, it will have the same effect

Material(
  type: MaterialType.transparency, //Transparent so you don't see a color below other than the one of the container
  child: Container(
     width: MediaQuery.of(context).size.width,
     height: MediaQuery.of(context).size.height / 2.5,
     padding: EdgeInsets.zero,
     decoration: BoxDecoration(
       color: Colors.green, //This color now applies correctly
       borderRadius: BorderRadius.only(
         bottomLeft:
         Radius.circular(50.0),
       ),
       boxShadow: [
         BoxShadow(
         color: Colors.black12,
         blurRadius: 3.0,
         spreadRadius: 3.0),
       ],
     ),
    child: ... //The ListView and everything else
  ),
)