I'm making Container box with Flexible funtion but it doesn't work flexible rate (3:7).
Could you explain why it doesn't work?
Codes are below.
body: Container(
child: Row(
children: [
Flexible(child: Container(
color: Colors.lightGreenAccent,
child: Text("Hi, Lynn",
style: TextStyle(fontSize: 30),
),
), flex: 3,),
Flexible(child: Container(
color: Colors.blue,
child: const MyStatefulWidget()
), flex: 7,)
],
),
)
When you use Flexible it still makes children smaller than the flex when there is enough space. I believe you want to use Expanded. Try replacing it with that
You can use Expanded widget instead of Flexible
Container(
child: Row(
children: [
Expanded(
child: Container(
color: Colors.lightGreenAccent,
child: Text("Hi, Lynn", style: TextStyle(fontSize: 30),),
),
flex: 3,
),
Expanded(
child: Container(
color: Colors.blue,
child: Text("Hi, Lynn",style: TextStyle(fontSize: 30),)
),
flex: 7,
)
],
),
)
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 want to have a Row inside of Expanded. Inside that Row I want multiple Containers (so again I need a Row) and inside every Container I want to have multiple children, again I need a Row widget. All of that needs to be responsive. With the following code the widget overflows:
Widget getCard(BuildContext context) {
return Card(
child: Column(children: [
Row(
children: [
Expanded(flex: 1, child: _plateNumberWidget()),
Expanded(
flex: 3,
child: Container(
color: Colors.amber,
child: Text("2"),
),
),
Expanded(
flex: 8,
child: Row(
children: [
Container(
color: Colors.grey,
child: Row(
children: [Text("Test1"), Text("Test2")],
),
),
Container(
color: Colors.green,
child: Row(
children: [
Text("Test3"),
Text(
"Test44444444444444444444",
overflow: TextOverflow.ellipsis,
)
],
),
),
],
))
],
),
Row(
children: [],
),
Row(
children: [],
),
Row(
children: [],
)
]),
);
}
If i use Flexible, the overflow is fixed. But it doesn't position the widgets as i want (the green container should be right after the "Test2" text -> the grey container should take only the space it needs as in the first case.
Expanded(
flex: 8,
child: Row(
children: [
Flexible(
child: Container(
color: Colors.grey,
child: Row(
children: [Text("Test1"), Text("Test2")],
),
),
),
Flexible(
child: Container(
color: Colors.green,
child: Row(
children: [
Flexible(child: Text("Test3")),
Flexible(
child: Text(
"Test444444444444444444444444",
overflow: TextOverflow.ellipsis,
),
)
],
),
),
),
],
))
Try this code
Expanded(
flex: 8,
child: Row(
children: [
Container(
color: Colors.grey,
child: Row(
children: [Text("Test1"), Text("Test2")],
),
),
Flexible(
child: Container(
color: Colors.green,
child: Row(
children: [
Text("Test3"),
Flexible(
fit: FlexFit.tight,
child: Text(
"Test44444444444dsfasdfasd4444444444444",
overflow: TextOverflow.ellipsis,
),
)
],
),
),
),
],
))
So I'm trying to edit some of my co-worker code to make it responsive, because it show many overflow on different screen size. The initial code is using Text wrapped with sized box with fixed size and I wanted to change it to wrapped with expanded so it will take space it needed and will not overflow, but the text disappear when I use expanded ? why is that ? how should I make my text responsive.
Here's my normal code:
Row(children: [
Row(
children: [
Icon(
Icons.groups,
color: accentColor,
),
SizedBox(width: 15),
SizedBox(
width: 190,
child: Text(
'imSolver',
style: primaryColor600Style.copyWith(
fontSize: fontSize16),
).tr(),
),
],
),
]),
Changed it into using expanded:
Row(children: [
Row(
children: [
Icon(
Icons.groups,
color: accentColor,
),
SizedBox(width: 15),
Expanded(
child: Container(
child: Text(
'imSolver',
style: primaryColor600Style.copyWith(
fontSize: fontSize16),
).tr(),
),
),
],
),
]),
The parent Row of the Expanded (wrapping the Container) must have a finite with. You can just wrap it in an Expanded like so:
Row(children: [
Expanded(
child: Row(
children: [
Icon(
Icons.groups,
color: accentColor,
),
SizedBox(width: 15),
Expanded(
child: Container(
child: Text(
'imSolver',
style: primaryColor600Style.copyWith(
fontSize: fontSize16),
).tr(),
),
),
],
),),
]),
Use Flexible instead of Expanded and do provide mainAxisSize to the Row Widget.
Row(children: [
Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.groups,
color: Colors.green,
),
SizedBox(width: 15),
Flexible(
child: Text(
'imSolver',
)
),
],
),
]),
Some Flex values create white space between Expanded widgets, as I understand it is the remainder of the calculations.
For example:
Scaffold(
body: Column(
children: <Widget>[
Expanded(
flex: 4,
child: Container(
color: Colors.green,
),
),
Expanded(
flex: 6,
child: Container(
color: Colors.green,
),
),
],
),
);
I'm looking for an elegant way to make these widgets take up all the available space.
The whole problem is that the flex values change during animation and this white line blinks.
Thanks!
it seems it is coming from border of Container,
Github Issue is still open.
here is the widget
Scaffold(
backgroundColor: Colors.green,
body: Column(
children: <Widget>[
Expanded(
flex: 4,
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.green,
border: Border.all(
color: Colors.green,
),
),
child: Text("Section A"),
),
),
Expanded(
flex: 6,
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.green,
border: Border.all(
color: Colors.green,
),
),
child: Text("Section B"),
),
),
],
),
);
Try to add SizedBox() in between your expanded Widget like below:
Scaffold(
body: Column(
children: <Widget>[
Expanded(
flex: 4,
child: Container(
color: Colors.green,
),
),
SizedBox(
height: 25,)
Expanded(
flex: 6,
child: Container(
color: Colors.green,
),
),
],
),
);
I try to make custom box with different height that looks like this
is there any guide to make box like that picture?
Try it yourself on dartpad
home: Scaffold(
body: Padding(
padding: const EdgeInsets.all(32),
child: Container(
padding: const EdgeInsets.all(32),
decoration: BoxDecoration(
border: Border.all(
color: Colors.lightBlue,
),
),
child: Row(
children: [
Flexible(
child: Container(
color: Colors.blue
),
),
SizedBox(width: 16),
Flexible(
child: Column(
children: [
Flexible(
child: Container(
color: Colors.blue
),
),
SizedBox(height: 16),
Flexible(
child: Container(
color: Colors.blue
),
),
],
),
),
],
),
),
),
),