Trailing change his color when expanded - flutter

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);

Related

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."),
)
],
)

Flutter align Column of text with single text

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!

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"]}"),

how to make row text going center

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"),
),
],
),
),
],
),
);

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.