我什么时候在 Flutter 中使用 setState？

Question

As newbie in flutter it's very confusing for me when use setState in Flutter application. In below code boolean searching and var resBody used inside setState . My question is why only searching and resBody inside setState? Why not others variable?

var resBody;
bool searching =  false,api_no_limit = false;
String user = null;

Future _getUser(String text) async{
setState(() {
  searching = true;
});
user = text;
_textController.clear();
String url = "https://api.github.com/users/"+text;
  var res = await http
      .get(Uri.encodeFull(url), headers: {"Accept": 
           "application/json"});
  setState(() {
    resBody = json.decode(res.body);
  });
}

Answer 1

According to the docs :

Calling setState notifies the framework that the internal state of this object has changed in a way that might impact the user interface in this subtree, which causes the framework to schedule a build for this State object.

So if the state of the widget changes you have to call setState to trigger a rebuild of the view and see immediatly the changes implied by the new state.

Anyhow the below snippets are equivalent.

first case (directly form flutter create <myproject> ):

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {

    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }

second case:

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    _counter++;
    setState(() {});
  }

What I don't know is the reason why and if the first case is the conventional way to use setState , I would say because of readability of code.

Answer 2

When you change the state of a stateful widget, use setState() to cause a rebuild of the widget and it's descendants.
You don't need to call setState() in the constructor or initState() of the widget, because build() will be run afterwards anyway.

Also don't call setState() in synchronous code inside build() . You shouldn't need to cause a rerun of build() from within build() .

Answer 3

If you look at the implementation of setState :

  void setState(VoidCallback fn) {
    assert(fn != null);
    assert(...);
    final dynamic result = fn() as dynamic;
    assert(...);
    _element.markNeedsBuild();
  }

you see that the only things it does are: asserting a few things to help you debug incorrect usage of it, executing the callback, and marking the element so it gets rebuild.

So, technically, it doesn't matter if you change some variables inside the setState callback or outside of it, as long as setState is called.

However, for readability there is a big difference. Rebuilding widgets has impact on the performance of the app, so you want to do so as little as possible. Making all, and only those, changes to variables that require the widget to rebuild inside the setState callback makes it clear to people (including your future self) exactly why a rebuild is needed.

Answer 4

When you need to change the value any widget shows on the screen. For example, in the app there was a task. After completion of which points should be added to the "wallet". But the problem is that we need to refresh the app to see points on the "wallet". To solve this we use Setstate() on Button Onpressed()

For example:

RaisedButton(
 
 onpressed(){
    
   setstate(){
      
     points+10;

   }
 }

)

Every time the button is pressed it will refresh the widget with the new value returned by the "wallet" variable without the need to restart the entire App.

Answer 5

According to the documentations :

Generally it is recommended that the setState method only be used to wrap the actual changes to the state, not any computation that might be associated with the change. For example, here a value used by the build function is incremented, and then the change is written to disk, but only the increment is wrapped in the setState :

 Future<void> _incrementCounter() async { setState(() { _counter++; }); Directory directory = await getApplicationDocumentsDirectory(); final String dirName = directory.path; await File('$dir/counter.txt').writeAsString('$_counter'); }

Answer 6

Whenever you want to update a widget tree (generally with some new data), you call setState . It can only be used in State class. Here's the simple implementation:

class _MyPageState extends State<MyPage> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          onPressed: () => setState(() => _count++),
          child: Text('Count = $_count'),
        ),
      ),
    );
  }
}

Answer 7

setState() is only being used with statefulWidget insides flutter. setState() tell the flutter to rebuild the page when something defined inside the setState() changes.

NOT: setState() is a callback function.

Text(questions[questionIndex])

Here I want to change the Text according to the given questions array, and on every button click, I want to increase the index by 1.

void answerQuesion() {
    setState(() {
      questionIndex = questionIndex + 1;
    });
    print(questionIndex);
  }

So, I have to put this index increment inside the setState() , so that flutter will rebuild the page after every change of questionIndex.