Flutter Card 的高度相对于其子内容没有改变
Flutter Card height not changing with respect to its Child Content
> 一切正常，但是当我更改产品名称时，它的底部像素溢出了:(;
class VerticalProductItemWidget extends StatelessWidget {
final ProductModel product;
const VerticalProductItemWidget({Key key, this.product}) :
super(key: key);
@override
Widget build(BuildContext context) {
final screenHeight = MediaQuery.of(context).size.height;
return GestureDetector(
Here My Card Start with some decorations
Even when I change picture size its overflowed by some pixles.
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
color: Color(0xFFFCFCFC),
child: Container(
// padding: const EdgeInsets.all(10),
// color: productt.backgroundColor,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Hero(
tag: product.imagepath.toString(),
child: FadeInImage.assetNetwork(
placeholder:
'assets/images/image_placeholder.png',
image: product.imagepath.toString(),
height: 100,
))),
Text(
product.productname,
style: TextStyle(
fontWeight: FontWeight.w400,
color: Color(0xFF3B3B43),
fontSize: 16),
),
Divider(
height: 4,
indent: 10,
endIndent: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Rs: ',
style: TextStyle(
fontWeight: FontWeight.w400,
color: Color(0xFF050405),
fontSize: 14),
),
Text(
product.saleprice.toString(),
style: TextStyle(
fontWeight: FontWeight.w400,
color: Color(0xFF3B3B43),
fontSize: 14),
),
Text(
'.00',
style: TextStyle(
fontWeight: FontWeight.w400,
color: Color(0x703B3B43),
fontSize: 8),
),
],
),
],
),
),
elevation: 5,
),
),
[![enter image description here][1]][1] );
}
}
Final result is here as image of screen.
Did any one have the same problem
Any Solution please
也许尝试用 SingleChildScrollView 包装 Column 小部件。
尝试用容器包装您的文本小部件（使用您的产品名称）。也许这会奏效
您还可以使用 stack 小部件来替换容器中的列和包装图像。
展开（
child: 文字(
"product.saleprice.toString()",
样式：文本样式（
fontWeight: FontWeight.w400,
颜色：颜色（0xFF3B3B43），
fontSize: 14)),)
Widget getData(image1,image2,n1,n2,rat1,rat2,p1,p2){
return Expanded(
child: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(width: 15,),
Expanded(
child: Container(
margin: EdgeInsets.only(top: 20),
child: Stack(
children: [
Container(
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
image: AssetImage(image1),
fit: BoxFit.cover
),
),
alignment: Alignment.bottomCenter,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(20),
bottomRight: Radius.circular(20)),
color: Colors.black.withOpacity(0.4),
),
height: 40,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
margin: EdgeInsets.only(
left: 5,
right: 5,
),
child: Text(
'$n1',style: TextStyle(color: Colors.white,letterSpacing: 1),
),),
Text('$p1',style: TextStyle(color: Colors.white,letterSpacing: 1),),
],
),
),
),
Container(
padding: EdgeInsets.only(left: 10),
height: 25,
width: 60,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
bottomRight: Radius.circular(4)),
),
child: Center(
child: Row(
children: [
Text('$rat1',style: TextStyle(color: Colors.white),),
Icon(Icons.star,color: Colors.white,),
],
),
),
)
],
),
),
flex: 1,
),
SizedBox(width: 15,),
Expanded(
child: Container(
margin: EdgeInsets.only(top: 20),
child: Stack(
children: [
Container(
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
image: AssetImage(image2),
fit: BoxFit.cover
),
),
alignment: Alignment.bottomCenter,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(20),
bottomRight: Radius.circular(20)),
color: Colors.black.withOpacity(0.4),
),
height: 40,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
margin: EdgeInsets.only(
left: 5,
right: 5,
),
child: Text(
'$n2',style: TextStyle(color: Colors.white,letterSpacing: 1),
),),
Text('$p2',style: TextStyle(color: Colors.white,letterSpacing: 1),),
],
),
),
),
Container(
padding: EdgeInsets.only(left: 10),
height: 25,
width: 60,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
bottomRight: Radius.circular(4)),
),
child: Center(
child: Row(
children: [
Text('$rat2',style: TextStyle(color: Colors.white),),
Icon(Icons.star,color: Colors.white,),
],
),
),
)
],
),
),
flex: 1,
),
SizedBox(width: 15,),
],
),
),
flex: 1,
);
}
void main() {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.white,
systemNavigationBarColor: Colors.white,
//statusBarBrightness: Brightness.light,
statusBarIconBrightness: Brightness.dark,
systemNavigationBarIconBrightness: Brightness.dark,
));
[![Fashion Image][1]][1]
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text(
'SHOPPING GALLERY UI',
style:
TextStyle(letterSpacing: 2, color: Colors.black, fontSize: 20),
),
centerTitle: true,
backgroundColor: Colors.white,
brightness: Brightness.light,
),
body: SingleChildScrollView(
child: Container(
height: 1200,
child: Stack(
children: [
Container(
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xff357cea),
Color(0xff4c53ea),
Color(0xff9c2bdd),
Color(0xffca02e5),
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
),
Container(
margin: EdgeInsets.only(bottom: 20),
child: Column(
children: [
getData('assets/images/shoes.png','assets/images/tshirt.jpg','SHOES','TSHIRT','5.0','4.1','$30.33 ','$52.00 '),
getData('assets/images/gtop.jpg','assets/images/blazer.jpg','TOP','BLAZER','4.9','4.2','$40.00 ','$99.99 '),
getData('assets/images/hoodie.jpg','assets/images/jeans.jpg','HODIE','JEANS','4.7','4.5','$70.00 ','$72.30 '),
getData('assets/images/combo.jpg','assets/images/jacket.jpg','COMBO','JACKET','4.8','4.8','$56.27 ','$60.90 '),
getData('assets/images/shrug.jpg','assets/images/hot.jpg','SHRUG','HOT WEAR','4.2','4.1','$90.99 ','$54.90 '),
getData('assets/images/watch.jpg','assets/images/shirt.jpg','WATCH','SHIRT','4.3','4.0','$99.99 ','$25.33 '),
],
),
),
],
),
),
),
),
debugShowCheckedModeBanner: false,
),
);
class VerticalProductItemWidget extends StatelessWidget {
final ProductModel product;
const VerticalProductItemWidget({Key key, this.product}) :
super(key: key);
@override
Widget build(BuildContext context) {
final screenHeight = MediaQuery.of(context).size.height;
return GestureDetector(
Here My Card Start with some decorations Even when I change picture size its overflowed by some pixles. child: Padding( padding: const EdgeInsets.all(8.0),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
color: Color(0xFFFCFCFC),
child: Container(
// padding: const EdgeInsets.all(10),
// color: productt.backgroundColor,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Hero(
tag: product.imagepath.toString(),
child: FadeInImage.assetNetwork(
placeholder:
'assets/images/image_placeholder.png',
image: product.imagepath.toString(),
height: 100,
))),
Text(
product.productname,
style: TextStyle(
fontWeight: FontWeight.w400,
color: Color(0xFF3B3B43),
fontSize: 16),
),
Divider(
height: 4,
indent: 10,
endIndent: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Rs: ',
style: TextStyle(
fontWeight: FontWeight.w400,
color: Color(0xFF050405),
fontSize: 14),
),
Text(
product.saleprice.toString(),
style: TextStyle(
fontWeight: FontWeight.w400,
color: Color(0xFF3B3B43),
fontSize: 14),
),
Text(
'.00',
style: TextStyle(
fontWeight: FontWeight.w400,
color: Color(0x703B3B43),
fontSize: 8),
),
],
),
],
),
),
elevation: 5,
),
),
[![enter image description here][1]][1] );
}
}
Final result is here as image of screen. Did any one have the same problem Any Solution please
也许尝试用 SingleChildScrollView 包装 Column 小部件。
尝试用容器包装您的文本小部件（使用您的产品名称）。也许这会奏效
您还可以使用 stack 小部件来替换容器中的列和包装图像。
展开（ child: 文字( "product.saleprice.toString()", 样式：文本样式（ fontWeight: FontWeight.w400, 颜色：颜色（0xFF3B3B43）， fontSize: 14)),)
Widget getData(image1,image2,n1,n2,rat1,rat2,p1,p2){
return Expanded(
child: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(width: 15,),
Expanded(
child: Container(
margin: EdgeInsets.only(top: 20),
child: Stack(
children: [
Container(
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
image: AssetImage(image1),
fit: BoxFit.cover
),
),
alignment: Alignment.bottomCenter,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(20),
bottomRight: Radius.circular(20)),
color: Colors.black.withOpacity(0.4),
),
height: 40,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
margin: EdgeInsets.only(
left: 5,
right: 5,
),
child: Text(
'$n1',style: TextStyle(color: Colors.white,letterSpacing: 1),
),),
Text('$p1',style: TextStyle(color: Colors.white,letterSpacing: 1),),
],
),
),
),
Container(
padding: EdgeInsets.only(left: 10),
height: 25,
width: 60,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
bottomRight: Radius.circular(4)),
),
child: Center(
child: Row(
children: [
Text('$rat1',style: TextStyle(color: Colors.white),),
Icon(Icons.star,color: Colors.white,),
],
),
),
)
],
),
),
flex: 1,
),
SizedBox(width: 15,),
Expanded(
child: Container(
margin: EdgeInsets.only(top: 20),
child: Stack(
children: [
Container(
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
image: AssetImage(image2),
fit: BoxFit.cover
),
),
alignment: Alignment.bottomCenter,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(20),
bottomRight: Radius.circular(20)),
color: Colors.black.withOpacity(0.4),
),
height: 40,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
margin: EdgeInsets.only(
left: 5,
right: 5,
),
child: Text(
'$n2',style: TextStyle(color: Colors.white,letterSpacing: 1),
),),
Text('$p2',style: TextStyle(color: Colors.white,letterSpacing: 1),),
],
),
),
),
Container(
padding: EdgeInsets.only(left: 10),
height: 25,
width: 60,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
bottomRight: Radius.circular(4)),
),
child: Center(
child: Row(
children: [
Text('$rat2',style: TextStyle(color: Colors.white),),
Icon(Icons.star,color: Colors.white,),
],
),
),
)
],
),
),
flex: 1,
),
SizedBox(width: 15,),
],
),
),
flex: 1,
);
}
void main() {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.white,
systemNavigationBarColor: Colors.white,
//statusBarBrightness: Brightness.light,
statusBarIconBrightness: Brightness.dark,
systemNavigationBarIconBrightness: Brightness.dark,
));
[![Fashion Image][1]][1]
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text(
'SHOPPING GALLERY UI',
style:
TextStyle(letterSpacing: 2, color: Colors.black, fontSize: 20),
),
centerTitle: true,
backgroundColor: Colors.white,
brightness: Brightness.light,
),
body: SingleChildScrollView(
child: Container(
height: 1200,
child: Stack(
children: [
Container(
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xff357cea),
Color(0xff4c53ea),
Color(0xff9c2bdd),
Color(0xffca02e5),
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
),
Container(
margin: EdgeInsets.only(bottom: 20),
child: Column(
children: [
getData('assets/images/shoes.png','assets/images/tshirt.jpg','SHOES','TSHIRT','5.0','4.1','$30.33 ','$52.00 '),
getData('assets/images/gtop.jpg','assets/images/blazer.jpg','TOP','BLAZER','4.9','4.2','$40.00 ','$99.99 '),
getData('assets/images/hoodie.jpg','assets/images/jeans.jpg','HODIE','JEANS','4.7','4.5','$70.00 ','$72.30 '),
getData('assets/images/combo.jpg','assets/images/jacket.jpg','COMBO','JACKET','4.8','4.8','$56.27 ','$60.90 '),
getData('assets/images/shrug.jpg','assets/images/hot.jpg','SHRUG','HOT WEAR','4.2','4.1','$90.99 ','$54.90 '),
getData('assets/images/watch.jpg','assets/images/shirt.jpg','WATCH','SHIRT','4.3','4.0','$99.99 ','$25.33 '),
],
),
),
],
),
),
),
),
debugShowCheckedModeBanner: false,
),
);