Container(
decoration: BoxDecoration(
boxShadow: BoxShadow(
color: Colors.black,
blurRadius: 5,
spreadRadius: 6,
),
color: Color.fromARGB(255, 255, 255, 255),
border: Border(
left: BorderSide(color: Colors.black, width: 10.0),
),
),
)
What is wrong, why are there red lines under the Boxshadow? I watched a video and did exactly what he did. Where is the mistake?
You need to pass list of BoxShadow on boxShadow.
Container(
decoration: BoxDecoration(
boxShadow: [ // issue was here
BoxShadow(
color: Colors.black,
blurRadius: 5,
spreadRadius: 6,
),
],
color: Color.fromARGB(255, 255, 255, 255),
border: Border(
left: BorderSide(color: Colors.black, width: 10.0),
),
),
)
More about Container
Related
I'm looking for the way to create rounded container with only topLeft and topRight radiuses and without bottom border. Here is what I tried:
Container(
decoration: BoxDecoration(
border: Border(
left: BorderSide(
color: AppColors.lightPurple2,
),
right: BorderSide(
color: AppColors.lightPurple2,
),
top: BorderSide(
color: AppColors.lightPurple2,
),
),
// border: Border.all(
// color: AppColors.lightPurple2,
// ),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(Rad.sm),
topRight: Radius.circular(Rad.sm),
),
),
But this code doesn't work
======== Exception caught by rendering library =====================================================
The following assertion was thrown during paint():
A borderRadius can only be given for a uniform Border.
The following is not uniform:
BorderSide.color
BorderSide.width
BorderSide.style
However if I use Border.all() it works good but I need to remove bottom border somehow.
If I remove borderRadius it draw 3 border but without radiuses.
So is there a way to use both options?
What I want to get eventually:
You can use shadow and achieve the same result
Container(
height: 300,
width: 300,
decoration: BoxDecoration(
borderRadius:
BorderRadius.vertical(top: Radius.circular(10)),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.purple,
offset: Offset(2, -2),
spreadRadius: 0,
blurRadius: 0),
BoxShadow(
color: Colors.purple,
offset: Offset(-2, -2),
spreadRadius: 0,
blurRadius: 0)
]))
How to add elevation to a container with borderRadius
I have tried Material/elevation and ClipRRect.showBox but it doesn't look as good as regular elevation
You can use a Container with boxShadow and borderRadius like that for example:
Container(
width: 200,
height: 100,
decoration: const BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.all(
Radius.circular(15.0),
),
boxShadow: [
BoxShadow(
offset: Offset(0, 0),
blurRadius: 2,
spreadRadius: 2,
color: Colors.black26,
),
],
),
);
It will look something like that:
You can play with the shadows to achieve the elevation you want.
Add BoxShadow with grey shadow color, it will give an elevation effect.
Container(
height: 200, /// Change height and width as per your need.
width: 200,
child: Container(
color: Colors.red
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
),
Output:
When I use GridView in Flutter, there is extra margin at the top, I set the padding and margin to 0 and still the problem persists.
Here is my code:
Container(
padding: EdgeInsets.only(top: 25, bottom: 0, right: 25, left: 25),
margin: EdgeInsets.zero,
child: Text(
'Let\'s begin',
style: TextStyle(
fontSize: 2,
fontWeight: FontWeight.w700),
),
),
GridView(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
children: [
Container(
margin: EdgeInsets.all(20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: darkModeOn ? Color.fromRGBO(10, 10, 50, 1) : Colors.white,
border: darkModeOn ? Border.all(color: Colors.white, width: 2) : null,
boxShadow: darkModeOn
? null
: [
BoxShadow(
color: Colors.black.withOpacity(0.175),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
),
Container(
margin: EdgeInsets.all(20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: darkModeOn ? Color.fromRGBO(10, 10, 50, 1) : Colors.white,
border: darkModeOn ? Border.all(color: Colors.white, width: 2) : null,
boxShadow: darkModeOn
? null
: [
BoxShadow(
color: Colors.black.withOpacity(0.175),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
),
Container(
margin: EdgeInsets.all(20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: darkModeOn ? Color.fromRGBO(10, 10, 50, 1) : Colors.white,
border: darkModeOn ? Border.all(color: Colors.white, width: 2) : null,
boxShadow: darkModeOn
? null
: [
BoxShadow(
color: Colors.black.withOpacity(0.175),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
),
Container(
margin: EdgeInsets.all(20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: darkModeOn ? Color.fromRGBO(10, 10, 50, 1) : Colors.white,
border: darkModeOn ? Border.all(color: Colors.white, width: 2) : null,
boxShadow: darkModeOn
? null
: [
BoxShadow(
color: Colors.black.withOpacity(0.175),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
),
],
),
I wrapped the above code with ListView. The extra margin on top makes the page look bad. I searched about this problem and found nothing.
The output:
What I actually want:
I fixed It! I added
padding: EdgeInsets.zero
to the GridView
How can I add this outer glow shadow to this button on Flutter?
On Figma:
It's done by either
filter: drop-shadow(0px 0px 20px rgba(255, 85, 85, 0.7));
or
Effect: Drop Shadow
Radius: 20px
Offset: 0px, 0px
rgba(255, 85, 85, 0.7)
Applying a BoxShadow to the container which contains the button does not work:
BoxShadow(
color: Color.fromRGBO(0, 0, 0, _opacity),
offset: Offset(_xOffset, _yOffset),
blurRadius: _blurRadius,
spreadRadius: _spreadRadius,
Because it's constrained by the container size.
With blurRadius and if you want to make color more visible add spreadRadius value.
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(50),
border: Border.all(color: Colors.black, width: 2),
boxShadow: [
BoxShadow(
color: Colors.red,
blurRadius: 30,
),
],
),
Wrap button with the container and give it box-shadow property.
it works...
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(18.0),
),
color: Colors.red,
boxShadow: [
BoxShadow(
color: Colors.pink,
spreadRadius: 4,
blurRadius: 10,
offset: Offset(0, 0),
)
]),
child: FlatButton(
onPressed:(){},
child: Text("submit"),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
),
),
I added borders on 3 of 4 sides of my Container. It is not shown if I'm adding a borderRadius in the BoxDecoration. Without the borderRadius it is visible with the borders and the text in it. How can I add a borderRadius to the Container without it being hidden?
[...]
Container(
padding: EdgeInsets.all(10),
height: 85,
width: 330,
decoration: BoxDecoration(
border: Border(
top: BorderSide(color: Colors.black, width: 2),
right: BorderSide(color: Colors.black, width: 2),
bottom: BorderSide(color: Colors.black, width: 2),
),
// borderRadius: BorderRadius.all(Radius.circular(5)),
),
child: Text(
'Example text! Example text! Example text! Example text!',
style: TextStyle(fontSize: 22, fontFamily: 'Dosis'),
),
),
[...]
You can get reference from below code..
body: Container(
margin: EdgeInsets.all(100.0),
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(25.0),
bottomRight: Radius.circular(25.0)
) ,
border: Border(
top: BorderSide(color: Colors.black, width: 2),
right: BorderSide(color: Colors.black, width: 2),
bottom: BorderSide(color: Colors.black, width: 2),
),
),
)