I've already read this. how to make clear button appears when text is enter in TextFormField in flutter
but It doesn't work, and also I found that the textfield doesn't recognize the change when text is typed. If you know the solution, I really appreciate it if you let me know.
Here's my code below :
TextField(
controller: _controller,
onChanged: (String word) {
this.word = word;
_controller.text = word;
},
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w800,
color: Colors.black),
decoration: InputDecoration(
isDense: true,
suffix: _controller.text.length > 0
? Padding(
padding: const EdgeInsetsDirectional.only(
bottom: 2),
child: IconButton(
onPressed: () => _controller.clear(),
icon: Icon(Icons.clear),
iconSize: 25,
color: Colors.black.withOpacity(0.5),
))
: null,
contentPadding:
EdgeInsets.only(left: 8.5, bottom: 3),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.black)),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.black),
),
hintText: "Add text",
hintStyle: TextStyle(
fontSize: 29.0,
color: Colors.black.withOpacity(0.5)),
)),
What I want to make :
First of all, in the onChanged(), you're just assigning the value to controller.text without telling the widget to rebuild according to the changes. Therefore, you must have a setState() inside onChanged().
Second, don't reassign controller.text, since that will cause the error of the cursor always jump to the start (don't ask me why, I just know the error is there). So instead, make a new variable type String and assign value to it in onChanged(). Then when checking the condition to show or hide the suffix icon, check the condition with that new String, not with controller.text.
Try using.
suffix = _controller.text !=null?Padding(
padding: const EdgeInsetsDirectional.only(
bottom: 2),
child: IconButton(
onPressed: () => _controller.clear(),
icon: Icon(Icons.clear),
iconSize: 25,
color: Colors.black.withOpacity(0.5),
))
: null,
Related
So I was coding the search bar and I used the TextFormField widget but I have a problem with this. I have two screens and the widget is in both screens. On the first screen when you tap the TextFormField it reroutes you to the second screen and there I have set autofocus to true. The only problem is that once you done searching for accounts and try to route back to the previous screen the TextFormField autofocuses again and I do not want it like that.
And here's my code.
\\\ appbar
title: Padding (
padding: const EdgeInsets.only(left: 5.0, right: 5.0),
child: TextFormField(
autofocus: false,
cursorColor: Colors.purple,
onTap: () {
FocusScope.of(context).unfocus();
TextEditingController().clear();
Get.to(() => const SearchPage());
},
decoration: InputDecoration(
suffixIcon: const Icon(
MdiIcons.databaseSearch,
),
labelText: 'Go Wild',
labelStyle: GoogleFonts.parisienne(
fontSize: 21.0,
),
enabledBorder: OutlineInputBorder(
borderSide: const BorderSide(color: Colors.purple),
borderRadius: BorderRadius.circular(34.0),
),
),
),
),
),
/// body of the Scaffold
I have tried different answers but none of them helps. Please help me
I am developing a mobile application with Flutter. I added a TextFormField to my app like this:
When I click on the icon, the process is running in the back-end. But there is not change in the view.
My codes:
TextFormField(
controller: _passwordController,
keyboardType: TextInputType.visiblePassword,
obscureText: SeePassword,
decoration: InputDecoration(
filled: true,
fillColor: Color.fromARGB(255, 232, 232, 232),
contentPadding: EdgeInsets.symmetric(vertical: 15),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
),
prefixIcon: Icon(Icons.lock, size: 20),
suffixIcon: GestureDetector(
child: SeePassword ? Icon(Icons.remove_red_eye) : Icon(Icons.highlight_off_sharp),
onTap: () {
SeePassword = !SeePassword;
print(SeePassword);
},
),
),
style: TextStyle(fontSize: 20, fontFamily: "Roboto Regular"),
),
How can I solve the problem?
onTap is missing setState to update the ui
onTap: () {
setState((){
SeePassword = !SeePassword;
});
},
I am using speech to text (speech_recognition ) plugin and retrieving text from voice but how can i put the text in to the search field (TextField) after retrieving text. So i want to retrieve data from voice and search it.
here is my code:
// Here is retrieved text inside container
Container(
child: Center(
child: Text(
(transcription.isEmpty)
? "Speak to Record"
: "Your text is \n\n$transcription",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.pink, fontSize: 20),
),
),
),
// Here is my SearchField (TextField)
Padding(
padding: const EdgeInsets.all(20),
child: TextField(
onChanged: (text) {
_con.refreshSearch(text);
},
onSubmitted: (text) {
_con.saveSearch(text);
},
controller: _searchController,
autofocus: true,
decoration: InputDecoration(
contentPadding: EdgeInsets.all(12),
hintText: S.of(context).search_for_product,
hintStyle: Theme.of(context)
.textTheme
.caption
.merge(TextStyle(fontSize: 14)),
prefixIcon:
Icon(Icons.search, color: Theme.of(context).accentColor),
border: OutlineInputBorder(
borderSide: BorderSide(
color: Theme.of(context).focusColor.withOpacity(0.1))),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Theme.of(context).focusColor.withOpacity(0.3))),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Theme.of(context).focusColor.withOpacity(0.1))),
suffixIcon: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.end,
children: [
InkWell(
onTap: scanBarcode,
child: Image.asset(
"assets/img/barcode.png",
height: 20,
color: Colors.deepOrangeAccent,
),
),
_buildVoiceInput(
onPressed: _speechRecognitionAvailable && !_isListening
? () => start()
: () => stop(),
label: _isListening ? S.of(context).listening : '',
),
],
),
),
),
),
Taking the transcription value into consideration, which is responsible of having the text, what you can do is to make use of it, and change the data using Search TextEditingController.
So, here what I am taking about. I am not sure where are you fetching the data actually, but you can change the values, as soon as you get the data from the voice like this, and assign it to the Controller to fill the Search Field
// Suppose you are fetching the data from this method,
void fetchTextFromVoice(){
setState(() {
// Here you might be assigning the value to the Transcript value
this.transcription = data_from_voice;
// also this does the magic, which will put the data inside the Search Field
// Your TextEditingController is the key to do that
_searchController.text = data_from_voice;
// or _searchController.text = transcription; Since transcript has some value
});
}
Also, read about TextEditingController Class on what all are the operations you can perform using it. More knowledge to you on this Class will help you in great extent :)
I hope that helps, if not, then please show me where is the function where you are setting the value to transcription. You can assign the value to the same place, like above to _searchController.text and you are good to go. Let me know :)
I am setting a text field which will expands when Enter is pressed in the keyboard
when i tried to set null in max lines it does not show the text inside text field
i even set that expands = true
i used media query size in somewhere which is size.height in the code
i wrapped the text field within the Flexible widget
and add some padding then the total flexible widget is wrapped within a Row
and finally the row is wrapped within a Container
so this code is not working help me to fix this
Container(
height: size.height * .059,
width: double.infinity,
child: new Row(
children: <Widget>[
new Flexible(
child: Padding(
padding: EdgeInsets.only(right: size.width * 0.007),
child: new TextField(
controller: _textFieldController,
textInputAction: TextInputAction.newline,
keyboardType: TextInputType.multiline,
maxLines: null,
expands: true,
style: TextStyle(color: Colors.black),
cursorColor: Colors.blue,
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
borderSide: BorderSide(color: Color(0xff8e9291))),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
borderSide: BorderSide(color: Color(0xff8e9291))),
prefixIcon: Icon(
Icons.message,
color: Color(0xff8e9291),
),
hintText: "Type a message",
hintStyle: TextStyle(
color: Color(0xff8e9291),
),
),
),
),
),
FloatingActionButton(
backgroundColor: Colors.blue[400],
onPressed: () {
},
tooltip: 'Send',
child: RotationTransition(
turns: AlwaysStoppedAnimation(-35 / 360),
child: Icon(
Icons.send,
size: 20,
)),
),
],
),
),
this is the Text field i'm using..
You could remove the height of the Container since that will make a fixed height, and remove the expands of the TextField since that is to make it to fill its parent height.
You could set MaxLine property to null 'maxLines: null`
this will enable textField to Expand Vertical
Here is the code:
TextField(
controller: _textEditingController,
decoration: new InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Theme.of(context).accentColor,
width: 4.0,
),
borderRadius: new BorderRadius.circular(8.0)),
focusedBorder: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(8.0),
borderSide: new BorderSide(
style: BorderStyle.solid,
color: Theme.of(context).accentColor,
width: 4.0,
),
),
filled: true,
fillColor: _getFillColorBasedOnInput(context),
suffixIcon: IconButton(
icon: SvgPicture.asset(
'assets/images/checkmark_yellow.svg',
color: _textEditingController.text.isEmpty ? Colors.black12 : null,
width: 32.0,
height: 32.0,
)),
),
keyboardType: TextInputType.text,
textCapitalization: TextCapitalization.sentences,
textAlign: TextAlign.center,
cursorColor: Theme.of(context).accentColor,
style: new TextStyle(
fontSize: 24,
color: Theme.of(context).accentColor,
))
Here is how it looks like:
Can anyone suggest some solutions to center cursor against the beginning of an input field and a checkmark icon (see red dotted line). I have tried a lot of ideas but none of them led to the desired result. Thank you.
There's 2 things that you can do here:
1) Change the code of the suffix icon in the flutter files by removing the extra padding.
2) This is a workaround, you can use Stack Widget to keep your icon above the Textfield. This way you'll have the cursor centred.
Although, it will look unpleasant if your typed text is too long (i.e. Your typed input below icon). In that case you might limit your lnput.