Flutter align Column of text with single text - flutter

I would like to make this in Flutter:
My code:
Row(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: const [
Text('Total', style: TextStyle( color: Color(0xFF68B762)),),
Text('Km', style: TextStyle( color: Color(0xFF68B762)),),
],),
const Text('612', style: TextStyle(fontSize: 30, fontFamily: SecondaryFontMedium, color: Color(0xFF68B762)),),
],),
Result:

Add \n between "Total" and "Km". Use like this way,
Row(
children: [
Text('Total\nKm', textAlign: TextAlign.end, style: TextStyle(color: Color(0xFF68B762))),
Text('612',
style: TextStyle(
fontSize: 30,
fontFamily: SecondaryFontMedium,
color: Color(0xFF68B762))),
],
)
Result:

If you want the Total and Km closer together you could try setting a height in the style. For example
Text('Total', style: TextStyle(height: 1, color: Color(0xFF68B762))),
Text('Km', style: TextStyle(height: 1, color: Color(0xFF68B762)),),
result:

I don't know if the error is the spacing, or that the letters on the left are not aligned, but I got something like this :
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 40, // change this
color: Colors.white,
child: FittedBox( // this is important
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: const [
Text(
'Total',
style: TextStyle(color: Color(0xFF68B762)),
),
Text(
'Km',
style: TextStyle(color: Color(0xFF68B762)),
),
],
),
),
),
Container(
height: 40, // change this
color: Colors.white,
child: const FittedBox( // this is important
child: Text(
'612',
style: TextStyle(
height: 1, // this is important
fontSize: 45,
color: Color(0xFF68B762),
),
),
),
),
],
)
What I did was to add both Container with some equal size (40 for example), then using the Widget FittedBox makes that when you lower the height of the container, the letter adapts and you don't have problems...
Now in the second letter to remove the "padding" is added the height : 1 in the TextStyle, if you can read more of it would be good so you don't have problems but basically it makes it possible to align with the left letters.
Try to edit the height Container and you'll see

try this,
return MaterialApp(
home: Scaffold(
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Total\nKm',
textAlign: TextAlign.right,
style: TextStyle(color: Color(0xFF68B762)),
),
SizedBox(
width: 5,
),
Text(
'612',
style: TextStyle(
fontSize: 30,
// fontFamily: SecondaryFontMedium,
color: Color(0xFF68B762)),
),
],
),
),
),
);
Happy Coding!

Related

How to break this text so it doesn't overflow? - Flutter

I have a widget that builds a list from an array. Each item in the array builds a widget with some columns and rows. I want the text to break so It doesnt overflow.
I've tried adding overflow: TextOverflow.ellipsis to the Text or wrapping the Row that wraps the icon and the text that overflow with a Expanded widget, but both didn't work.
Actually it looks like this:
This is my code:
child: Column(
verticalDirection: VerticalDirection.down,
textBaseline: TextBaseline.alphabetic,
textDirection: TextDirection.ltr,
children: < Widget > [
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: < Widget > [
Row(
children: [
const Icon(Icons.medication),
//
// This is the text that overflows
//
Text(
entries[index].pillname,
style: const TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
),
),
],
),
Text(
entries[index].pillTimeStr,
style: const TextStyle(
fontSize: 28,
color: Color.fromARGB(255, 79, 79, 79),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: < Widget > [
Container(
margin: const EdgeInsets.all(4),
child: FloatingActionButton(
onPressed: () {
setState(() {
entries[index].pilldone = !entries[index].pillDone;
});
},
tooltip:
entries[index].pillDone ? 'Tomada' : 'No tomada',
backgroundColor: entries[index].pillDone ?
Colors.green :
Theme.of(context).primaryColor,
child: const Icon(Icons.check),
),
),
Container(
margin: const EdgeInsets.all(4),
child: FloatingActionButton(
onPressed: () {
showAdaptiveActionSheet(
context: context,
cancelAction: CancelAction(
title: const Text('Cancelar'),
),
actions: < BottomSheetAction > [
BottomSheetAction(
title: const Text('Modificar'),
onPressed: () {}),
BottomSheetAction(
title: const Text('Eliminar'),
onPressed: () {
Navigator.pop(context);
_askRemovePill(entries[index].iD);
}),
]);
},
tooltip: 'Eliminar',
backgroundColor: Colors.blue,
child: const Icon(Icons.mode_edit),
)),
],
),
],
),
In your case, all you need to do is wrap your Text inside the Row with an Expanded widget
Expanded(
child: Text(/*......your text widget........*/),
),
The Expanded widget gives your Text widget horizontal constraints
IF you don't wish to see the text go on to the next line,
use the overflow property on the text
overflow : TextOverflow.ellipsis, //inside Text
Use the Wrap widget instead of the Row widget. It will break the text to the next line should there be an overflow.
Like this,
Wrap(
children: [
const Icon(Icons.medication),
//
// This is the text that overflows
//
Text(
entries[index].pillname,
style: const TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
),
),
],
),
Text(
entries[index].pillTimeStr,
style: const TextStyle(
fontSize: 28,
color: Color.fromARGB(255, 79, 79, 79),
),
),
],
),

