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.
Related
I want to add the report question text on the right side I tried the position widget but it doesn't work what I do?
I try to achieve-
code-
Positioned(
right: 0,
child: Row(
children: [
Icon(Icons.report, color: Color(0xff0E5487),),
TextButton(onPressed: () => {}, child: Text("Report Question",
style: cstmTextStyle(fs: 18, fc:Color(0xff0E5487) ),)),
],
),),
My advice is to use a Column with Spacer widget instead of a Stack.
I made an example of you:
Column(
children: [
Row(
mainAxisSize: MainAxisSize.max,
children: [
Container(
color: Colors.green,
width: 160,
height: 160,
),
const Spacer(),
Container(
color: Colors.green,
width: 160,
height: 160,
)
],
),
const SizedBox(height: 8,),
Row(
mainAxisSize: MainAxisSize.max,
children: const [
Spacer(),
Placeholder(fallbackWidth: 32, fallbackHeight: 32,),
SizedBox(width: 8,),
Text('Report Question')
],
)
],
),
Wrap Your Row With Alignment
Align(alignment: Alignment.topRight,
child: const Row(
),
),
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())
i've a card like this.
Actual card
but i want a card like this
What i want
My code is:
return Card(
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
margin: EdgeInsets.fromLTRB(20.0, 5.0, 20.0, 5.0),
elevation: 5.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
child: Container(
padding: EdgeInsets.fromLTRB(15.0, 5.0, 15.0, 5.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Example text'),
Text("20-06-2021 - 13:00",
style:
TextStyle(fontSize: 15, fontStyle: FontStyle.italic)),
Text("Example text"),
Text("Example text"),
],
),
Column(
children: <Widget>[
Flag(
'FR',
height: 40,
width: 40,
replacement: Text('Error'),
),
],
),
],
),
),
);
Now, i have fixed height and width, i'm not able to obtain what i want because each attempt enlarge the card in height.(I want to keep the same height as the card above).The icons comes from the package flags (Flags package)
Instead of wrapping a Container in a Card. Try to Wrap a Row with Expanded in the Card. (I just changed the Container into padding)
Card(
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
margin: EdgeInsets.fromLTRB(20.0, 5.0, 20.0, 5.0),
elevation: 5.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
child: Padding(
padding: EdgeInsets.fromLTRB(15.0, 5.0, 15.0, 5.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
flex: 1,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Example text'),
Text("20-06-2021 - 13:00",
style: TextStyle(
fontSize: 15, fontStyle: FontStyle.italic)),
Text("Example text"),
Text("Example text"),
],
),
),
Expanded(
flex: 1,
child: Container(
height: 100,
color: Colors.red,
),
)
],
),
),
),
try this
to let it fit the width and the height:
Flag('AD', height: double.infinity, width: double.infinity, fit: BoxFit.fill)
or maybe this:
Flag('AD', height: null, width: null, fit: BoxFit.fill)
I recommend to make this flag Expandable widget inside the row
wrapped your Flag inside SizedBox if you know what fixed size it is like this.
SizedBox(
height: 65,
width: 140,
child: Flag(
'FR',
replacement: Text('Error'),
fit: BoxFit.cover,
),
)
More about SizedBox Here
i want to know, how let the container height depend on length of text and cover it in container not in picture 2 if i setting text too long the text is come over container then how to fix it
on message by b-akused02 : it's short and still in height :100,
on message by b-akused01 : it's long over container
on message by b-akused03 : it's short and still in height :100,
Widget _buildCommentItem({#required CommentDetail commentDetail}) {
return Container(
height: 100,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 20.0,
),
Expanded(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: 1,
child: Container(
height: 45, //height, //155,
width: 45, //width, //155,
decoration: BoxDecoration(
color: const Color(0xff7c94b6),
image: DecorationImage(
image: NetworkImage(
commentDetail.otherUserProfileImageUrl),
fit: BoxFit.cover,
),
borderRadius: BorderRadius.circular(12),
),
),
),
Expanded(
flex: 8,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Wrap(
// crossAxisAlignment: CrossAxisAlignment.start,
children: [
FittedBox(
fit: BoxFit.cover,
child: Text(
commentDetail.otherUsername,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold),
),
),
Text(
commentDetail.comment,
style: TextStyle(
color: Colors.black,
),
),
],
),
),
),
],
),
),
),
SizedBox(
height: 20,
)
],
),
),
);
}
Wrap the given container in a Column and remove the height parameter from within.
Complete Code
Widget _buildCommentItem({#required CommentDetail commentDetail}) {
return Container(
child: Container(
child: Wrap(
// mainAxisAlignment: MainAxisAlignment.spaceEvenly,
// crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: 1,
child: Container(
height: 45, //height, //155,
width: 45, //width, //155,
decoration: BoxDecoration(
color: const Color(0xff7c94b6),
image: DecorationImage(
image: NetworkImage(
commentDetail.otherUserProfileImageUrl),
fit: BoxFit.cover,
),
borderRadius: BorderRadius.circular(12),
),
),
),
Expanded(
flex: 8,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Wrap(
// crossAxisAlignment: CrossAxisAlignment.start,
children: [
FittedBox(
fit: BoxFit.cover,
child: Text(
commentDetail.otherUsername,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold),
),
),
Text(
commentDetail.comment,
style: TextStyle(
color: Colors.black,
),
),
],
),
),
),
],
),
),
),
],
),
),
);
}
only create a Container without height.
Container(
width: 200, //for example
child: Text('any Text'),
)
I am new to Flutter and having problems in wrap text in the listing screen.
My current code is as follow:
Container(
width: double.infinity,
padding: EdgeInsets.all(Dimen.padding),
color: AppTheme.buildLightTheme().backgroundColor,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(20),
child:
Image.asset('assets/images/bike1.jpg',
height: 80, width: 80, fit: BoxFit.cover)
),
SizedBox(
width: 16,
),
Column(
verticalDirection: VerticalDirection.down,
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Flexible(
child: Text(
modelData.titleTxt,
style: (TextStyles.bldTextview),
overflow: TextOverflow.ellipsis,
)),
SizedBox(
width: 6,
),
Flexible(
child: Text(modelData.subTxt,
overflow: TextOverflow.ellipsis,
style: (TextStyles.regularTextview)))
],
)
],
),
)
The output of this code is:
What I want to achieve is like this:
How to do it?
Just add Expanded widget in the column of title and subtitle.
Container(
width: double.infinity,
padding: EdgeInsets.all(Dimen.padding),
color: AppTheme.buildLightTheme().backgroundColor,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.asset('assets/images/bike1.jpg',
height: 80, width: 80, fit: BoxFit.cover),
),
SizedBox(
width: 16,
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text(
modelData.titleTxt,
maxLines: 2,
style: (TextStyles.bldTextview),
overflow: TextOverflow.ellipsis,
),
SizedBox(
width: 6,
),
Text(modelData.subTxt,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: (TextStyles.regularTextview)),
],
),
)
],
),
)
In your expected output screenshot, each card has different value for maxLines based on the number of lines used by the title. But there is no attribute available in the current Text widget implementation of Flutter.
Well, you can workaround this by checking the available space using a LayoutBuilder, and based on available height, set the maxLines value.
See the below example.
Container(
padding: new EdgeInsets.all(15.0),
width: 150.0,
height: 110.0,
color: Colors.red,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'I take up as much space as possible.',
style: const TextStyle(fontWeight: FontWeight.bold),
),
Expanded(
child: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
print(constraints);
return Text(
'The space I have is very limited. I get ellipsed.',
overflow: TextOverflow.ellipsis,
maxLines: (constraints.maxHeight / Theme.of(context).textTheme.body1.fontSize).floor(),
);
}),
),
],
),
),