I've a Card
that contains multiple Text
with an Image
. Now the image is in top-center I need to align that to the right side inside the card.
I need all the text to the left side of the card and the image to the right side.
So, basically All the Text
should be on the left side and the Image
should be on the right side.
this is the card that I've implemented now,
Here is the code I've been implemented
Widget _buildItemsForListView(BuildContext context, int index) {
return Card(
child: Column(
children: <Widget>[
Image.asset(Constants.FOOD_PLACEHOLDER_IMAGE_ASSET_URL, height: 50,width: 100),
Text("Spinach soup",
style: TextStyle(color: Colors.deepPurple, fontSize: 16),
textAlign: TextAlign.left,),
Text("SAR",
style: TextStyle(color: Colors.black, fontSize: 14),
textAlign: TextAlign.left),
Text("26",
style: TextStyle(color: Colors.black, fontSize: 14),
textAlign: TextAlign.left,),
Text(
"Fresh spinach, mushrooms, and hard-boiled egg served with warm bacon vinaigrette",
style: TextStyle(color: Colors.black, fontSize: 14),
textAlign: TextAlign.left,),
Text("15.4" + " Calories",
style: TextStyle(color: Colors.black, fontSize: 14),
textAlign: TextAlign.left,)
],
),
);
}
How to implement this?
Any suggestions would be helpful.
Card(
child: Row(
children: <Widget>[
Expanded(
flex: 5,
child: Column(
mainAxisSize:MainAxisSize.min,
crossAxisAlignment:CrossAxisAlignment.start,
children: <Widget>[
Text(
"Spinach soup",
style: TextStyle(color: Colors.deepPurple, fontSize: 16),
textAlign: TextAlign.left,
),
Text("SAR",
style: TextStyle(color: Colors.black, fontSize: 14),
textAlign: TextAlign.left),
Text(
"26",
style: TextStyle(color: Colors.black, fontSize: 14),
textAlign: TextAlign.left,
),
Text(
"Fresh spinach, mushrooms, and hard-boiled egg served with warm bacon vinaigrette",
style: TextStyle(color: Colors.black, fontSize: 14),
textAlign: TextAlign.left,
),
Text(
"15.4" + " Calories",
style: TextStyle(color: Colors.black, fontSize: 14),
textAlign: TextAlign.left,
)
],
),
),
Expanded(
flex: 1,
child: Image.network(
'https://3.img-dpreview.com/files/p/TS1200x900~sample_galleries/1330372094/1693761761.jpg',
height: 50,
width: 100),
)
],
),
)
try providing the crossAxisAlingment
parameter in the main column
to align the text to left as following:
Column(
crossAxisAlignment: CrossAxisAlignment.start,
if you do this then including the Center image everything will be aligned to left.
so you have to wrap the current column
in a row
and move the image to the first one. Make sure that the image is added after the column
widget to align it to right side.
it will look something like this:
return Card(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("Spinach soup",
style: TextStyle(color: Colors.deepPurple, fontSize: 16),
textAlign: TextAlign.left,),
Text("SAR",
style: TextStyle(color: Colors.black, fontSize: 14),
textAlign: TextAlign.left),
Text("26",
style: TextStyle(color: Colors.black, fontSize: 14),
textAlign: TextAlign.left,),
Text(
"Fresh spinach, mushrooms, and hard-boiled egg served with warm bacon vinaigrette",
style: TextStyle(color: Colors.black, fontSize: 14),
textAlign: TextAlign.left,),
Text("15.4" + " Calories",
style: TextStyle(color: Colors.black, fontSize: 14),
textAlign: TextAlign.left,)
],
),
Image.asset(Constants.FOOD_PLACEHOLDER_IMAGE_ASSET_URL, height: 50,width: 100),
],
),
);
NOTE: you can remove crossAxisAlingment
from Row
. I have added it just make it look good.
let me know if you have any doubts
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.