使用另一个窗口小部件中的按钮插入TextField-Flutter

Question

I have a TextField that serves as a search bar where the user can use the built in Android/iOS keyboard to type but also has the possibility to insert a special characters in the search bar from a button. In a way the typing and the other insertion is combined into one string

use case: The user types hell in the search bar then presses the button widget the search bar value becomes : hellö

I set up everything but when I click the button nothing happens (the typing from the keyboard works fine)

Here's my code:

//I have this as a global variable
TextEditingController _searchInputControllor = TextEditingController();

//This is the TextField
class _SearchBarState extends State<SearchBar> { 
  @override
  Widget build(BuildContext context) {
    return TextField( 
    enableInteractiveSelection: false,                     
    controller: _searchInputControllor,
    cursorColor: primaryDark,
    decoration: InputDecoration(
      contentPadding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 15.0),
      border: InputBorder.none,
      hintText: "Search...",
      suffixIcon: Material(                     
        color: Colors.white,
        elevation: 6.0,
        borderRadius: BorderRadius.all(Radius.circular(6.0),),
        child: InkWell(
          splashColor: Colors.greenAccent,
          onTap: () {},
          child: Icon(Icons.search, color: primaryDark,),
         ),
       ),
     ),
   );
  }
} 

//This is the button widget
//It is supposed to add to the search bar but nothing happens
class _SpecialCharState extends State<SpecialChar> {
  @override
  Widget build(BuildContext context) {
    return ButtonTheme(
      minWidth: 40.0,
      child: FlatButton(
        color: Colors.transparent,
        textColor: Colors.black,
        padding: EdgeInsets.all(8.0),
        splashColor: Colors.blue,
        onPressed: () {
          setState(() {
            _searchInputControllor.text = _searchInputControllor.text + widget.btnVal.toLowerCase();
          });
        },
        child: Text(
          widget.btnVal
        ),
      )
    );
   }
  }

Answer 1

A. No problem at all

I think your code is working well as I tried on my Android Phone Demo .

The text field is changed as I tap the buttons.

B. Change cursor position

Nonetheless, I add this code to make the cursor automatically placed on last character.

Rather than directly changed the text, we copy its value which contains selection. Later we offset its selection by length of newText

void appendCharacters() {
  String oldText = _searchInputControllor.text;
  String newText = oldText + widget.btnVal.toLowerCase();

  var newValue = _searchInputControllor.value.copyWith(
    text: newText,
    selection: TextSelection.collapsed(
      offset: newText.length, //offset to Last Character
    ),
    composing: TextRange.empty,
  );

  _searchInputControllor.value = newValue;
}

so we can trigger the method with code below :

Widget build(BuildContext context) {
  return ButtonTheme(
    minWidth: 40.0,
    child: FlatButton(
      onPressed: appendCharacters, // call a function
    ),
  );
}

Working App Repository

You may look into this repo and build yourself. Github