I tried to create a container with box shadow but not able to get same result as I want. This is i achieved but i want to show shadow with rounded edges and one of my horizontal list with bottom shadow and 2nd with all side shadow. I also need low thickness of shadow. My lists have background image and text. Please help me how to achieve this.
My Code
Container(
height: 180.0,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: response.data.length,
itemBuilder: (context, index) {
return GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () {},
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: CachedNetworkImageProvider(
response.data[index].imageUrl,
),
fit: BoxFit.fill)),
margin: EdgeInsets.only(bottom: 6.0, right: 10.0),
width: MediaQuery.of(context).size.width - 100,
child: Container(
width: MediaQuery.of(context).size.width - 100,
margin: EdgeInsets.only(left: 8.0, right: 6.0),
decoration: BoxDecoration(
boxShadow: <BoxShadow>[
BoxShadow(
color: Color(0xff000000).withOpacity(.9),
blurRadius: 10.0,
spreadRadius: 2.0,
offset: Offset(0.0, 180))
],
),
child: Padding(
padding: const EdgeInsets.fromLTRB(
10.0, 35.0, 5.0, 0.0),
child: Text(
response.data[index].name.toUpperCase(),
style: GoogleFonts.roboto(
textStyle: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: Color(0xffFFFFFF))),
),
),
),
),
);
}),
)
this might help
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 2,
blurRadius: 3,
offset: Offset(0, 4)),
],
Ref Stackoverflow ref
use offset property of BoxShadow to control how the shadow should be visible and radius property to control thickness of the shadow.
Related
I have 3 positioned as children of Stack inside of ListView.builder
also set top and right for all 3 positioned when run, got this error
size.isFinite
Also I have error that
buttom overflowd by102 pixels
If I remove top and right Only and only from first positioned work currectly, what is my mistake
ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: HomeProvider().homeItems.length,
itemBuilder: (context, index) => SizedBox(
child: Stack(
children: [
Positioned(
top: 35,
right: 20,
child: Material(
child: Container(
height: 75.0,
width: width * 0.9,
decoration: BoxDecoration(
color: ColorManager.white,
borderRadius: BorderRadius.circular(0.0),
boxShadow: [
BoxShadow(
color: ColorManager.grey,
offset: const Offset(-10.0, 10.0),
blurRadius: 20.0,
spreadRadius: 4.0),
],
),
),
),),
positioned(
top:30,
right:45,
...
),
positioned(
top:30,
right:45,
...
),
]
Positioned needs to know Stack constraints if you want to position it (using top/right/bottom/left). So you need to assign some height to the SizedBox which wraps your Stack.
ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: HomeProvider().homeItems.length,
itemBuilder: (context, index) => SizedBox(
height: 100, // give some height here
child: Stack(
children: [
Positioned(
top: 35,
right: 20,
child: Material(
child: Container(
height: 75.0,
width: width * 0.9,
decoration: BoxDecoration(
color: ColorManager.white,
borderRadius: BorderRadius.circular(0.0),
boxShadow: [
BoxShadow(
color: ColorManager.grey,
offset: const Offset(-10.0, 10.0),
blurRadius: 20.0,
spreadRadius: 4.0),
],
),
),
),),
Positioned(
top:30,
right:45,
...
),
Positioned(
top:30,
right:45,
...
),
])));
I tried adding a shadow to a rounded container but Flutter adds shadows as if the container is a perpendicular rectangle, which I don't want. I looked up for this problem on Google but couldn't find any appropriate solution, please help me out.
Code for Container
Container(
width: MediaQuery.of(context).size.width * 0.82,
height: MediaQuery.of(context).size.height * 0.28,
padding: const EdgeInsets.symmetric(horizontal: 12),
decoration: BoxDecoration(
color: Color(0xFFF9D276),
borderRadius: BorderRadius.circular(35),
boxShadow: [
BoxShadow(
offset: Offset(0, 4),
color: Color(0xFFF9D276).withOpacity(0.15),
spreadRadius: 4,
blurRadius: 50
)
]
),
)
UPDATE
Answer from #HardikKumar & How I actually want it
You can use from this code for rounded rectangle :)
Container(
width: MediaQuery.of(context).size.width * 0.82,
height: MediaQuery.of(context).size.height * 0.28,
decoration: BoxDecoration(
color: Colors.green[700],
shape: BoxShape.rectangle,
borderRadius:BorderRadius.all(
Radius.circular(25)
)
),
margin: EdgeInsets.only(right: 8,top: 8),
child: IconButton(
icon: Icon(
Icons.send,
color: Colors.yellow[600],
),
onPressed:() {}
),
)
I'm sorry but I tested your code and the shadow shape appears with the same border as the decoration box
Image
I just edit the color of the shadow to black so i can see it better.
Maybe u want use a button like that , u need to use ButtonTheme to use height and width ,
Final edition:
Use Material , it has elevation property, shapeBorder and BorderRadiusGeometry, u can use an container as parent of Material for the width and height.
Link to Material Widget on Flutter
Problems in the code:
With the blurRadius of 50, you won't see any difference in shadow when you change the spreadRadius or the offset
With the opacity of 0.15, you will barely see any shadow (both in black or white backgound color)
Try this code:
Container(
width: MediaQuery.of(context).size.width * 0.82,
height: MediaQuery.of(context).size.height * 0.28,
padding: const EdgeInsets.symmetric(horizontal: 12),
decoration: BoxDecoration(
color: Color(0xFFF9D276),
borderRadius: BorderRadius.circular(35),
boxShadow: [
BoxShadow(
//offset: Offset(0, 4),
color: Color(0xFFF9D276), //edited
spreadRadius: 4,
blurRadius: 10 //edited
)
),
),
How it looks like:
If you need anything else, just let me know.
As far I get some idea from your first image, you can check the code below.
Center(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Color(0xff000000),
boxShadow: <BoxShadow>[
new BoxShadow(
color: Color(0x73000000),
blurRadius: 5.0,
spreadRadius: 1,
offset: new Offset(-10.0, 0.0),
),
],
),
width: MediaQuery.of(context).size.width * 0.82,
height: MediaQuery.of(context).size.height * 0.25,
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
child: Container(
width: MediaQuery.of(context).size.width * 0.82,
height: MediaQuery.of(context).size.height * 0.28,
// padding: const EdgeInsets.symmetric(horizontal: 12),
decoration: BoxDecoration(
color: Color(0xFFF9D276),
boxShadow: <BoxShadow>[
new BoxShadow(
color: Color(0xff000000),
blurRadius: 0.0,
spreadRadius: -2,
offset: new Offset(2.0, 0.0),
),
],
borderRadius: BorderRadius.circular(35),
),
),
),
),
)
You can try this
Stack(
children: [
Container(
margin: EdgeInsets.only(left: 2, top: 2),
child: Align(
alignment: Alignment.center,
child: OutlinedButton(
style: OutlinedButton.styleFrom(
primary: Colors.red,
backgroundColor: Colors.gray,
fixedSize: const Size(200, 50),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16.0),
),
side: const BorderSide(width: 3.0, color: ColorsConst.gray9),
),
child: const Text("Text"),
onPressed: () => print('Text'),
),
),
),
Container(
margin: EdgeInsets.only(right: 2, bottom: 2),
child: Align(
alignment: Alignment.center,
child: OutlinedButton(
style: OutlinedButton.styleFrom(
primary: Colors.red,
backgroundColor: Colors.gray,
fixedSize: const Size(200, 50),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16.0),
),
side: const BorderSide(width: 3.0, color: ColorsConst.gray9),
),
child: const Text("Text"),
onPressed: () => print('Text'),
),
),
)
]
)
I need to do something like the image attached
Here is what I've tried:
Container(
height: 300.0,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fitWidth,
alignment: FractionalOffset.center,
image: CachedNetworkImageProvider(image_url),
)
),
alignment: Alignment.bottomCenter,
child: Container(
margin: const EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
width: MediaQuery.of(context).size.width * 0.92,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: AutoSizeText(
my_text,
style: TextStyle(fontSize: 19),
maxLines: 1,
textAlign: TextAlign.center
)
),
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.8),
spreadRadius: 1,
blurRadius: 3,
offset: Offset(1, 1),
),
],
)
)
)
The problems of this code are:
If the image is not high enough, a white bar appears on top of the screen between the app bar and image
The position of the box with the text depends on the height of the container: I need the box is always half inside and half outside the image
You have to use a stack widget for it, but make sure you use BoxFit and as Cover which will fill the entire height of your container.
Stack(
alignment: Alignment.topCenter,
children: <Widget>[
Container(
height: 300.0,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
alignment: FractionalOffset.center,
image: AssetImage('assets/images/image.jpg'),
)),
),
Container(
margin: EdgeInsets.only(top: 280),
width: MediaQuery.of(context).size.width * 0.92,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text("jitesh",
style: TextStyle(fontSize: 19),
maxLines: 1,
textAlign: TextAlign.center)),
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.8),
spreadRadius: 1,
blurRadius: 3,
offset: Offset(1, 1),
),
],
),
)
],
),
For more info
https://medium.com/flutterworld/flutter-text-over-image-bb045a129bae
I have a ListView builder that has containers as children and I'd like each of these containers to have rounded corners, So i wrapped it in ClipRRect and gave it a borderRadius, but the only thing affected is the shadow.
here is the result:
ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: items.length,
itemBuilder: (BuildContext ctx, int index) {
return ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Container(
height: 20,
padding: EdgeInsets.symmetric(horizontal: 12, vertical: 6),
margin: EdgeInsets.symmetric(horizontal: 12),
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
boxShadow: [
BoxShadow(
color: Theme.of(context).primaryColor,
offset: Offset(0, -5),
blurRadius: 10.0)
]),
child: Text(
items[index],
style: TextStyle(fontSize: 12.0, color: Colors.white),
),
),
);
}),
What am I missing?
(I know I can use the borderRadius on the BoxDecoration, but I'm wondering why this does not work as well)
Remove the ClipRRect and give radius directly to the container.
If you want the shadows to stay then don't remove ClipRRect and just add the radius property to the inner container.
Container(
height: 20,
padding:
EdgeInsets.symmetric(horizontal: 12, vertical: 6),
margin: EdgeInsets.symmetric(horizontal: 12),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10)), //here
color: Theme.of(context).primaryColor,
boxShadow: [
BoxShadow(
color: Theme.of(context).primaryColor,
offset: Offset(0, -5),
blurRadius: 10.0)
]),
child: Text(
items[index],
style: TextStyle(fontSize: 12.0, color: Colors.white),
),
),
Edit: The rounded shadow you are getting is because of the offset that you have used for the inner container.
Edit: This might be helpful:
ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 10,
itemBuilder: (context, index) {
return Container(
width: 50,
padding: const EdgeInsets.all(10),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10)),
child: Container(
height: 10,
color: Colors.red,
),
),
);
},
),
I need to add shadow in my image. Just on image not the other container i try but its not showing shadow
Here is my code
return Container(
margin: EdgeInsets.only(left: 40),
width: MediaQuery.of(context).size.width * 0.5,
child: ListView.builder(
itemCount: _places.length,
itemBuilder: (ctx, int index) {
return Container(
padding: EdgeInsets.only(top: 50),
child: Column(
children: <Widget>[
Text(_places[index]['name'], style: TextStyle(fontSize: 20),),
Container(
padding: EdgeInsets.only(top: 20),
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10),
bottomLeft: Radius.circular(10),
bottomRight: Radius.circular(10)
),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
width: 200,
child: Image(image: AssetImage('assets/images/500place.jpg')),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 7),
child: Row(
children: <Widget>[
Icon(Icons.favorite_border, size: 20),
Spacer(),
Text(
_places[index]['where'],
),
],
)
),
],
),
);
}),
);
As you see the result of the output screen I need to show the light shadow on image only i added the box shadow in container but its not working on image only
Wrap it with a Card..that will give you the elevation(shadow)..
You can do it like this..
Card(
child: Container(),
elevation: 20.0, // give it according to your requirement
),
For a single shadow line
Card(
child: Container(
width: double.infinity,
height: 1,
),
elevation: 1.0, // give it according to your requirement
)