onChange does not work in flutters appbar

Question

I wanted to put a textfield inside of an appbar and get data from it using the onChanged property. I did it but onChanged does not work.

new Container(
      child: new Stack(
        children: <Widget>[
          new Container(
            child: BuildSvg('assets/svg/backgroundSmall.svg'),
            color: Colors.lightGreen,
          ),
          new Scaffold(
            appBar: new AppBar(
              title: TextField(
                onChanged: (text) {
                  print('text');
                  setState(() {});
                },
              ),
              backgroundColor: Colors.transparent,
              elevation: 0.0,
            ),

          )
        ],
      ),
    );

https://stackoverflow.com/questions/49966980/how-to-create-toolbar-searchview-in-flutter — Amit Prajapati, Aug 22 '19 at 13:03

CopsOnRoad · Accepted Answer · 2019-08-22T15:00:50.233

0

If I understood you correctly, what you need is:

Create a variable

String _text = "";

And update your code to this.

new Container(
  child: new Stack(
    children: <Widget>[
      new Container(
        child: BuildSvg('assets/svg/backgroundSmall.svg'),
        color: Colors.lightGreen,
      ),
      new Scaffold(
        appBar: new AppBar(
          title: TextField(
            onChanged: (text) {
              setState(() => _text = text); // you need this
            },
          ),
          backgroundColor: Colors.transparent,
          elevation: 0.0,
        ),
        backgroundColor: Colors.transparent,
        body: new Container(
          color: Colors.grey,
          child: new Center(child: new Text(_text)), // and this
        ),
      )
    ],
  ),
)

edited Aug 22 '19 at 15:00

answered Aug 22 '19 at 13:04

CopsOnRoad

237,138
77
654
440

4

calling `setState(() {});` is not good practice and should be avoided. In this case there is even a clear change of the widget's state. Put the `_text = text` assignment in the body of the function passed to `setState`, see: https://stackoverflow.com/a/44379367/3941291 – DAG Aug 22 '19 at 13:11
@DaGardner I am sorry but I didn't read anything like `calling setState isn't a good practice`, yes it isn't a good practice if you are unnecessarily calling it but in case you need to update some value on every text changed in the `TextField`, there is no harm in doing that. – CopsOnRoad Aug 22 '19 at 13:17
Please read the attached answer. Putting `_text = text` inside of the `setState` call makes the state update explicit. Just calling `setState(() {})` might lead to bugs during refactoring if the call is accidentally removed. The analyer might also warn you in the future about this: https://github.com/flutter/flutter/issues/1220 – DAG Aug 22 '19 at 13:19
@DaGardner Wait a second, i think I misunderstood you, did you mean instead of using empty `setState(() {});` I should use `setState(() { _text = text });`? – CopsOnRoad Aug 22 '19 at 14:57
1

yes. using `setState` with an empty closure can lead to problems down the road – DAG Aug 22 '19 at 14:59
@DaGardner OK, I am sorry, I really misunderstood your statement, thanks for pointing it out, I have updated my code also. But somewhere in Google docs, I also saw empty `setState` – CopsOnRoad Aug 22 '19 at 15:00
Really nice question you linked there @DaGardner - An empty `setState` is definitely a bad practice. – NiklasPor Aug 22 '19 at 15:06

onChange does not work in flutters appbar

1 Answers1