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',
)
),
],
),
]),
Related
I have been trying to find a way to keep two text widgets apart but the problem was that if I used Spacer() or mainAxisAlignment: MainAxisAlignment.spaceBetween the text goes outside the alignment of the other widgets
desired layout vs current layout
child: Scaffold(
backgroundColor: Colors.transparent,
body: Container(
child: Column(children: [
Text(
'Notes Made',
textAlign: TextAlign.left,
style: const TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
),
Accordion(
color: 0xffE69AF2,
title: receiptData.getVisitType(),
content: receiptData.getVisitDesc(),
),
Accordion(
color: 0xff9AF2AE,
title: 'Doctor\'s Notes',
content: receiptData.getDoctorNotes(),
),
Text(
'Receipt',
textAlign: TextAlign.left,
style: const TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
),
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
child: Text(
'consultation fee:',
),
),
Container(
child: Text(
receiptData.getCFees().toString(),
),
),
],
),
RatingBar.builder(
initialRating: receiptData.getRating(),
ignoreGestures: true,
minRating: 1,
direction: Axis.horizontal,
allowHalfRating: true,
itemCount: 5,
itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
itemBuilder: (context, _) => Icon(
Icons.star,
color: Colors.amber,
),
onRatingUpdate: (rating) {
print(receiptData.getRating());
},
),
]),
),
You could try wrapping each text widget in a container and setting the width of each container to a specific value.
Container(
width: 50.0, // container width
child: Text(
'Text 1',
),
),
Container(
width: 50.0,
child: Text(
'Text 2',
),
),
Additionally you could try wrapping both text widgets in a Row widget and set the mainAxisSize property to MainAxisSize.min. This will force the row to shrink-wrap the text widgets, allowing you to control the space between them by setting the mainAxisAlignment property to MainAxisAlignment.spaceBetween
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Text 1'),
Text('Text 2'),
],
),
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,
)
],
),
)
In below code I'm getting Text Overflow, but what I need is, if text is to large it should fade in before the view text.
ExpansionTile(
leading: Wrap(
spacing: DynamicSize.Azwidth(30),
children: [
Icon(
Icons.menu_rounded,
color: Color(0xFFE0E0E0),
),
SvgPicture.asset('images/fire.svg'),
],
),
title: Text(
'Foam Rolling',
style: TextStyle(
fontSize: DynamicSize.Azheight(16),
fontWeight: FontWeight.w500,
fontFamily: 'DMSans',
color: Color(0xFF193669),
),
),
children: [
Padding(
padding: EdgeInsets.only(
left: DynamicSize.Azwidth(97), right: DynamicSize.Azwidth(24)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
child: Row(
children: [
SvgPicture.asset('images/bullet.svg'),
SizedBox(width: DynamicSize.Azwidth(16)),
Text(
'Foam Rolling Front Hip !!!!!!!!!!!!!!!!!!',
overflow: TextOverflow.fade,
maxLines: 1,
softWrap: false,
),
],
),
),
GestureDetector(
onTap: () {},
child: Row(
children: [
Text('View'),
Icon(
Icons.arrow_forward_ios_rounded,
size: DynamicSize.Azheight(13),
),
],
),
)
],
),
)
],
);
The Output of above code is :
Their is a container widget after exclamation in the text. I even tried wrapping the text widget that overflows with Expanded widget as well as Flexible widget. But the text as well as the bullet point before the text gets invisible.
Wrap inner row with Row and Text with Flexible widget.
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Row(
children: [
Flexible(
child: Text(
'Foam Rolling Front Hip !!!!!!!!!sdssssssssssssssss!!!!!!!!!',
overflow: TextOverflow.fade,
maxLines: 1,
softWrap: true,
),
),
],
),
),
When using Unicode text in flutter there seems to be a lot of whitespace in each character which makes it hard to align. In the code and picture below, I'm trying to get the 35m sit on the cross arrows with no space in between. I'm also trying to get the three stars at the start to center align vertically with the word starburst and then center align the (35m and arrows), starburst, and thee stars all to center align with each other vertically.
Scaffold(
body: SafeArea(
child: Column(
children: [
Row(
children: [
Text(
'\u{2605}' * 3,
style: TextStyle(
fontSize: 18.0,
),
),
Text(
'Starburst',
style: TextStyle(
fontSize: 28.0,
),
),
Column(
children: [
Text(
'35m',
style: TextStyle(
fontSize: 18.0,
),
),
Text(
'\u{2194}',
style: TextStyle(fontSize: 35.0),
),
],
)
],
),
],
),
),
);
Make Row crossAxisAlignment property to CrossAxisAlignment.center
Row(
crossAxisAlignment: CrossAxisAlignment.center
children: [....
And
Make Column mainAxisAlignment propert to
MainAxisAlignment.center
Column(
mainAxisAlignment: MainAxisAlignment.center
children: [...
You can use Stack instead of Column and align the Text as per your UI specifications:
Output Using Column:
Output Using Stack:
Full code:
return Scaffold(
body: SafeArea(
child: Column(
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'\u{2605}' * 3,
style: TextStyle(
fontSize: 18.0,
),
),
Text(
'Starburst',
style: TextStyle(
fontSize: 28.0,
),
),
// SizedBox(width: 5.0),
Container(
width: 50.0,
child: Center(
child: Stack(
children: [
Positioned(
top: 4,
child: Text(
'35m',
style: TextStyle(
fontSize: 18.0,
),
),
),
Text(
'\u{2194}',
style: TextStyle(fontSize: 40.0),
),
],
),
),
),
],
),
],
),
),
);
You might have to tweak Stack widget's children a bit, but I hope this answer gives the idea.
I am facing the problem
If two widgets added in a column, there is space between the widgets . I need to remove the space between them. how to acheive it.
Container(height: 50,
width: 50,
color: Colors.grey,
child: Column(mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Flexible(flex: 2,
child: Container(color: Colors.indigo,
child: SizedBox(child: Icon(
Icons.filter_list, color: Colors.white,),))),
Flexible( flex:1, child:
Text('5',style: TextStyle(color: Colors.black),)
),]));
The output should be
Actually i need this scenario also,
Any help is really appreciated
You can add a height of 0.6 to the text widget.
Container(
height: 50,
width: 50,
color: Colors.grey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Flexible(
flex: 2,
child: Text(
'5',
style: TextStyle(color: Colors.black),
),
),
Flexible(
flex: 1,
child: Text(
'5',
style: TextStyle(color: Colors.black, height: 0.6),
),
),
],
),
),
You can easily overlap two widgets using assorted_layout_widgets package with innerDistance argument:
return ColumnSuper(
innerDistance: -8,
children: <Widget>[
Text(
'5',
style: TextStyle(
color: Colors.black,
),
),
Icon(
Icons.filter_list,
color: Colors.blue,
),
]
);