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(
"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,
);
},
);
}
}
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
),
)