flutter corner radius with transparent background
DartFlutterDart Problem Overview
Below is my code which I expect to render a round-corner container with a transparent background.
return new Container(
//padding: const EdgeInsets.all(32.0),
height: 800.0,
//color: const Color(0xffDC1C17),
//color: const Color(0xffFFAB91),
decoration: new BoxDecoration(
color: Colors.green, //new Color.fromRGBO(255, 0, 0, 0.0),
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(40.0),
topRight: const Radius.circular(40.0))
),
child: new Container(
decoration: new BoxDecoration(
color: Colors.blue,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(40.0),
topRight: const Radius.circular(40.0))
),
child: new Center(
child: new Text("Hi modal sheet"),
)
),
However this is what it renders, it renders a white container (expected transparent) with a round corner radius. Any help?
Dart Solutions
Solution 1 - Dart
If you wrap your Container with rounded corners inside of a parent with the background color set to Colors.transparent I think that does what you're looking for. If you're using a Scaffold the default background color is white. Change that to Colors.transparent if that achieves what you want.
new Container(
height: 300.0,
color: Colors.transparent,
child: new Container(
decoration: new BoxDecoration(
color: Colors.green,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(40.0),
topRight: const Radius.circular(40.0),
)
),
child: new Center(
child: new Text("Hi modal sheet"),
)
),
),
Solution 2 - Dart
If you want to round corners with transparent background, the best approach is using ClipRRect.
return ClipRRect(
borderRadius: BorderRadius.circular(40.0),
child: Container(
height: 800.0,
width: double.infinity,
color: Colors.blue,
child: Center(
child: new Text("Hi modal sheet"),
),
),
);
Solution 3 - Dart
As of May 1st 2019, use BottomSheetTheme.
MaterialApp(
theme: ThemeData(
// Draw all modals with a white background and top rounded corners
bottomSheetTheme: BottomSheetThemeData(
backgroundColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(10))
)
)
),
Introduced recently, using a theme to control the sheets style should be the most best to this problem.
If you want to theme different bottom sheets differently, include a new Theme object in the appropriate subtree to override the bottom sheet theme just for that area.
If for some reason you'd still like to override the theme manually when launching a bottom sheet, showBottomSheet and showModalBottomSheet now have a backgroundColor parameter. Use it like this:
showModalBottomSheet(
backgroundColor: Colors.transparent,
context: context,
builder: (c) {return NavSheet();},
);
Using the theme allows bottom sheets to be re-used regardless of the app / app's current theme, and has none of the negative side effects of setting canvas color as mentioned.
Solution 4 - Dart
/// Create the bottom sheet UI
Widget bottomSheetBuilder(){
return Container(
color: Color(0xFF737373), // This line set the transparent background
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(16.0),
topRight: Radius.circular( 16.0)
)
),
child: Center( child: Text("Hi everyone!"),)
),
);
}
Call this to show the BotoomSheet with corners:
/// Show the bottomSheet when called
Future _onMenuPressed() async {
showModalBottomSheet(
context: context,
builder: (widgetBuilder) => bottomSheetBuilder()
);
}
Solution 5 - Dart
It's an old question. But for those who come across this question...
The white background behind the rounded corners is not actually the container. That is the canvas color of the app.
TO FIX: Change the canvas color of your app to Colors.transparent
Example:
return new MaterialApp(
title: 'My App',
theme: new ThemeData(
primarySwatch: Colors.green,
canvasColor: Colors.transparent, //----Change to this------------
accentColor: Colors.blue,
),
home: new HomeScreen(),
);
Solution 6 - Dart
Scaffold(
appBar: AppBar(
title: Text('BMI CALCULATOR'),
),
body: Container(
height: 200,
width: 170,
margin: EdgeInsets.all(15),
decoration: BoxDecoration(
color: Color(
0xFF1D1E33,
),
borderRadius: BorderRadius.circular(5),
),
),
);
Solution 7 - Dart
Use transparent background color for the modalbottomsheet and give separate color for box decoration
showModalBottomSheet(
backgroundColor: Colors.transparent,
context: context, builder: (context) {
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft:Radius.circular(40) ,
topRight: Radius.circular(40)
),
),
padding: EdgeInsets.symmetric(vertical: 20,horizontal: 60),
child: Settings_Form(),
);
});
Solution 8 - Dart
showModalBottomSheet(
context: context,
builder: (context) => Container(
color: Color(0xff757575), //background color
child: new Container(
decoration: new BoxDecoration(
color: Colors.blue,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(40.0),
topRight: const Radius.circular(40.0))
),
child: new Center(
child: new Text("Hi modal sheet"),
)
),
)
This is will make your container color the same as the background color. And there will be a child container of the same height-width with blue color. This will make the corner with the same color as the background color.
Solution 9 - Dart
Three related packages for covering this issue with many advanced options are:
Solution 10 - Dart
class MyApp2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
appBarTheme: AppBarTheme(
elevation: 0,
color: Colors.blueAccent,
)
),
title: 'Welcome to flutter ',
home: HomePage()
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int number = 0;
void _increment(){
setState(() {
number ++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blueAccent,
appBar: AppBar(
title: Text('MyApp2'),
leading: Icon(Icons.menu),
// backgroundColor: Colors.blueAccent,
),
body: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(200.0),
topRight: Radius.circular(200)
),
color: Colors.white,
),
)
);
}
}
Solution 11 - Dart
If both containers are siblings and the bottom container has rounded corners and the top container is dynamic then you will have to use the stack widget
Stack(
children: [
/*your_widget_1*/,
/*your_widget_2*/,
],
);