Flutter：BorderRadius 在 showGeneralDialog 下不起作用

Question

为什么 BorderRadius Under showGeneralDialog 不起作用？ 这是我的代码 --

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(
                          "abirahsan122@gmail.com",
                          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,
        );
      },
    );
  }
}

Answer 1

Container BoxDecoration 在 Material 组件上绘制，但该页面中的树上方没有 material，您使用的第一个 material 在容器下方。也来自文档

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

例如，如果您将颜色应用于 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
    ),
  ],
),

您仍然会看到 Material（容器的子容器）的颜色。在这种情况下解决它的方法是将该装饰应用到 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
  )
)

或者你可以使用容器上面的Material，然后你可以使用它的BoxDecoration，效果是一样的

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

Flutter：BorderRadius 在 showGeneralDialog 下不起作用

Flutter: BorderRadius Doesn't work under showGeneralDialog

border

showdialog

flutter