Related
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!
Hello i want to ask how to make the text going center.
i have row that contain 2 text.
below is my code.
Container(
child: Padding(
padding: const EdgeInsets.only(bottom: 60.0),
child: Center(
child: Row(
children: [
Text(
"Great",
style: TextStyle(
color: Colors.white,
fontSize: 44.0,
fontWeight: FontWeight.w700,
fontFamily: "Berlin"),
),
Text(
"Ocean",
style: TextStyle(
color: Colors.blue,
fontSize: 44.0,
fontWeight: FontWeight.w700,
fontFamily: "Berlin"),
),
],
),
),
),
),
and output from that code is going like this.
how to make that row going center?
There are a couple of ways to achieve this but first, I would like to refactor your code. You are using Padding inside a Container widget, which is totally unnecessary as Container widget already has a property called padding. So, you should remove the Padding widget.
Also, you have used Center widget inside Container which is also unnecessary as Container has alignment property which you can use to center align child widgets (Alignment.center).
Lastly, in order to center align children widgets in a Row widget, there is mainAxisAlignment & crossAxisAlignment properties which you can use to align widgets.
Setting mainAxisAlignment to MainAxisAlignment.center will center all of your children widgets.
Also, you have used two different Text widgets to create different styled Text widgets, which you can do with a single RichText widget.
Your final code should look like this:
return Container(
padding: const EdgeInsets.only(bottom: 60.0),
alignment: Alignment.center,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RichText(
text: TextSpan(
style: TextStyle(
color: Colors.white,
fontSize: 44.0,
fontWeight: FontWeight.w700,
fontFamily: "Berlin"),
text: "Great",
children: <TextSpan>[
TextSpan(
text: 'Ocean',
style: TextStyle(
color: Colors.blue,
fontSize: 44.0,
fontWeight: FontWeight.w700,
fontFamily: "Berlin"),
),
],
),
),
],
),
);
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.
I know similar questions have been posted here but nothing I've found so far has helped me with my problem. I'm a beginner with Flutter so I need a bit of help. I am trying to build a simple weather app. I want to position the days of the week and the highs/lows of that day so that they sit as far apart as possible and both edges line up with each other. Currently, my app looks this (I added the red container to help understand).. The day of the week and temperature are hugging each other which is what I'm trying to fix.
I have tried using mainAxisAlignment.spaceEvenly, spaceBetween, and spaceAround but none of those move the text at all. I've tried using Spacer() but that makes the temperatures disappear.
I have a separate class to build each day because I'm pulling from an api. That class looks like this:
class WeatherReport extends StatelessWidget {
final String _day;
final String _tempMax;
final String _tempMin;
WeatherReport(this._day, this._tempMax, this._tempMin);
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.fromLTRB(0, 30, 0, 0),
child: Row(
children: <Widget>[
Text(_day, style: TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.w300
)
),
Container(
color: Colors.red,
child: Row(children: <Widget>[
Text(_tempMax + " | ", style: TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.w300
)
),
Opacity(
opacity: 0.5,
child: Text(_tempMin, style: TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.w300
)
),
),
],),
),
],
),
);
}
}
I call this class in my main build file. Here I created a column to house each row that is created by the previous class. That code looks like this:
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
WeatherReport(days[0], '${(forecast.days[0].main.tempMax).round()}º', '${(forecast.days[1].main.tempMin).round()}º'),
WeatherReport(days[1], '${(forecast.days[8].main.tempMax).round()}º', '${(forecast.days[9].main.tempMin).round()}º'),
WeatherReport(days[2], '${(forecast.days[16].main.tempMax).round()}º', '${(forecast.days[17].main.tempMin).round()}º'),
WeatherReport(days[3], '${(forecast.days[24].main.tempMax).round()}º', '${(forecast.days[25].main.tempMin).round()}º'),
WeatherReport(days[4], '${(forecast.days[32].main.tempMax).round()}º', '${(forecast.days[33].main.tempMin).round()}º'),
],
),
Any and all help would be greatly appreciated. I figure the answer is simple but I cannot figure out a solution.
You can wrap your Text Widget with an Expanded:
Expanded(
child: Text(
_day,
style: TextStyle(
color: Colors.white,
fontSize: 25,
fontWeight: FontWeight.w300,
),
),
),
This way the text and the temperature will be as far as possible of each other.
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);