为什么BorderRadius
下的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(
"[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,
);
},
);
}
}
Container BoxDecoration在材质组件上绘制,但是该页面中树上方没有材料,您使用的第一个材料在容器下方。也来自文档
形状或borderRadius不会修剪装饰的Container的子级。如果需要剪辑,请插入剪辑小部件(例如ClipRect,ClipRRect,ClipPath)作为Container的子级。请注意,就性能而言,裁剪可能会付出高昂的代价
例如,如果您将颜色应用于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
),
],
),
您仍然会看到材质(容器的子代)的颜色。在这种情况下,解决该问题的方法是将该装饰应用于“材质”>
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 ) )
或者您可以使用容器上方的材质,然后使用其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
),
)