How to fix cropped shadow in a Horizontal List View in FlutterHow do I crop an image in Flutter?Flutter : Can I add a Header Row to a ListViewFlutter: Minimum height on horizontal list viewFlutter List View error in building list viewHow to offset a scaffold widget in Flutter?List of horizontal list in FlutterFlutter : Bad state: Stream has already been listened toFlutter list view rendering issuehorizontal list view in the custom scroll google flutterFlutter scrollable body with horizontal list and grid as children
Expand a hexagon
If the Charles SSL Proxy shows me sensitive data, is that data insecure/exposed?
How do you cope with rejection?
Presenting 2 results for one variable using a left brace
How could the B-29 bomber back up under its own power?
Is presenting a play showing Military characters in a bad light a crime in the US?
If you attack a Tarrasque while swallowed, what AC do you need to beat to hit it?
Story about encounter with hostile aliens
How do we properly manage transitions within a descriptive section?
Salesforce bug enabled "Modify All"
Circuit construction for execution of conditional statements using least significant bit
why "American-born", not "America-born"?
What is this dime sized black bug with white on the segments near Loveland Colorodao?
Vehemently against code formatting
Does science define life as "beginning at conception"?
How can sister protect herself from impulse purchases with a credit card?
Good examples of "two is easy, three is hard" in computational sciences
How should I mix small caps with digits or symbols?
Is my company merging branches wrong?
Mikrokosmos, BB 105, Vol. 1: No. 17 Contrary Motion (1) - Can't understand the structure
Is it wise to pay off mortgage with 401k?
Warped chessboard
Does the Aboleth have expertise in History and Perception?
How to become an Editorial board member?
How to fix cropped shadow in a Horizontal List View in Flutter
How do I crop an image in Flutter?Flutter : Can I add a Header Row to a ListViewFlutter: Minimum height on horizontal list viewFlutter List View error in building list viewHow to offset a scaffold widget in Flutter?List of horizontal list in FlutterFlutter : Bad state: Stream has already been listened toFlutter list view rendering issuehorizontal list view in the custom scroll google flutterFlutter scrollable body with horizontal list and grid as children
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
When I create a Container with box shadow inside a ListView (scrolls Horizontally), the shadow looks fine, but, when I add multiple Containers inside the ListView, their shadows(just shadows, not Container) gets cropped at top and bottom.
Please also note that this whole ListView is wrapped under a parent Container.
I tried to increase the height of Parent Container(in which the whole ListView is wrapped), but it increases the height of child Container with its shadow still cropped.
I also tried to give padding to Parent Container but, it still shadow still gets cropped.
Maybe I need to wrap the ListView inside any other Widget which can get the job done without the problem.
Container(
// padding: EdgeInsets.only(left: 30.0, right: 0.0),
height: 140.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
SizedBox(
width: 30.0,
),
Container(
//This is actual custom Card
width: 340.0,
height: 140.0,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset.zero,
blurRadius: 10.0,
spreadRadius: 0.0,
)
],
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child: Image.asset(
'assets/images/leather_boot.png'),
),
Container(
padding:
EdgeInsets.only(top: 30.0, bottom: 30.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'BadAss Genuine',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Leather Boots',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.5,
width: 150.0,
color: Color(0xff643523),
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
Container(
//This is actual custom Card
width: 340.0,
height: 140.0,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset.zero,
blurRadius: 10.0,
spreadRadius: 0.0,
)
],
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child: Image.asset(
'assets/images/leather_boot.png'),
),
Container(
padding:
EdgeInsets.only(top: 30.0, bottom: 30.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'BadAss Genuine',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Leather Boots',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.5,
width: 150.0,
color: Color(0xff643523),
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
],
),
),
I expect the ListView to have Containers(as custom Cards) to have proper BoxShadow, but in the actual output, Containers' BoxShadow gets cropped from both Top & Bottom.
dart
flutter asked Mar 23 at 19:17
Akash DivyaAkash Divya
1
add a comment |
When I create a Container with box shadow inside a ListView (scrolls Horizontally), the shadow looks fine, but, when I add multiple Containers inside the ListView, their shadows(just shadows, not Container) gets cropped at top and bottom.
Please also note that this whole ListView is wrapped under a parent Container.
I tried to increase the height of Parent Container(in which the whole ListView is wrapped), but it increases the height of child Container with its shadow still cropped.
I also tried to give padding to Parent Container but, it still shadow still gets cropped.
Maybe I need to wrap the ListView inside any other Widget which can get the job done without the problem.
Container(
// padding: EdgeInsets.only(left: 30.0, right: 0.0),
height: 140.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
SizedBox(
width: 30.0,
),
Container(
//This is actual custom Card
width: 340.0,
height: 140.0,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset.zero,
blurRadius: 10.0,
spreadRadius: 0.0,
)
],
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child: Image.asset(
'assets/images/leather_boot.png'),
),
Container(
padding:
EdgeInsets.only(top: 30.0, bottom: 30.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'BadAss Genuine',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Leather Boots',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.5,
width: 150.0,
color: Color(0xff643523),
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
Container(
//This is actual custom Card
width: 340.0,
height: 140.0,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset.zero,
blurRadius: 10.0,
spreadRadius: 0.0,
)
],
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child: Image.asset(
'assets/images/leather_boot.png'),
),
Container(
padding:
EdgeInsets.only(top: 30.0, bottom: 30.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'BadAss Genuine',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Leather Boots',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.5,
width: 150.0,
color: Color(0xff643523),
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
],
),
),
I expect the ListView to have Containers(as custom Cards) to have proper BoxShadow, but in the actual output, Containers' BoxShadow gets cropped from both Top & Bottom.
dart
flutter asked Mar 23 at 19:17
Akash DivyaAkash Divya
1
add a comment |
When I create a Container with box shadow inside a ListView (scrolls Horizontally), the shadow looks fine, but, when I add multiple Containers inside the ListView, their shadows(just shadows, not Container) gets cropped at top and bottom.
Please also note that this whole ListView is wrapped under a parent Container.
I tried to increase the height of Parent Container(in which the whole ListView is wrapped), but it increases the height of child Container with its shadow still cropped.
I also tried to give padding to Parent Container but, it still shadow still gets cropped.
Maybe I need to wrap the ListView inside any other Widget which can get the job done without the problem.
Container(
// padding: EdgeInsets.only(left: 30.0, right: 0.0),
height: 140.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
SizedBox(
width: 30.0,
),
Container(
//This is actual custom Card
width: 340.0,
height: 140.0,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset.zero,
blurRadius: 10.0,
spreadRadius: 0.0,
)
],
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child: Image.asset(
'assets/images/leather_boot.png'),
),
Container(
padding:
EdgeInsets.only(top: 30.0, bottom: 30.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'BadAss Genuine',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Leather Boots',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.5,
width: 150.0,
color: Color(0xff643523),
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
Container(
//This is actual custom Card
width: 340.0,
height: 140.0,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset.zero,
blurRadius: 10.0,
spreadRadius: 0.0,
)
],
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child: Image.asset(
'assets/images/leather_boot.png'),
),
Container(
padding:
EdgeInsets.only(top: 30.0, bottom: 30.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'BadAss Genuine',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Leather Boots',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.5,
width: 150.0,
color: Color(0xff643523),
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
],
),
),
I expect the ListView to have Containers(as custom Cards) to have proper BoxShadow, but in the actual output, Containers' BoxShadow gets cropped from both Top & Bottom.
dart
flutter asked Mar 23 at 19:17
Akash DivyaAkash Divya
1
When I create a Container with box shadow inside a ListView (scrolls Horizontally), the shadow looks fine, but, when I add multiple Containers inside the ListView, their shadows(just shadows, not Container) gets cropped at top and bottom.
Please also note that this whole ListView is wrapped under a parent Container.
I tried to increase the height of Parent Container(in which the whole ListView is wrapped), but it increases the height of child Container with its shadow still cropped.
I also tried to give padding to Parent Container but, it still shadow still gets cropped.
Maybe I need to wrap the ListView inside any other Widget which can get the job done without the problem.
Container(
// padding: EdgeInsets.only(left: 30.0, right: 0.0),
height: 140.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
SizedBox(
width: 30.0,
),
Container(
//This is actual custom Card
width: 340.0,
height: 140.0,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset.zero,
blurRadius: 10.0,
spreadRadius: 0.0,
)
],
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child: Image.asset(
'assets/images/leather_boot.png'),
),
Container(
padding:
EdgeInsets.only(top: 30.0, bottom: 30.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'BadAss Genuine',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Leather Boots',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.5,
width: 150.0,
color: Color(0xff643523),
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
Container(
//This is actual custom Card
width: 340.0,
height: 140.0,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset.zero,
blurRadius: 10.0,
spreadRadius: 0.0,
)
],
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child: Image.asset(
'assets/images/leather_boot.png'),
),
Container(
padding:
EdgeInsets.only(top: 30.0, bottom: 30.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'BadAss Genuine',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Leather Boots',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.5,
width: 150.0,
color: Color(0xff643523),
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
],
),
),
I expect the ListView to have Containers(as custom Cards) to have proper BoxShadow, but in the actual output, Containers' BoxShadow gets cropped from both Top & Bottom.
dart
flutter dart
flutter asked Mar 23 at 19:17
Akash DivyaAkash Divya
1
asked Mar 23 at 19:17
Akash DivyaAkash Divya
1
asked Mar 23 at 19:17
Akash DivyaAkash Divya
1
asked Mar 23 at 19:17
Akash DivyaAkash Divya
1
asked Mar 23 at 19:17
Akash DivyaAkash Divya
1
1
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Okay I found the solution myself.
Steps to fix the problem
Create several Container(as a card) with some width and with a BoxShadow of Radius 10.0. Lets call it Child Container.
Create a ListView with Horizontal scroll axis. Put Child Containers made above in this ListView.
Now wrap the ListView inside a new Container(Lets call it Parent Container) to give ListView a height. If you want your Child Containers to be of height 140.0, then make your Parent Container's height 160.0, which includes radius of BoxShadow of 10.0 on top & bottom each(10.0+ 140.0 + 10.0).
Now give padding to your ListView of 10.0 on both top & bottom.
Problem Solved (Silly Me).
Sample Code here
Container(
height: 160.0,
child: ListView(
padding: EdgeInsets.only(top: 10.0, bottom: 10.0),
shrinkWrap: true,
scrollDirection: Axis.horizontal,
children: <Widget>[
SizedBox(
width: 30.0,
),
Container(
width: 340.0,
// height: 140.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
blurRadius: 10.0,
color: Colors.black12,
)
],
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child: Image.asset(
'assets/images/leather_boot.png'),
),
Container(
padding:
EdgeInsets.only(top: 20.0, bottom: 20.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'BadAss Genuine',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Leather Boots',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.0,
width: 150.0,
color: Color(0xff643523),
),
SizedBox(
height: 12.0,
),
Row(
children: <Widget>[
SizedBox(
width: 110.0,
),
Container(
height: 30.0,
width: 30.0,
child: Image.asset(
'assets/images/boot.png'),
),
],
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
Container(
//This is actual custom Card
width: 340.0,
// height: 140.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
blurRadius: 10.0,
color: Colors.black12,
)
],
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child:
Image.asset('assets/images/gloves.png'),
),
Container(
padding:
EdgeInsets.only(top: 20.0, bottom: 20.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'Highly Durable',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Riding Gloves',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.0,
width: 150.0,
color: Color(0xff643523),
),
SizedBox(
height: 12.0,
),
Row(
children: <Widget>[
SizedBox(
width: 110.0,
),
Container(
height: 30.0,
width: 30.0,
child: Image.asset(
'assets/images/glove.png'),
),
],
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
Container(
//This is actual custom Card
width: 340.0,
// height: 140.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
blurRadius: 10.0,
color: Colors.black12,
)
],
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child:
Image.asset('assets/images/helmet.png'),
),
Container(
padding:
EdgeInsets.only(top: 20.0, bottom: 20.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'German Hat',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Riding Helmet',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.0,
width: 150.0,
color: Color(0xff643523),
),
SizedBox(
height: 12.0,
),
Row(
children: <Widget>[
SizedBox(
width: 110.0,
),
Container(
height: 30.0,
width: 30.0,
child: Image.asset(
'assets/images/helmeticon.png'),
),
],
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
],
),
),
answered Mar 25 at 9:17
Akash DivyaAkash Divya
1
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55317469%2fhow-to-fix-cropped-shadow-in-a-horizontal-list-view-in-flutter%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Okay I found the solution myself.
Steps to fix the problem
Create several Container(as a card) with some width and with a BoxShadow of Radius 10.0. Lets call it Child Container.
Create a ListView with Horizontal scroll axis. Put Child Containers made above in this ListView.
Now wrap the ListView inside a new Container(Lets call it Parent Container) to give ListView a height. If you want your Child Containers to be of height 140.0, then make your Parent Container's height 160.0, which includes radius of BoxShadow of 10.0 on top & bottom each(10.0+ 140.0 + 10.0).
Now give padding to your ListView of 10.0 on both top & bottom.
Problem Solved (Silly Me).
Sample Code here
Container(
height: 160.0,
child: ListView(
padding: EdgeInsets.only(top: 10.0, bottom: 10.0),
shrinkWrap: true,
scrollDirection: Axis.horizontal,
children: <Widget>[
SizedBox(
width: 30.0,
),
Container(
width: 340.0,
// height: 140.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
blurRadius: 10.0,
color: Colors.black12,
)
],
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child: Image.asset(
'assets/images/leather_boot.png'),
),
Container(
padding:
EdgeInsets.only(top: 20.0, bottom: 20.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'BadAss Genuine',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Leather Boots',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.0,
width: 150.0,
color: Color(0xff643523),
),
SizedBox(
height: 12.0,
),
Row(
children: <Widget>[
SizedBox(
width: 110.0,
),
Container(
height: 30.0,
width: 30.0,
child: Image.asset(
'assets/images/boot.png'),
),
],
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
Container(
//This is actual custom Card
width: 340.0,
// height: 140.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
blurRadius: 10.0,
color: Colors.black12,
)
],
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child:
Image.asset('assets/images/gloves.png'),
),
Container(
padding:
EdgeInsets.only(top: 20.0, bottom: 20.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'Highly Durable',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Riding Gloves',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.0,
width: 150.0,
color: Color(0xff643523),
),
SizedBox(
height: 12.0,
),
Row(
children: <Widget>[
SizedBox(
width: 110.0,
),
Container(
height: 30.0,
width: 30.0,
child: Image.asset(
'assets/images/glove.png'),
),
],
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
Container(
//This is actual custom Card
width: 340.0,
// height: 140.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
blurRadius: 10.0,
color: Colors.black12,
)
],
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child:
Image.asset('assets/images/helmet.png'),
),
Container(
padding:
EdgeInsets.only(top: 20.0, bottom: 20.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'German Hat',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Riding Helmet',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.0,
width: 150.0,
color: Color(0xff643523),
),
SizedBox(
height: 12.0,
),
Row(
children: <Widget>[
SizedBox(
width: 110.0,
),
Container(
height: 30.0,
width: 30.0,
child: Image.asset(
'assets/images/helmeticon.png'),
),
],
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
],
),
),
answered Mar 25 at 9:17
Akash DivyaAkash Divya
1
add a comment |
Okay I found the solution myself.
Steps to fix the problem
Create several Container(as a card) with some width and with a BoxShadow of Radius 10.0. Lets call it Child Container.
Create a ListView with Horizontal scroll axis. Put Child Containers made above in this ListView.
Now wrap the ListView inside a new Container(Lets call it Parent Container) to give ListView a height. If you want your Child Containers to be of height 140.0, then make your Parent Container's height 160.0, which includes radius of BoxShadow of 10.0 on top & bottom each(10.0+ 140.0 + 10.0).
Now give padding to your ListView of 10.0 on both top & bottom.
Problem Solved (Silly Me).
Sample Code here
Container(
height: 160.0,
child: ListView(
padding: EdgeInsets.only(top: 10.0, bottom: 10.0),
shrinkWrap: true,
scrollDirection: Axis.horizontal,
children: <Widget>[
SizedBox(
width: 30.0,
),
Container(
width: 340.0,
// height: 140.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
blurRadius: 10.0,
color: Colors.black12,
)
],
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child: Image.asset(
'assets/images/leather_boot.png'),
),
Container(
padding:
EdgeInsets.only(top: 20.0, bottom: 20.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'BadAss Genuine',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Leather Boots',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.0,
width: 150.0,
color: Color(0xff643523),
),
SizedBox(
height: 12.0,
),
Row(
children: <Widget>[
SizedBox(
width: 110.0,
),
Container(
height: 30.0,
width: 30.0,
child: Image.asset(
'assets/images/boot.png'),
),
],
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
Container(
//This is actual custom Card
width: 340.0,
// height: 140.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
blurRadius: 10.0,
color: Colors.black12,
)
],
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child:
Image.asset('assets/images/gloves.png'),
),
Container(
padding:
EdgeInsets.only(top: 20.0, bottom: 20.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'Highly Durable',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Riding Gloves',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.0,
width: 150.0,
color: Color(0xff643523),
),
SizedBox(
height: 12.0,
),
Row(
children: <Widget>[
SizedBox(
width: 110.0,
),
Container(
height: 30.0,
width: 30.0,
child: Image.asset(
'assets/images/glove.png'),
),
],
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
Container(
//This is actual custom Card
width: 340.0,
// height: 140.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
blurRadius: 10.0,
color: Colors.black12,
)
],
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child:
Image.asset('assets/images/helmet.png'),
),
Container(
padding:
EdgeInsets.only(top: 20.0, bottom: 20.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'German Hat',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Riding Helmet',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.0,
width: 150.0,
color: Color(0xff643523),
),
SizedBox(
height: 12.0,
),
Row(
children: <Widget>[
SizedBox(
width: 110.0,
),
Container(
height: 30.0,
width: 30.0,
child: Image.asset(
'assets/images/helmeticon.png'),
),
],
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
],
),
),
answered Mar 25 at 9:17
Akash DivyaAkash Divya
1
add a comment |
Okay I found the solution myself.
Steps to fix the problem
Create several Container(as a card) with some width and with a BoxShadow of Radius 10.0. Lets call it Child Container.
Create a ListView with Horizontal scroll axis. Put Child Containers made above in this ListView.
Now wrap the ListView inside a new Container(Lets call it Parent Container) to give ListView a height. If you want your Child Containers to be of height 140.0, then make your Parent Container's height 160.0, which includes radius of BoxShadow of 10.0 on top & bottom each(10.0+ 140.0 + 10.0).
Now give padding to your ListView of 10.0 on both top & bottom.
Problem Solved (Silly Me).
Sample Code here
Container(
height: 160.0,
child: ListView(
padding: EdgeInsets.only(top: 10.0, bottom: 10.0),
shrinkWrap: true,
scrollDirection: Axis.horizontal,
children: <Widget>[
SizedBox(
width: 30.0,
),
Container(
width: 340.0,
// height: 140.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
blurRadius: 10.0,
color: Colors.black12,
)
],
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child: Image.asset(
'assets/images/leather_boot.png'),
),
Container(
padding:
EdgeInsets.only(top: 20.0, bottom: 20.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'BadAss Genuine',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Leather Boots',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.0,
width: 150.0,
color: Color(0xff643523),
),
SizedBox(
height: 12.0,
),
Row(
children: <Widget>[
SizedBox(
width: 110.0,
),
Container(
height: 30.0,
width: 30.0,
child: Image.asset(
'assets/images/boot.png'),
),
],
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
Container(
//This is actual custom Card
width: 340.0,
// height: 140.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
blurRadius: 10.0,
color: Colors.black12,
)
],
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child:
Image.asset('assets/images/gloves.png'),
),
Container(
padding:
EdgeInsets.only(top: 20.0, bottom: 20.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'Highly Durable',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Riding Gloves',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.0,
width: 150.0,
color: Color(0xff643523),
),
SizedBox(
height: 12.0,
),
Row(
children: <Widget>[
SizedBox(
width: 110.0,
),
Container(
height: 30.0,
width: 30.0,
child: Image.asset(
'assets/images/glove.png'),
),
],
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
Container(
//This is actual custom Card
width: 340.0,
// height: 140.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
blurRadius: 10.0,
color: Colors.black12,
)
],
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child:
Image.asset('assets/images/helmet.png'),
),
Container(
padding:
EdgeInsets.only(top: 20.0, bottom: 20.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'German Hat',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Riding Helmet',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.0,
width: 150.0,
color: Color(0xff643523),
),
SizedBox(
height: 12.0,
),
Row(
children: <Widget>[
SizedBox(
width: 110.0,
),
Container(
height: 30.0,
width: 30.0,
child: Image.asset(
'assets/images/helmeticon.png'),
),
],
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
],
),
),
answered Mar 25 at 9:17
Akash DivyaAkash Divya
1
Okay I found the solution myself.
Steps to fix the problem
Create several Container(as a card) with some width and with a BoxShadow of Radius 10.0. Lets call it Child Container.
Create a ListView with Horizontal scroll axis. Put Child Containers made above in this ListView.
Now wrap the ListView inside a new Container(Lets call it Parent Container) to give ListView a height. If you want your Child Containers to be of height 140.0, then make your Parent Container's height 160.0, which includes radius of BoxShadow of 10.0 on top & bottom each(10.0+ 140.0 + 10.0).
Now give padding to your ListView of 10.0 on both top & bottom.
Problem Solved (Silly Me).
Sample Code here
Container(
height: 160.0,
child: ListView(
padding: EdgeInsets.only(top: 10.0, bottom: 10.0),
shrinkWrap: true,
scrollDirection: Axis.horizontal,
children: <Widget>[
SizedBox(
width: 30.0,
),
Container(
width: 340.0,
// height: 140.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
blurRadius: 10.0,
color: Colors.black12,
)
],
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child: Image.asset(
'assets/images/leather_boot.png'),
),
Container(
padding:
EdgeInsets.only(top: 20.0, bottom: 20.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'BadAss Genuine',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Leather Boots',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.0,
width: 150.0,
color: Color(0xff643523),
),
SizedBox(
height: 12.0,
),
Row(
children: <Widget>[
SizedBox(
width: 110.0,
),
Container(
height: 30.0,
width: 30.0,
child: Image.asset(
'assets/images/boot.png'),
),
],
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
Container(
//This is actual custom Card
width: 340.0,
// height: 140.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
blurRadius: 10.0,
color: Colors.black12,
)
],
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child:
Image.asset('assets/images/gloves.png'),
),
Container(
padding:
EdgeInsets.only(top: 20.0, bottom: 20.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'Highly Durable',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Riding Gloves',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.0,
width: 150.0,
color: Color(0xff643523),
),
SizedBox(
height: 12.0,
),
Row(
children: <Widget>[
SizedBox(
width: 110.0,
),
Container(
height: 30.0,
width: 30.0,
child: Image.asset(
'assets/images/glove.png'),
),
],
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
Container(
//This is actual custom Card
width: 340.0,
// height: 140.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
blurRadius: 10.0,
color: Colors.black12,
)
],
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child:
Image.asset('assets/images/helmet.png'),
),
Container(
padding:
EdgeInsets.only(top: 20.0, bottom: 20.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'German Hat',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Riding Helmet',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.0,
width: 150.0,
color: Color(0xff643523),
),
SizedBox(
height: 12.0,
),
Row(
children: <Widget>[
SizedBox(
width: 110.0,
),
Container(
height: 30.0,
width: 30.0,
child: Image.asset(
'assets/images/helmeticon.png'),
),
],
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
],
),
),
answered Mar 25 at 9:17
Akash DivyaAkash Divya
1
answered Mar 25 at 9:17
Akash DivyaAkash Divya
1
answered Mar 25 at 9:17
Akash DivyaAkash Divya
1
answered Mar 25 at 9:17
Akash DivyaAkash Divya
1
1
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55317469%2fhow-to-fix-cropped-shadow-in-a-horizontal-list-view-in-flutter%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
