As we are not able to make widget like RichText/Text Span For styling TextFormField,
Can anyone help me out regarding this...
Now Getting:-
Expected Result:-
How we can achieve a result like this?
Simplest way, but not exactly equals:
TextField(
decoration: InputDecoration(
hintText: 'Ciao',
suffixText: '*',
suffixStyle: TextStyle(
color: Colors.red,
),
),
),
Or create a custom TextField to use hint as Widget instead of String
You can use my two customized files:
input_decorator.dart
text_field_custom.dart
TextFieldCustom(
hintText: Text.rich(
TextSpan(
text: 'FIRST NAME',
children: <InlineSpan>[
TextSpan(
text: '*',
style: TextStyle(color: Colors.red),
),
],
style: TextStyle(color: Colors.black54),
),
),
),
Try these two files I had same requirement.
Just add attribute isMandate: true in CInputDecoration and use CTextField.
CTextField(
...
decoration: new CInputDecoration(
isMandate: true,
...
))
https://github.com/sumit1954/Flutter/blob/master/CInputDecorator.dart
https://github.com/sumit1954/Flutter/blob/master/CTextField.dart
Place this code in TextFormField or TextField
this label works as an hint property
label: RichText(
text: TextSpan(
text: 'Full Name',
style: const TextStyle(
color: Colors.grey),
children: [
TextSpan(
text: ' *',
style: TextStyle(
color: Colors.red,
)
)
]
),
floatingLabelBehavior:FloatingLabelBehavior.never,
look at above screenshot of label parameter holding a Widget not a String without any error
Achieved this in hard fast way. Replace input_decorator.dart with below code:
https://github.com/neal786y/InputDecoratorForMandatoryFields/blob/master/input_decorator.dart
In your InputDecoration scope add a property "isMandatoryField: true"
Worked for me on temporary basis.
With the latest version of flutter you can also send a widget in label parameter. So, something like this is possible
label: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(label.replaceAll('*', '')),
label.contains('*')
? Text(
'*',
style: TextStyle(color: Colors.red),
)
: Container(),
],
),
Use label property inside InputDecorator
See this answer https://stackoverflow.com/a/72209425/8913302
Related
i have a problem :( I have a Detailform with Text Widget wehre im getting values from my DB.
I have one TextFormField with a controller, because i need to set the actual price, after i submitted it, the new value will updated in a TextValueField, but i want it to show on a normal Text widget.
i hope you can understand my problem. but here my code
TextField(
decoration: InputDecoration(labelText: 'actual cost'),
controller: _profitController,
keyboardType:
TextInputType.numberWithOptions(decimal: true),
onSubmitted: (val) {
double amount =
double.parse(selectedEntry.amount); // 1 value
double aktPrice =
double.parse(val); // 2 value from this textfield
double profit = aktPrice * amount; // calc
_endProfitController.text = profit.toString();
newProfit = profit;
},
),
TextFormField(
readOnly: true,
decoration: InputDecoration(labelText: "profit"),
controller:
_endProfitController, //this is getting updated with the controller
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 20,
color: Colors.grey[700],
),
),
Text(
'test profit: ' +
_endProfitController.text.toString() + newProfit.toString() +
' €', // this is not getting updated, and newProfit says "Null"...
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 20,
color: Colors.grey[700],
),
),
alright, how can i get the value in my Text Widget ?
I tried to setState in the onSubmitted but then the controller also isn't updating.
I tried to declare a new double newProfit but after submit it still gives me null back....
hope someone can help me :)
best regards
And thanks for your time :)
Its not updating because the widgets are already built when you change the text value of the controller if you are creating the form inside a stateful widget you can call setState() inside the onChanged so the value of the field updates the String you'll use to show the text, something like this.
TextFormField(
decoration: InputDecoration(labelText: "profit"),
controller:
_endProfitController, //this is getting updated with the controller
textAlign: TextAlign.left,
onChanged: (value) {
setState(() {
valueText = _endProfitController.text;
});
print(valueText);
},
style: TextStyle(
fontSize: 20,
color: Colors.grey[700],
),
),
Text(
'test profit: ' +
valueText +
' €', // this is not getting updated, and newProfit says "Null"...
style: TextStyle(
fontSize: 20,
color: Colors.grey[700],
),
),
The variable that will get the value of the controller's text has to be outside the build method
String valueText = '';
If you are not building this inside a stateful widget you can look at the Provider package to update a value that has no state
I am styling text but am not able to get what I want like -:
I want this text below
look like this -:
how do I do it can anyone help?
If you want each word on a new line
String text = "Lorem ipsum dolor sit amet";
Text(
text.replaceAll(" ", "\n"),
),
text.replaceAll(" ", "\n") will replace all space with \n(new line)
You can use \n (optn + shift + 7) to make a new line inside you're String.
Container(
child: Center(
child: Text('Hello \nWorld',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 22.0,
fontWeight: FontWeight.bold,
letterSpacing: 0.7
)
),
),
),
Use textAlign to make your text align in the center (default is align left).
Its seem like by your comment you have a dynamic data. Since your question is not very clear, I will give you sample example to handle dynamic Data.
List a = ['Hello World', 'Hello', 'World'];
ListView(
children: a.map((e) {
if (e == "Hello") {
return Text(
e,
textAlign: TextAlign.end,
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
);
} else if (e == "World") {
return Text(
e,
textAlign: TextAlign.end,
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
);
} else {
return Text(
e,
textAlign: TextAlign.center,
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
);
}
}).toList()),
Code Explanation
1). I have declare a Random List of String.
2). Then I used List View to handle dynamic list.
3). I put iteration and use a Text widget and put some style according to my Requirment.
you can put condition by yourself what you needed.
You can use \n to make a new line
Code:
Center(
child: Text('Hello Guys, Thanks \nfor visiting our website \nFlutter Examples.com',
style: TextStyle(fontSize: 22),
textAlign: TextAlign.center)
)
As we are not able to make widget like RichText/Text Span For styling TextFormField,
Can anyone help me out regarding this...
Now Getting:-
Expected Result:-
How we can achieve a result like this?
Simplest way, but not exactly equals:
TextField(
decoration: InputDecoration(
hintText: 'Ciao',
suffixText: '*',
suffixStyle: TextStyle(
color: Colors.red,
),
),
),
Or create a custom TextField to use hint as Widget instead of String
You can use my two customized files:
input_decorator.dart
text_field_custom.dart
TextFieldCustom(
hintText: Text.rich(
TextSpan(
text: 'FIRST NAME',
children: <InlineSpan>[
TextSpan(
text: '*',
style: TextStyle(color: Colors.red),
),
],
style: TextStyle(color: Colors.black54),
),
),
),
Try these two files I had same requirement.
Just add attribute isMandate: true in CInputDecoration and use CTextField.
CTextField(
...
decoration: new CInputDecoration(
isMandate: true,
...
))
https://github.com/sumit1954/Flutter/blob/master/CInputDecorator.dart
https://github.com/sumit1954/Flutter/blob/master/CTextField.dart
Place this code in TextFormField or TextField
this label works as an hint property
label: RichText(
text: TextSpan(
text: 'Full Name',
style: const TextStyle(
color: Colors.grey),
children: [
TextSpan(
text: ' *',
style: TextStyle(
color: Colors.red,
)
)
]
),
floatingLabelBehavior:FloatingLabelBehavior.never,
look at above screenshot of label parameter holding a Widget not a String without any error
Achieved this in hard fast way. Replace input_decorator.dart with below code:
https://github.com/neal786y/InputDecoratorForMandatoryFields/blob/master/input_decorator.dart
In your InputDecoration scope add a property "isMandatoryField: true"
Worked for me on temporary basis.
With the latest version of flutter you can also send a widget in label parameter. So, something like this is possible
label: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(label.replaceAll('*', '')),
label.contains('*')
? Text(
'*',
style: TextStyle(color: Colors.red),
)
: Container(),
],
),
Use label property inside InputDecorator
See this answer https://stackoverflow.com/a/72209425/8913302
I have a Text widget and I want to make a part of it bold. How can I do that?
Example: Text("Required interests: Music, Guitar")
I want "Required interests:" to be bold and rest to be normal.
You can use the Text.rich() to achieve this.
Text.rich(
TextSpan(
text: 'Required interests: ',
style: TextStyle(fontWeight: FontWeight.bold),
children: <TextSpan>[
TextSpan(text: 'Music, Guitar',
style: TextStyle(fontWeight: FontWeight.normal),
)
]
),
);
Note if you do not specify any style in any of the children's TextSpan it will use the parent's style.
My Text widget looks like Text("Last Active: some location area..").
I can change text style of complete text using style. but I just like to change Last active as a bold. Text("<b>Last Active</b> some location area name..")
If I go with Row for separate text it will work but render a problem of spacing.
What's the best solution for this. And to make it bold is the only requirement.
Thanks
RichText is solution
RichText(text: TextSpan(children: [
TextSpan(text: 'Last Active', style: TextStyle(fontWeight: FontWeight.bold)),
TextSpan(text: ' some location area name..')
]))
I had problems with Andrey Turkovsky solution, the text area would be blank. I did find a slightly alternative solution. (I did want to comment to Andreys, and maybe he might be able to explain the differences between the two, Id be interested)
Text.rich(
TextSpan(
children: [
TextSpan(
text: 'Last Active',
style: TextStyle(fontWeight: FontWeight.bold)),
TextSpan(text: ' some location area name..')
],
),
)
Working solution in 2022:
RichText( text: TextSpan(text: 'Last Active: ', style: TextStyle(fontWeight: FontWeight.bold, color: Colors.black), children:
<TextSpan>[
TextSpan(text: 'some location area...', style: DefaultTextStyle.of(context).style),
], ), ),