Text overflowing in row when Stack is a parent

I am trying to create a row widget with two texts widgets inside, however the text keeps overflowing out of screen instead of going right under it. Why is this happening and how can I avoid this?
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
resizeToAvoidBottomInset: false,
body: Container(
width: double.infinity,
padding: const EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 40.0),
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/main_cover.jpg"),
fit: BoxFit.cover)),
child: Stack(children: [
Padding(
padding: const EdgeInsets.fromLTRB(20,0,20,0),
child: InkWell(
onTap: () => _launchURL(),
child: Container(
child: Row(
children: [
DefaultText(fontSize: 12.0, color: Colors.white, weight: FontWeight.normal, textData: "By clicking the \"Register\", button confirm that you accept the application"),
DefaultText(fontSize: 12.0, color: Colors.blue, weight: FontWeight.normal, textData: "terms of service and privacy policy."),
],
),
)),
),
]),
),
));
}
}
Use Flexible as below:
Row(
children: [
Flexible(
child:DefaultText(fontSize: 12.0, color: Colors.white, weight: FontWeight.normal, textData: "By clicking the \"Register\", button confirm that you accept the application"),
),
Flexible(
child:
DefaultText(fontSize: 12.0, color: Colors.blue, weight: FontWeight.normal, textData: "terms of service and privacy policy."),
),
],
)
This will warp your text.
But I suggest you should use RichText.
RichText(
text: TextSpan(
text: 'By clicking the \"Register\", button confirm that you accept the application',
style: TextStyle(
color: Colors.black, fontSize: 18),
children: <TextSpan>[
TextSpan(text: 'Terms and policy',
style: TextStyle(
color: Colors.blueAccent, fontSize: 18),
recognizer: TapGestureRecognizer()
..onTap = () {
// navigate to desired screen
}
)
]
),
),
Update:
You can also use library html https://pub.dev/packages/html
try wrapping your children in Flexible() widget
Like this:
Flexible(
Text()
),
A row aligns it's children horizontally, which means your first DefaultText widget is rendered and the second one on the right of it.
What you can do is wrap both children in Expanded and make the text overflow fading and use Text instead of DefaultText :
Stack(children: [
Padding(
padding: const EdgeInsets.fromLTRB(20,0,20,0),
child: InkWell(
onTap: () => _launchURL(),
child: Container(
child: Row(
children: [
Expanded(child:Text(style:TextStyle(fontSize: 12.0, color: Colors.white, fontWeight: FontWeight.normal,overflow: TextOverflow.fade),"By clicking the \"Register\", button confirm that you accept the application")),
Expanded(child:Text(style:TextStyle(fontSize: 12.0, color: Colors.blue, fontWeight: FontWeight.normal,overflow: TextOverflow.fade) ,"terms of service and privacy policy.")),
],
),
)),
),
]),
You should wrap your Container in a Flexible to let your Row know that it's ok for the Container to be narrower than its intrinsic width. Expanded will also work.
Use Flexible in the Row.
Example:Row(
children: [
Flexible(
child: DefaultText(
fontSize: 12.0,
color: Colors.white,
weight: FontWeight.normal,
textData:
"By clicking the \"Register\", button confirm that you accept the application"),
),
Flexible(
child: DefaultText(
fontSize: 12.0,
color: Colors.blue,
weight: FontWeight.normal,
textData: "terms of service and privacy policy."),
)
],
)

How can i concat text into "Text widget" with "snapshot.data" Flutter

I want to concat text inside a Text widget that contains an snapshot.data, but i couldn't do that for now. This is my code:
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
snapshot.data!.docChanges[index]
.doc['entCourse'],
style: TextStyle(
fontSize: 13,
color: Colors.grey,
),
),
Text(
// i think here would be the text to concat: 'Valoration is:'
snapshot.data!.docChanges[index]
.doc['valCourse'],
style: TextStyle(
fontSize: 8,
color: Colors.yellowAccent,
),
),
],
),
what i want is something like this
You can use string interpolation and make it without + operator
something like this,
Text("this is sample text ${snapshot.data!.docChanges[index].doc["calCourse"]}"),

