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.
I have a container with width MediaQuery.of(context).size.width / 1.75.When I minimize screen size text inside the container is overflowing.
This is the output I got now:
class ProfileTopPortion extends StatelessWidget {
const ProfileTopPortion({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Column(
children: [
Padding(
padding: const EdgeInsets.all(18.0),
child: Container(
width: MediaQuery.of(context).size.width / 1.75,
decoration: BoxDecoration(
border: Border.all(color: Color(0xffEBEBEB), width: 0.4),
color: Color(0xfffbfbfa),
),
child: Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: MouseRegion(
cursor: SystemMouseCursors.click,
child: GestureDetector(
onTap: () {
// Get.toNamed('/events',arguments: 0);
},
child: Padding(
padding: const EdgeInsets.only(top: 0.0),
child: SvgPicture.asset(
allowDrawingOutsideViewBox: true,
Images.avatar,
),
)),
),
),
SizedBox(
width: 20,
),
Column(
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'First Name',
),
SizedBox(
height: 6,
),
Text(
'Engineer',
),
SizedBox(
height: 20,
),
Row(
children: [
Column(
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Email',
),
SizedBox(
height: 10,
),
Text(
'Organization',
),
],
),
SizedBox(
width: 30,
),
Column(
mainAxisSize: MainAxisSize.min,
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'testEmail1235#gmail.com',
),
SizedBox(
height: 10,
),
Text("Test12346#gma.com"),
],
)
],
),
SizedBox(
height: 25,
),
],
),
],
),
),
),
],
),
);
}
}
I tried flexible and expanded widgets but nothing works.
You need to use Expanded in two widget, try this:
Padding(
padding: const EdgeInsets.all(18.0),
child: Container(
width: MediaQuery.of(context).size.width / 1.75,
decoration: BoxDecoration(
border: Border.all(color: Color(0xffEBEBEB), width: 0.4),
color: Color(0xfffbfbfa),
),
child: Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: MouseRegion(
cursor: SystemMouseCursors.click,
child: GestureDetector(
onTap: () {
// Get.toNamed('/events',arguments: 0);
},
child: Padding(
padding: const EdgeInsets.only(top: 0.0),
child: SvgPicture.asset(
allowDrawingOutsideViewBox: true,
Images.avatar,
),
)),
),
),
SizedBox(
width: 20,
),
Expanded(//<---- add this
child: Column(
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'First Name',
),
SizedBox(
height: 6,
),
Text(
'Engineer',
),
SizedBox(
height: 20,
),
Row(
children: [
Column(
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Email',
),
SizedBox(
height: 10,
),
Text(
'Organization',
),
],
),
SizedBox(
width: 30,
),
Expanded(//<---- add this
child: Column(
mainAxisSize: MainAxisSize.min,
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'testEmail1235#gmail.com',
overflow: TextOverflow.ellipsis,//<---- add this
),
SizedBox(
height: 10,
),
Text(
"Test12346#gma.com",
overflow: TextOverflow.ellipsis,//<---- add this
),
],
),
)
],
),
SizedBox(
height: 25,
),
],
),
),
],
),
),
),
wrap this column to expanded and also wrap the inner texts into flexible
Expanded( child: Column(
mainAxisSize: MainAxisSize.min,
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Flexible(child:Text(
'testEmail1235#gmail.com',
)),
SizedBox(
height: 10,
),
Flexible(child:Text("Test12346#gma.com")),
],
),)
Wrap your text with FittedBox
FittedBox(
child: Text(
"your text",
),
),
Instead of using height and width for container you can use the constraints property i.e
constraints:Boxconstrains(
maxWidth:double.infinity,
maxHeight:double.infinity,
),
It will resize the container height and width according to the text inside.
You can use padding for further decoration
I have the following code:
_buildWave() {
return Container(
height: 100.0,
width: double.infinity,
child: Container(
child: Stack(
children: [
WaveWidget(
config: CustomConfig(
colors: helpers.waveColors,
durations: [32000, 21000, 25000, 5000],
heightPercentages: [0.25, 0.26, 0.28, 0.31]),
backgroundColor: Colors.transparent,
size: Size(double.infinity, double.infinity),
waveAmplitude: 0,
),
Container(
child: Positioned(
bottom: 15,
child: Padding(
padding: EdgeInsets.fromLTRB(15, 0, 5, 0),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(LineIcons.streetView, size: 20),
SizedBox(width: 5),
Text(
"Left",
style: TextStyle(fontWeight: FontWeight.bold),
),
],
),
),
Container(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [Text("Right")],
),
),
],
),
),
),
),
],
),
),
);
}
The intention is to place the LEFT and RIGHT text on yes, the left and right side. Now, I know this can be done using MainAxisAlignment.spaceBetween but for some reason it won't work. I'm getting no errors.
Image is what I'm getting right now:
Maybe that is because you have kept the Row Widget inside Stack Widget, try giving the full width to the Positioned Widget present inside the Stack Widget like below and also remove the Container Widget:
child: Stack(
children: [
WaveWidget(
config: CustomConfig(
colors: helpers.waveColors,
durations: [32000, 21000, 25000, 5000],
heightPercentages: [0.25, 0.26, 0.28, 0.31]),
backgroundColor: Colors.transparent,
size: Size(double.infinity, double.infinity),
waveAmplitude: 0,
),
Positioned(
// Here
left: 0.0,
right: 0.0,
//
bottom: 15,
child: Padding(
padding: EdgeInsets.fromLTRB(15, 0, 5, 0),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(LineIcons.streetView, size: 20),
SizedBox(width: 5),
Text(
"Left",
style: TextStyle(fontWeight: FontWeight.bold),
),
],
),
),
Container(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [Text("Right")],
),
),
],
),
),
),
],
This is what I have:
source code:
Container(
width: 150,
height: 150,
color: Colors.grey,
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
height: 100,
width: 100,
color: Colors.green,
),
Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
child: Text('text'),
color: Colors.blue,
),
Container(
child: Text('text'),
color: Colors.red,
),
],
),
],
),
),
),
How can I make the blue and red container to match the green container's width without making them larger as the green container?
this is what I want to get without using a fixed with for the containers inside the row. Also I have more than one element in the column and I don't want to use fixed sizes.
If the size if fixed then you can add a width to the container which are wrap with the row widget.
The reason i gave width 50 is beacause the parent container is having width of 100 already so remaning width are given to containers
Container(
width: 150,
height: 150,
color: Colors.grey,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
height: 100,
width: 100,
color: Colors.green,
),
Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 50,
child: Text('text'),
color: Colors.blue,
),
Container(
width: 50,
child: Text('text'),
color: Colors.red,
),
],
),
],
),
),
You can use flexible widget to give row fixible width
Container(
width: 150,
height: 150,
color: Colors.grey,
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
height: 100,
width: 100,
color: Colors.green,
),
Container(
width: 100,
child: Row(
children: [
Flexible(
flex: 1,
fit: FlexFit.tight,
child: Container(
child: Text('text'),
color: Colors.blue,
),
),
Flexible(
flex: 1,
fit: FlexFit.tight,
child: Container(
child: Text('text'),
color: Colors.red,
),
),
],
),
),
],
),
),
)
Container(
width: 150,
height: 150,
color: Colors.grey,
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
height: 100,
width: 100,
color: Colors.green,
),
Container(
width: 100,
Row(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child:
Container(
child: Text('text'),
color: Colors.blue,
),
),
Expanded(
child:
Container(
child: Text('text'),
color: Colors.red,
),
),
],
),
),
],
),
),
),
You can wrap only children of Row with Expanded widget.
Try this, you have to add Exapnded to the childeren of row widgets
Container(
padding: EdgeInsets.all(16),
color: Colors.grey,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
color: Colors.green,
child: Text('Hdddfhlsd', style: primaryTextStyle()),
),
Row(
mainAxisSize: MainAxisSize.max,
children: [
Expanded(
child: Container(
child: Text('text'),
color: Colors.blue,
),
),
Expanded(
child: Container(
child: Text('text'),
color: Colors.red,
),
),
],
)
],
),
)
**Replace your container by this **
Container(
width: 150,
height: 150,
color: Colors.grey,
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 100,
child: Column(
children: [
Container(
height: 100,
width: 100,
color: Colors.green,
),
Row(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child: Container(
child: Text('text'),
color: Colors.blue,
),
),
Expanded(
child: Container(
child: Text('text'),
color: Colors.red,
),
),
],
)
],
),
),
],
),
),
)
I'm trying to make a widget like this:
But the problem I've faced with is that if title is too long it pushes the icon (triangle) out of the bounds of card.
What I want to have is the icon should always be at top right corner of the card and title to take all the available space between image and triangle, but not more. If title is too long it should just take new line.
But it should be like this:
Card(
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.zero),
child: Container(
height: 130,
child: Row(
children: <Widget>[
Image(
image: NetworkImage(product.primaryImage.url),
height: 130,
width: 60,
),
SizedBox(width: 8),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Row(
children: <Widget>[
Text(
product.name,
maxLines: 2,
style: TextStyle(fontWeight: FontWeight.bold),
),
SizedBox(height: 8),
IconButton(
padding: EdgeInsets.zero,
iconSize: 24,
icon: Icon(Icons.remove_circle_outline),
onPressed: () => onRemove(product),
)
],
),
SizedBox(height: 8),
Text("$quantityInCart x \$$price"),
],
),
],
),
),
);
}
Wrapping title in Expanded doesn't work because parent Row gives it infinite width constraint.
You need to use two Expanded like this:
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
height: 300,
width: 100,
color: Colors.blue,
),
Expanded(
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Text('This is quite a loooooo ooooooooo ooooooo ooooong title',
softWrap: true,
maxLines: 2,
),
),
Icon(Icons.add_alert)
],
),
Text('This is a normal description')
],
),
)
],
)