I have the following code which displays a Column within an Alert. The Row displays a break value in minutes. If the variable (break1, break2 etc) is 0, I don't want to display that Row. How do I do this? Thanks.
content: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
flex: 38,
child: Text(
'Break 1:',
style: TextStyle(color: kBodyText, fontSize: 16),
),
),
Expanded(
flex: 62,
child: Text(
'$break1 minutes',
style: TextStyle(color: kBodyText, fontSize: 16),
),
),
],
),
Row(
children: <Widget>[
Expanded(
flex: 38,
child: Text(
'Break 2:',
style: TextStyle(color: kBodyText, fontSize: 16),
),
),
Expanded(
flex: 62,
child: Text(
'$break2 minutes',
style: TextStyle(color: kBodyText, fontSize: 16),
),
),
],
),
],
),
Wrap your Row inside Visibility Widget and set visible to true or false as per requirement.
Visibility(
visible:
!state.getListApiCalled ? true : false,
child: Padding(
padding: EdgeInsets.all(
ResponsiveFlutter.of(context).hp(6)),
child: CircularProgressIndicator(
strokeWidth: 5,
)),
),
Use Visibility.
visible:false is used to hide specific widget.
So the code looked like this:
Visibility(visible:false, child:Row());
Related
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children:const [
Padding(
padding: EdgeInsets.only(top: 30, bottom: 5.0),
child: Text(
"Data#data",
style: TextStyle(color: Colors.white),
),
),
Text(
"title",
style: TextStyle(fontSize: 18),
),
Text(
'datadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadata',
overflow: TextOverflow.ellipsis,
),
],
),
Expanded(
child: Text(
'datadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadata',
overflow: TextOverflow.ellipsis,
),)
Your column is inside a row widget and inside your column you use a long string so for telling column how much space should take you need wrap your column with Expanded widget:
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Padding(
padding: EdgeInsets.only(top: 30, bottom: 5.0),
child: Text(
"Data#data",
style: TextStyle(color: Colors.white),
),
),
Text(
"title",
style: TextStyle(fontSize: 18),
),
Text(
'datadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadatadata',
overflow: TextOverflow.ellipsis,
),
],
),
),
You should wrap your Text in a Flexible to let your element know that it's ok for the Text to be narrower than its intrinsic width. Expanded will also work.
you can encapsulate the text with the expanded widget and add the maxlines attribute
Expanded(child:
Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
maxLines:3,
overflow:TextOverflow.ellipsis ))
see the video.
I'm attempting to make some text in my app more responsive to size changes when using different phones. So I started with wrapping some Text Widgets in A flexible widget. This causes this error.
Obviously it's a sizing issue, I just can't seem to find a solution. Do I need to switch around how I build this?
This is the relevant code
return SingleChildScrollView(
child: Flex(direction: Axis.vertical, children: [
Column(children: [
Padding(
padding: EdgeInsets.only(top: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Funds',
style:
TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
)
],
),
),
Flexible(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
flex: 1,
fit: FlexFit.loose,
child: Text(
'\$${DATA}',
style: TextStyle(
color: Colors.black, fontWeight: FontWeight.bold),
),
),
Flexible(
flex: 1,
fit: FlexFit.loose,
child: Text(
'\$${DATA}',
style: TextStyle(
color: Colors.black, fontWeight: FontWeight.bold),
),
),
Flexible(
flex: 1,
fit: FlexFit.loose,
child: Text(
'\$${DATA}',
style: TextStyle(
color: Colors.black, fontWeight: FontWeight.bold),
),
),
Flexible(
flex: 1,
fit: FlexFit.loose,
child: Text(
'\$${DATA}',
style: TextStyle(
color: Colors.black, fontWeight: FontWeight.bold),
),
)
],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
flex: 1,
fit: FlexFit.loose,
child: Text(
truncator('${DATA}', 2,
CutStrategy()),
style:
TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
),
),
Flexible(
flex: 1,
fit: FlexFit.loose,
child: Text(
truncator('${DATA}', 2,
CutStrategy()),
style:
TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
),
),
Flexible(
flex: 1,
fit: FlexFit.loose,
child: Text(
truncator('${DATA}', 2,
CutStrategy()),
style:
TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
),
),
Flexible(
flex: 1,
fit: FlexFit.loose,
child: Text(
truncator('${DATA}', 2,
CutStrategy()),
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 13),
),
)
],
),
])
]));
SingleChildScrollView & Column are both widgets that don't have any size constraints, and your children (Flexible) are widgets that give a child the flexibility to expand to fill the available space in the main axis (vertical in your case).
To avoid this error you have to give your SingleChildScrollView a height constraint. For example with a simple Container (I think in your case the Column is the culprit), try:
Container(
height: MediaQuery.of(context).size.height, //for full screen height
child: Column(
//your code...
)
)
You don't need to use Flex, Flexible or Expanded inside scrollable widget.
I'm displaying text in a ListView.Builder and if some of the text is too long I'm using the overflow: TextOverflow.ellipsis property of the Text widget to ensure it doesn't cause an overflow error. Well when text is too long, it uses the TextOverflow correctly, but it also shifts the text to the right. I want to keep the text all aligned. Could this be caused by the TextOverflow or is this a layout issue?
This is an image of one of the pieces of text that had ellipsis used on it due to it being too long. As you can see it is shifted to the right. This only occurs when an ellipsis is used though. If the Text doesn't need an ellipsis it doesn't get shifted to the right.
This is the code that renders this entire page. The bit that I's being moved to the right is where the the text displays mileage[index].trippurpose I've included the entire code incase it is a layout issue that I keep overlooking.
Container(
height: 60,
child: Row(
children: <Widget>[
Expanded(
flex: 1,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: EdgeInsets.only(left: 5, top: 13),
child: Text(mileage[index].tripdate,
style: TextStyle(
fontSize: 14, color: Colors.black),
textAlign: TextAlign.left),
),
],
),),
Expanded(
flex: 3,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(top: 13, left: 10),
child: Text(mileage[index].trippurpose,
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: Colors.black,
fontFamily: 'Montserrat'),
overflow: TextOverflow.ellipsis,
softWrap: true,
textAlign: TextAlign.center),),
Padding(
padding: EdgeInsets.only(left: 10),
child: Row(
children: [Text(
'${mileage[index].tripfrom} - ',
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.black,
fontStyle: FontStyle.italic),
),
Padding(
padding: EdgeInsets.only(),
child:Text(
mileage[index].tripto,
overflow: TextOverflow.ellipsis,
softWrap: false,
style: TextStyle(
color: Colors.black,
fontStyle: FontStyle.italic
),
),
),
],
),
),
],
),),
Expanded(
flex: 1,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Padding(
padding:
EdgeInsets.only(top: 13, right: 10),
child: Container(
child: Text(
mileage[index].triptotalmiles,
style: TextStyle(
fontSize: 16,
color: Colors.black),
textAlign: TextAlign.right),
),
),
],
),)
],
))
Here is a sample code, you can use to create design as per your code.
Container(
child: Row(
children: [
Flexible(
flex: 1,
child: Text(
'THIS IS A TEST TEXT',
overflow: TextOverflow.ellipsis,
),
),
Flexible(
flex: 3,
fit: FlexFit.tight,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'THIS IS A TEST TEXT',
overflow: TextOverflow.ellipsis,
),
Text(
'THIS IS A TEST TEXT',
overflow: TextOverflow.ellipsis,
),
],
),
),
Flexible(
flex: 1,
child: Text(
'THIS IS A TEST TEXT',
overflow: TextOverflow.ellipsis,
),
),
],
),
)
Note :- You are applying wrong logics to your code. flex is best fit with Flexible widget. Also check FlexFit.tight.
I'm building an expenses app, and have:
As you can see, I have a text overflow problem. I want that text to trim with ellipses, but I'm not sure how to do it. Currently I have:
Widget buildCardLeft() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Text(
this.transaction.title,
style: TextStyle(fontSize: 24),
overflow: TextOverflow.ellipsis,
),
),
SizedBox(
height: 8,
),
Text(
dateFormat.format(this.transaction.date),
style: TextStyle(color: Colors.grey),
)
],
);
What's the correct way to get this text to truncate?
you can say like:
Text(
this.transaction.title.replaceRange(25, this.transaction.title.length, "...",
style: TextStyle(fontSize: 24),
overflow: TextOverflow.ellipsis,
)
Solved with Flexible:
Widget buildCardLeft() {
return Container(
child: Flexible(
flex: 1,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
this.transaction.title,
style: TextStyle(fontSize: 24),
overflow: TextOverflow.ellipsis,
),
SizedBox(
height: 8,
),
Text(
dateFormat.format(this.transaction.date),
style: TextStyle(color: Colors.grey),
)
],
),
),
);
}
I have a column with three rows:
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
print('card of course clicked');
},
child: Card(
shape: RoundedRectangleBorder(borderRadius:
BorderRadius.circular(8.0)),
child: Container(
height: 144,
child: Row(children: [
Padding(
padding: EdgeInsets.all(16.0),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(8.0)),
child: Image.network(_model._schoolThumb))),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 16),
Align(
alignment: Alignment.center,
child: Text(_model._schoolName,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w600,
fontSize: 18)),
),
SizedBox(height: 12),
Row(
children: <Widget>[
Icon(Icons.location_on, color: Colors.grey[700]),
Container(width: 8),
Text(_model._guides,
style: TextStyle(
fontSize: 14,
color: Colors.black,
fontWeight: FontWeight.w400)),
],
),
SizedBox(height: 12),
Row(
children: <Widget>[
Icon(Icons.attach_money, color: Colors.grey[700]),
Container(width: 8),
Text(_model._priceFrom,
style: TextStyle(
fontSize: 14,
color: Colors.black,
fontWeight: FontWeight.w400))
],
)
],
)
]),
),
),
);
}
As a result, I have three rows aligned to start.
How can I align the first Text() in the center? Giving properties to the text and wrapping in Expanded, Container, Stack didn't help, or I did it in the wrong way. Thanks in advance!
EDIT
Whole build() method attached
Problem:
By default, the width of the Column is set to the width of the widest child widget of Column.
Solution:
You need to wrap your Column with either Expanded or Flexible.
Like below.
Expanded(
child: Column(
children: <Widget>[
...
],
),
)
or
Flexible(
child: Column(
children: <Widget>[
...
],
),
)
And then need to use the Align or Center widget to set the alignment to your child widget in your case the Text widget.
Like below:
Align(
alignment: Alignment.center,
child: Text(
"Test",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w600,
fontSize: 18,
),
),
),
or
Center(
child: Text(
"Test",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w600,
fontSize: 18,
),
),
),
UPDATE
You haven't given a width to the column so it does not know the remaining width that it can take. So wrap your column in a flexible which will give it the width remaining to expand.
Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 16),
Row(