Row with 2 children icon and (Expanded) text (a long one) space between them

I have a row with 2 children in a row an icon(location) and text
here is sample image
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Icon(
Icons.location_on,
color: Colors.white,
),
Expanded(
child: Text(
"Kyla Olsen Ap #651-8679 Sodales Av.Tamuning PA 10855 (492) 709-6392", // a long address
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.bold),
),
),
],
),
This has some space between icon and text. If I align text start then it does not have space but second line also start from start, I want text in center
I want location iocn and text to not have any space like phone number or email address.
Quick fix, change you Expanded Widget wrapping your Text to a Flexible Widget like so:
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Icon(
Icons.location_on,
color: Colors.white,
),
Flexible(
child: Text(
"Kyla Olsen Ap #651-8679 Sodales Av.Tamuning PA 10855 (492) 709-6392", // a long address
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.bold),
),
),
],
),
It is like this because Expanded widget is expanding a width of widget to be as max as possible be for start a new line for text. You can check it by assign colour into container widget to see the size of each container like this:
As you can see that the container of text(the green one) is expanded and causing a space between an icon and text.
To temporary fix this problem you can just set:
textAlign: TextAlign.center, -> textAlign: TextAlign.left,
Or you can just change it into a column like this
Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Icon(
Icons.location_on,
color: Colors.white,
),
Text(
"Kyla Olsen", // split some short text here
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.bold),
),
],
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 10.0), //Based on icon size, I assume that it is 10px
child: Text(
"Ap #651-8679 Sodales Av.Tamuning PA 10855 (492) 709-6392", // a long address
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.bold),
),
),
),
]
),
and the out put will be like this
I know that it is a dumb solution but it does work.

Trailing change his color when expanded

I have this situation, I created an ExpansionTile using the code below, it is working fine, but when expanded, the trailing changes color, black to white, it was happening with the title and subtitle, but I defined the style manually to solve it, but how can I do this to trailing?
ExpansionTile(
leading: Icon(
Icons.library_music,
size: 40.0,
color: SECONDARYCOLOR,
),
title: Text(
'Pop Rock',
style: TextStyle(
fontSize: 12,
color: Colors.black,
),
),
subtitle: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'Músicas: 30',
style: TextStyle(
fontSize: 12,
color: Colors.black,
),
),
Text(
'Duração: 2:20',
style: TextStyle(
fontSize: 12,
color: Colors.black,
),
),
],
),
children: <Widget>[
Column(
children: <Widget>[
Text('_buildExpandableContent(policies[i])'),
],
),
],
),```
You can easily set colours for title, subtitle, and icons (leading and trailing), both for when they are collapsed or expanded, with the following properties of the ExpandedTile:
textColor: color of title and subtitle when expanded
collapsedTextColor: color of title and subtitle when collapsed
iconColor: color of leading and trailing icons when expanded
collapsedIconColor: color of leading and trailing icons when collapsed
Your question look like this one: Custom style or theme for Expansion Tile Header, Flutter
I've tested a bit of code in DartPad and you can define the color for both your leading and trailing icons using something like that:
Theme(
data: Theme.of(context).copyWith(unselectedWidgetColor: SECONDARYCOLOR),
child: ExpansionTile(
leading: Icon(Icons.library_music, size: 40.0),
title: Text(
'Pop Rock',
style: TextStyle(
fontSize: 12,
color: Colors.black,
),
),
subtitle: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'Músicas: 30',
style: TextStyle(
fontSize: 12,
color: Colors.black,
),
),
Text(
'Duração: 2:20',
style: TextStyle(
fontSize: 12,
color: Colors.black,
),
),
],
),
children: <Widget>[
Column(
children: <Widget>[
Text('_buildExpandableContent(policies[i])'),
],
),
],
),
)
In my case to support both states - collapsed and expanded - for icon color, had to use a combination of the following:
In ExpansionTile set property: iconColor
Widget expansionTile = ExpansionTile(
iconColor: Colors.white,
title: Text('Visible'),
children: [
Text('Expanded element')
]
);
Then wrap that in a Theme, and set: unselectedWidgetColor
expansionTile = Theme(
data: Theme.of(_ctxt).copyWith(
unselectedWidgetColor: Colors.white,
),
child: expansionTile);