Someone knows how to do soft border radius, something like that :
Is it even possible with Flutter, I can't find how.
You can achieve this by using the borderRadius property of the decoration inside a Container.
For example:
Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(
height: 200,
width: 200,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.elliptical(20, 10)),
),
),
Container(
height: 200,
width: 200,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(20)),
),
),
],
),
will yield this result
on the other hand, if you want to have a different color for the border, you can try this, setting the color in the border property of the decoration property in the Container:
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(
height: 200,
width: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
border: Border.all(
color: Colors.red,
),
),
child: Center(
child: Text('Content...'),
),
),
],
),
),
the result for this is
You can use ClipRect.
ClipRRect(
// Change border radius and type(.zero, .roundrect, or absolute values) to get your desired effect
borderRadius: BorderRadius.circular(8.0),
child: Container(color: Colors.grey),
)
Related
I want to create a bottomnavigationbar for my Flutter app, which will contain the company's logo and a text side by side. This is my code:
bottomNavigationBar: Container(
padding: const EdgeInsets.all(10),
alignment: Alignment.bottomCenter,
width: MediaQuery.of(context).size.width,
height: 100, //how do I make it the default height of the bottomnavbar?
decoration: BoxDecoration(
color: Colors.yellow,
border: Border.all(
color: Colors.black, // Set border color
width: 3.0), // Set border width
borderRadius: const BorderRadius.all(
Radius.circular(10.0)), // Set rounded corner radius
boxShadow: const [BoxShadow(blurRadius: 10,color: Colors.black,offset: Offset(1,3))] // Make rounded corner of border
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const <Widget>[
Image(
image: AssetImage('images/company_logo.png'),
height: 90,
),
SizedBox(
width: 15,
),
Text("DEVELOPED BY COMPANY_NAME",style: TextStyle(fontWeight: FontWeight.bold, fontFamily: 'Lobster'))
]
)
)
I want the height of the child Container() to have the same default height as that of the bottomnavbar. How do I proceed?
bottomNavigationBar: Container(
padding: const EdgeInsets.all(10), //get error with image height remove this
alignment: Alignment.bottomCenter,
width: MediaQuery.of(context).size.width,
height: kBottomNavigationBarHeight, //get default height of the BottomNavigationBar
decoration: BoxDecoration(
color: Colors.yellow,
border: Border.all(
color: Colors.black, // Set border color
width: 3.0), // Set border width
borderRadius: const BorderRadius.all(
Radius.circular(10.0)), // Set rounded corner radius
boxShadow: const [BoxShadow(blurRadius: 10,color: Colors.black,offset: Offset(1,3))] // Make rounded corner of border
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const <Widget>[
Image(
image: AssetImage('images/company_logo.png'),
height: kBottomNavigationBarHeight,
),
SizedBox(
width: 15,
),
Text("DEVELOPED BY COMPANY_NAME",style: TextStyle(fontWeight: FontWeight.bold, fontFamily: 'Lobster'))
]
)
)
I am trying to make the display feature for my app, but I am having a hard time making these outer circles, any input is appreciated
There is a way to draw using coordinates.
You can set the ratio using MediaQuery.of(context).size.
return Scaffold(
body: SafeArea(
child: Stack(
children: <Widget>[
Positioned(
top: 200,
left: 80,
child: Container(
width: 200,
height: 200,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(128.0),
border: Border.all(color: Colors.blue),
),
),
),
Positioned(
top: 225,
left: 105,
child: Container(
width: 150,
height: 150,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(128.0),
border: Border.all(color: Colors.blue),
),
),
),
],
),
),
);
Use this:
Container(
color: Colors.white,
child: Center(
child: Container(
width: 200,
height: 200,
decoration: BoxDecoration(
gradient: const LinearGradient(
colors: [Colors.white,Colors.white, Colors.red, Colors.red, Colors.white,Colors.white],
transform: GradientRotation(pi / 2),
),
borderRadius: BorderRadius.circular(128.0),
),
child: Center(
child: Container(
width: 198,
height: 198,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(120.0),
),
),
),
),
),
),
It leads to this output:
use stack widget and put 2 circle containers with different size as children in stack widget
I want to add two boxes, one inside another. Here's my code and its not working for two boxes. how should I correct this. doc UI in this doc you can see the UI I implement so far and the UI I want to be implement.
Widget DetailBox() => Padding(
padding: const EdgeInsets.only(left: 25, right: 25),
child:Column(
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
color: Colors.white,
),
// alignment: Alignment.bottomCenter,
height: 400,
width: 300,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
color: Colors.lightBlue,
),
// alignment: Alignment.bottomCenter,
height: 100,
width: 300,
),
),
],
),
);
May it help you
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25),
),
elevation: 5,
shadowColor: Colors.blue.shade200,
child: Column(
children: [
Expanded(
flex: 1,
child: Container(
decoration: BoxDecoration(
color: Colors.lightBlueAccent,
borderRadius: BorderRadius.only(topLeft:Radius.circular(25),topRight:Radius.circular(25))
),
),
),
Expanded(
flex: 3,
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(bottomRight:Radius.circular(25),bottomLeft:Radius.circular(25))
),
),
)
],
),
),
According to the design of the app, put the image in the bule box.
The result I want to have
My current result
I was trying to add a title section for my categories but the result was not what I expected.
I'm looking to add a title section below each illustration in my categories.
child: Container(
height: 400.0,
width: 500.0,
padding: const EdgeInsets.all(10.0),
decoration: BoxDecoration(
color: ColorPallete.secondColor[50],
borderRadius: BorderRadius.circular(20.0),
),
child: SvgPicture.asset(
'assets/images/svg/megacategory/art__grocery.svg',
),
)
You can use a Column widget to align its contents vertically, in your example you can use it as follow (I have used some online images and colors you can edit it as per your requirement)-
Column(
children: [
SizedBox(height: 50.0),
Container(
height: 100.0,
width: 100.0,
padding: const EdgeInsets.all(10.0),
decoration: BoxDecoration(
color: Colors.orange[50],
borderRadius: BorderRadius.circular(20.0),
),
child: Image.network(
'https://img.icons8.com/cotton/online-shop-2--v2.png',
),
),
SizedBox(height: 10.0),
Text("Title Here")
],
),
It will arrange the contents as follows -
You can read more about Column widget here
child: Container(
height: 400.0,
width: 500.0,
padding: const EdgeInsets.all(10.0),
decoration: BoxDecoration(
color: ColorPallete.secondColor[50],
borderRadius: BorderRadius.circular(20.0),
),
child: Column(
children: [
SvgPicture.asset(
'assets/images/svg/megacategory/art__grocery.svg',
),
Text('Abarrotes')
)
You can wrap it with Column widget so you can add a Text widget under your container.
child: Column(
children: [
Container(
height: 400.0,
width: 500.0,
padding: const EdgeInsets.all(10.0),
decoration: BoxDecoration(
color: ColorPallete.secondColor[50],
borderRadius: BorderRadius.circular(20.0),
),
child: SvgPicture.asset(
'assets/images/svg/megacategory/art__grocery.svg',
),
),
Text("Your text",style: TextStyle(color: Colors.black) ),
],
),
You try put image in decoration instead of child and add text in child container as below.
Container(
decoration: BoxDecoration(
image: DecorationImage(image: NetworkImage(*imageUrl*)),
borderRadius: BorderRadius.all(Radius.circular(6.0)),
),
child: Text(*title*))
As I saw from the answers above you are facing an overflow problem when you are implementing these lines of code:
child: Container(
height: 400.0,
width: 500.0,
padding: const EdgeInsets.all(10.0),
decoration: BoxDecoration(
color: ColorPallete.secondColor[50],
borderRadius: BorderRadius.circular(20.0),
),
child: Column(
children: [
SvgPicture.asset(
'assets/images/svg/megacategory/art__grocery.svg',
),
Text('Abarrotes')
)
So add these two variables under your Widget build:
Widget build(BuildContext context) {
double width,height;
width = MediaQuery.of(context).size.width;//This means that width== the width of the device running the app in double
height = MediaQuery.of(context).size.height;//Same thing with the height
So now that you have the values of the device width and height you can experiment with their proportions:
child: Container(
height: height*x,//for example if you want it to take place in 1/4 of the screen x=0.25
width: width*x,//same thing here
padding: const EdgeInsets.all(10.0),
decoration: BoxDecoration(
color: ColorPallete.secondColor[50],
borderRadius: BorderRadius.circular(20.0),
),
child: Column(
children: [
SvgPicture.asset(
'assets/images/svg/megacategory/art__grocery.svg',
),
Text('Abarrotes')
)
Border radius not apply inside child Container.
Tried with SizedBox & Stack widget.
I need border view inside container.
Scaffold(
appBar: AppBar(
title: new Text("ListView"),
),
body: Center(
child: Padding(
padding: EdgeInsets.all(15.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
border: Border.all(
color: Colors.green,
width: 2.0
)
),
child: Container(
color: Colors.red,
)
),
)
)
)
Try this,
Use ClipRRect and nest inside another Container and now you can add non-uniform borders
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
boxShadow: [BoxShadow(color: Colors.black12, blurRadius: 5)],
),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Container(
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
border: Border(
left: BorderSide(color: Colors.indigo, width: 5),
),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(Icons.home),
Text("Home"),
],
),
),
),
)
Other answers already state that you need to use ClipRRect to apply the border radius to the child widget of Container.
However, Container widget now has its clipBehaviour property to clip its child:
Container(
// Add the line below
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
border: Border.all(color: Colors.green, width: 2.0)),
child: Container(
color: Colors.red,
),
);
It's a good pratice to use this property rather than nest the widgets for a clean code.
decoration is painted behind the child. If you want the decoration to be applied in front of the container's child, use foregroundDecoration
Scaffold(
appBar: AppBar(
title: new Text("ListView"),
),
body: Center(
child: Padding(
padding: EdgeInsets.all(15.0),
child: Container(
foregroundDecoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
border: Border.all(
color: Colors.green,
width: 2.0
)
),
child: Container(
color: Colors.red,
)
),
)
)
)
above code paints border in front of the child container. Please note that, even with foregroundDecoration child container would still have sharp corners.
If you want the child container to have rounded corners, either you need apply borderRadius to the child container or use ClipRRect with same border radius as the parent container
Instead of
Container
widget use
ClipRRect
Before (not working):
Center(
child: Container(
decoration: BoxDecoration(
borderRadius: _getAllRoundedBorderRadius(),
),
child: Hero(
tag: "CossackHero",
child: TweenImage(
last: AssetImage("images/background/cossack_0.jpg"),
first: AssetImage("images/background/c_cossack_0.jpg"),
duration: 2,
height: height,
),
),
),
),
After:
Center(
child: ClipRRect(
borderRadius: getAllRoundedBorderRadius(),
child: Hero(
tag: "CossackHero",
child: TweenImage(
last: AssetImage("images/background/cossack_0.jpg"),
first: AssetImage("images/background/c_cossack_0.jpg"),
duration: 2,
height: height,
),
),
),
),
Screenshot:
With ClipRRect (Using 2 Container)
ClipRRect(
borderRadius: BorderRadius.circular(16),
child: Container(
width: 100,
height: 100,
color: Colors.black,
child: Container(
margin: EdgeInsets.all(8),
color: Colors.blue,
),
),
)
Without ClipRRect (Using 1 Container)
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
border: Border.all(
color: Colors.black,
width: 4,
),
color: Colors.blue,
),
)
Replace your code with this
Scaffold(
appBar: AppBar(
title: new Text("ListView"),
),
body: Center(
child: Padding(
padding: EdgeInsets.all(15.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
border: Border.all(
color: Colors.green,
width: 2.0
)
),
child: Container(
decoration: new BoxDecoration(borderRadius:
BorderRadius.circular(15.0),
color: Colors.red,),
)
),
)
)
)
const innerRadius = 15.0;
const borderWidth = 2.0;
const borderColor = Colors.green;
const color = Colors.red;
const size = 100.0;
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(innerRadius + borderWidth),
color: borderColor,
),
padding: EdgeInsets.all(borderWidth),
child: ClipRRect(
borderRadius: BorderRadius.circular(innerRadius),
child: Container(
color: color,
width: size,
height: size,
),
),
);
This is how it looks:
And how it works: https://codepen.io/mshibanami/pen/LYyQJXa
By the way, some answers suggest you using one Container that has decoration including border and color like this:
Container(
width: size,
height: size,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(innerRadius),
border: Border.all(
color: borderColor,
width: borderWidth,
),
color: color,
),
)
It's OK but not ideal because the inner color appears slightly outside the border. So when the border is close to the background color, it may stand out like this:
try
decoration: BoxDecoration(
gradient: new LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [0.02, 0.02],
colors: [Colors.red, Colors.white],
),
borderRadius: BorderRadius.all(Radius.circular(10)),
color: Colors.white,
boxShadow: [
BoxShadow(color: Colors.grey, blurRadius: 5.0),
],
),
you have to just add these line of code clipBehavior:Clip.hardEdge,
Scaffold(
appBar: AppBar(
title: new Text("ListView"),
),
body: Center(
child: Padding(
padding: EdgeInsets.all(15.0),
child: Container(
clipBehavior:Clip.hardEdge,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
border: Border.all(
color: Colors.green,
width: 2.0
)
),
child: Container(
color: Colors.red,
)
),
)
)
)
I guess your container might just not be visible because it has no child/height/width.
Try adding some Text as a child or if you want it to expand, you can force with SizedBox.expand.
See this answer for example on borders.