i always build ListTile like this, the problem is the upper text 'Bluckcurrent' and the bottom text 'STOCK: 10' is not in the same line with the end of image. I want it to match the image height automatically. Sorry for my bad explanation, if you need more information please tell me i will update the question.
Container(
padding: EdgeInsets.fromLTRB(16, 8, 16, 8),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
width: 90,
height: 100,
decoration: BoxDecoration(
color: Constants.blueLightColor.withOpacity(0.2),
borderRadius: BorderRadius.circular(16),
),
child: Icon(
Icons.image_outlined,
size: 42,
color: Constants.blueLightColor,
),
),
SizedBox(width: 10),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'BLACKCURRENT MOUNT TEA',
style: TextStyle(
fontWeight: Constants.bold,
),
maxLines: 2,
),
Text(
'250ml',
style: TextStyle(
height: 1.4,
fontSize: 12,
color: Constants.greyColor,
),
),
Text(
'Rp. 8.000',
style: TextStyle(
height: 1.7,
fontWeight: Constants.bold,
),
),
Text(
'STOCK : 10',
style: TextStyle(
height: 1.7,
fontWeight: Constants.bold,
),
),
],
),
),
SizedBox(width: 16),
],
),
),
Add a sizedBox with specific height wrapping the row widget and the let the image fetch its width. And in the Column of the Text widgets add a spacer where you wish to add extra space
SizedBox(
height: 100,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.network(
"https://www.bastiaanmulder.nl/wp-content/uploads/2013/11/dummy-image-portrait.jpg",
fit: BoxFit.cover,
),
SizedBox(
width: 10,
),
SizedBox(
height: 200,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
"Some title here",
style:
TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
SizedBox(
height: 10,
),
Text("Price: \$60"),
Spacer(),
Text(
"Stock : 10",
style:
TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
)
],
),
),
],
),
),
Just to show it will align properly, increasing the height to 200
Try: set Container height 100
child: Container(
height: 100,
padding: EdgeInsets.fromLTRB(16, 8, 16, 8),...
How about using MainAxisSize.min ?
It will fix column height to children height.
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.min,
children: [
...
],
),
try this.
since image height is dynamic, then it will align vertically with all the column children on the right side
Card(
child: Container(
padding: EdgeInsets.all(8),
width: double.infinity,
child: Stack(
children: [
Positioned(
child: SizedBox(
// no need to set height
// SizedBox will strech following widget on the right
width: 50,
child: Image.network(
'https://picsum.photos/250?image=9',
fit: BoxFit.cover, // you can modified as you need
),
),
top: 0, //
left: 0,
bottom: 0), //
Container(
margin: EdgeInsets.only(left: 60),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'WWWWWWWWWWWWWWWWW',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18,
),
),
SizedBox(
height: 10,
),
Text("lorem ipsum"),
SizedBox(
height:5,
),
Text("lorem ipsum"),
],
),
),
],
),
),
),
You can use IntrinsicHeight widget to wrap your Row.
IntrinsicHeight(child: Row())
Related
Im trying to create a custom listTile which can expand if it has multiple lines and maintain photo centered but my problem is AutosizeText isn't working and if I wrap AutosizeText with Expand an error apears.
I can use listTile class if there is a method to know if is tree line or not
Can you help me to solve this?
here is my code:
Card(
elevation: 8,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
SizedBox(
width: 70.0,
height: 70.0,
child: ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image.asset(
'assets/images/photo.jpg',
width: 70,
height: 70,
fit: BoxFit.cover,
),
),
),
SizedBox(
width: 24,
),
Column(
children: [
AutoSizeText(
'{otherUser.name! otherUser.lastName!}',
maxLines: 1,
style: Theme.of(context).textTheme.bodyText1!),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
margin: const EdgeInsets.symmetric(horizontal: 2),
child: Image(
image: AssetImage(
'assets/icons/icon2.png'),
height: 20,
),
),
AutoSizeText(
otherUser.country![0],
maxLines: 2,
style: Theme.of(context)
.textTheme
.subtitle2!
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
margin: const EdgeInsets.symmetric(horizontal: 2),
child: const FaIcon(
FontAwesomeIcons.locationDot,
size: 20,
color: Colors.black45,
),
),
AutoSizeText(
otherUser.location!,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: Theme.of(context)
.textTheme
.subtitle2!
),
]),
])
],
),
],
),
Row(
children: [Icon(Icons.star_half_outlined), Text("4.5")],
)
],
),
),
This may be due to the default minimum and maximum size in AutoSizeText widget. Change the minSize and maxSize parameter to some range that you need.
NB: If found helpful, do upvote and mark as right answer, thanks.
after I write my posts in my application, my photo and date center the text. I need to pin the photo and date to the beginning. What should I do for this?
............................................................................................................................................................................................
child: Row( children: [
Padding(
padding: EdgeInsets.only(top: 15),
child: CircleAvatar(
radius: 20,
backgroundImage: NetworkImage(
userData['photoUrl'],
),
),
),
Expanded(
child: Padding(
padding:
EdgeInsets.only(left: 8, top: 20),
child: Container(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
userData['username'],
style: TextStyle(
fontWeight:
FontWeight.bold),
),
Container(
width: double.infinity,
padding: const EdgeInsets.only(
top: 8,
),
child: RichText(
text: TextSpan(
style: const TextStyle(
color: primaryColor),
children: [
TextSpan(
text:
' ${(snap.data()! as dynamic)['description']}',
),
],
),
),
),
],
),
),
),
),
Container(
padding:
EdgeInsets.symmetric(vertical: 4),
child: Text(
DateFormat.yMd().format(
(snap.data()!
as dynamic)['datePublished']
.toDate(),
),
style: const TextStyle(
fontSize: 15,
color: secondaryColor,
),
),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
In your Row, set crossAxisAlignment: CrossAxisAlignment.start. This will cause the Row's children to be aligned at the top of the row.
How do i make the login text and sign in text to start from a single margin rather than the alignment it is shown in the picture?
Here the text isnt being aligned from a single margin and has off placement between texts
Code for it:
mainAxisAlignment: MainAxisAlignment.start,
children: [
const SizedBox(
width: double.infinity,
height: 200,
),
const Divider(
thickness: 3,
color: Colors.white,
indent: 160,
endIndent: 160,
),
Container(
decoration: const BoxDecoration(
color: Color.fromRGBO(32, 32, 32, 1),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(8),
topRight: Radius.circular(8),
),
),
width: double.infinity,
height: MediaQuery.of(context).size.height,
child: Align(
alignment: Alignment.topLeft,
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Column(
children: [
Text(
'Login',
textAlign: TextAlign.start,
style: GoogleFonts.inter(
textStyle: const TextStyle(
color: Colors.white,
fontSize: 32,
fontWeight: FontWeight.bold),
),
),
Text(
'Sign in to continue',
style: GoogleFonts.inter(
color: Color.fromRGBO(161, 161, 161, 1),
fontSize: 24,
fontWeight: FontWeight.w300),
)
],
),
)
],
),
),
),
],
),
Set the crossAxisAlignment property of the Column to start:
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
...]
)
Add CrossAxisAlignment.start to immediate parent column of text.
Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start, //here
children: [
Text(
'Login',
),
Text(
'Sign in to continue',
)
],
),
)
Edit: should be crossAxisAlignment.
Set the mainAxisAlignment attribute for the Column:
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
...
I currently have a list made of Containers() (since I cannot use ListView because I need external scrolling), and it's working well except because in each of them, I have a Row(), with two Column() widgets. The first column should be limited print an image, and the second one, to show certain information in rows. It's a very typical way of doing lists, so I thought it shouldn't cause problems.
Thing is, that the second Text() widget in the second Column(), seems to always cause the upper Text() to shift to the right, causing an overflow and making the text unreadable, unreachable by the user. Look at this picture:
Yes, the titles are there (even if you can't see the second one). They are just quite shifted to the right. If I remove the description below, they show up correctly, at the left side, with just a little left padding. Thing is, these titles should be there no matter how elements are below, or at least, that's how I understand the Column() widget should work.
Take a look at the code:
getListItems(List<Artist> artistList) {
// Iterate through the whole Artists array and render a list item for each one
return artistList.map((Artist artist) {
return Container(
margin: EdgeInsets.only(top: 12),
height: 100,
color: Colors.grey[600],
child: Row(
children: <Widget>[
Padding(padding: EdgeInsets.only(left: 15)),
Column(
children: <Widget>[
Image(
width: 100,
height: 100,
fit: BoxFit.cover,
image: artist.avatar)
],
),
Padding(padding: EdgeInsets.only(top: 5)),
Column(
children: <Widget>[
Text(
artist.name,
style: TextStyle(fontSize: 18),
),
Padding(padding: EdgeInsets.only(top: 5)),
Text(artist.description, style: TextStyle(fontSize: 13))
],
)
],
));
}).toList();
What is wrong in this code? Thank you!
You can wrap the second column with Flexible to avoid overflow:
Container(
margin: EdgeInsets.only(top: 12),
height: 100,
color: Colors.grey[600],
child: Row(
children: <Widget>[
Padding(padding: EdgeInsets.only(left: 15)),
Column(
children: <Widget>[
Image(
width: 100,
height: 100,
fit: BoxFit.cover,
image: artist.avatar)
],
),
Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
artist.name,
style: TextStyle(fontSize: 18),
),
Padding(padding: EdgeInsets.only(top: 5)),
Text(artist.description, style: TextStyle(fontSize: 13))
],
),
)
],
))
You need to make some modifications to the Column which contains the Text widgets
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
artist.name,
style: TextStyle(fontSize: 18),
),
Padding(padding: EdgeInsets.only(top: 5)),
Container(
width: MediaQuery.of(context).size.width * 0.5, // can change "0.5" according to your requirement
child: Text(
artist.description,
style: TextStyle(fontSize: 13),
),
),
],
)
You can use Flexible() widget Wrap your text widget in flexible widget.
return Center(
child: Padding(padding: EdgeInsets.only(left: 50, right: 50),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
child: Text('Hii....helloo....how r u?...here you can show multiple line.', textAlign: TextAlign.center,style: TextStyle(fontSize: 20.0, color: Colors.white))),
],
),
)
);
try Expanded
getListItems(List<Artist> artistList) {
// Iterate through the whole Artists array and render a list item for each one
return artistList.map((Artist artist) {
return Container(
margin: EdgeInsets.only(top: 12),
height: 100,
color: Colors.grey[600],
child: Row(
children: <Widget>[
Padding(padding: EdgeInsets.only(left: 15)),
Column(
children: <Widget>[
Image(
width: 100,
height: 100,
fit: BoxFit.cover,
image: artist.avatar)
],
),
Padding(padding: EdgeInsets.only(top: 5)),
Expanded(
child: Column(
children: <Widget>[
Text(
artist.name,
style: TextStyle(fontSize: 18),
),
Padding(padding: EdgeInsets.only(top: 5)),
Text(artist.description, style: TextStyle(fontSize: 13))
],
),
)
],
));
}).toList();
Use Expanded
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
height: 100,
color: Colors.grey[600],
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Container(
width: 100,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage("https://picsum.photos/100"),
),
),
),
const SizedBox(width: 8.0),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Artist Name"),
const SizedBox(height: 8.0),
Text("Artist Description"),
],
),
),
],
),
);
}
}
first of all you can Define the container as a child of Expanded(the container in top of widget)
Expanded(
child:
Container(
margin: EdgeInsets.only(top: 12),
height: 100,
color: Colors.grey[600],......
or you can use
media query,media query, Defines the length or width according to the screen resolution of the phone
you gotta define media query for height or width
use the mediaqueryfor that, MediaQuery.of(context).size.height,
Container(
margin: EdgeInsets.only(top: 12),
height: `MediaQuery.of(context).size.height`,
color: Colors.grey[600],
child: Row(
children: <Widget>[
Padding(padding: EdgeInsets.only(left: 15)),
Column(
children: <Widget>[
Image(
width: 100,
height: 100,
fit: BoxFit.cover,
image: artist.avatar)
],
),
Padding(padding: EdgeInsets.only(top: 5)),
Column(
children: <Widget>[
Text(
artist.name,
style: TextStyle(fontSize: 18),
),
Padding(padding: EdgeInsets.only(top: 5)),
Text(artist.description, style: TextStyle(fontSize: 13))
],
)
],
));
}).toList();
if when you use the media query the overflowed error is showing you gotta say
MediaQuery.of(context).size.height - the pixels that error says pixels are overflowed
it means if error says overflowed by 128 pixels you gotta say
Container( height: MediaQuery.of(context).size.height -128 ,)
Here's my widget tree that's causing me the problems:
Container(
margin: EdgeInsets.all(15),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ClipRRect(
borderRadius: cardBorderRadius,
child: Image(
image: NetworkImage(widget.article["thumbnail"]),
width: MediaQuery.of(context).size.width * .18,
height: MediaQuery.of(context).size.width * .18,
fit: BoxFit.cover,
),
),
Container(
margin: EdgeInsets.only(left: 15),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
padding: EdgeInsets.only(top: 15),
child: Text(
widget.article["title"],
overflow: TextOverflow.clip,
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 28,
),
),
),
Container(
padding: EdgeInsets.only(top: 20),
child: Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(right: 5),
child: Icon(Icons.star_border, size: 15),
),
Text(
'${widget.article["readTime"] ~/ 60} min',
overflow: TextOverflow.clip,
maxLines: 3,
softWrap: true,
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 14,
),
),
],
),
),
],
),
),
],
),
);
Now the problem is I am getting this effect rather than text get clipped.
Note: I have tried other answers as well using the Expanded & Flexible widgets but none of them worked for me.
Any help will be appreciated!
Put the textfield into a flexible widget like this (work for me):
Row(
children: <Widget>[
Flexible(
child: Text(
"some text",
textAlign: TextAlign.start,
overflow: TextOverflow.ellipsis,
),
),
... more widgets
],
),