setState() or markNeedsBuild() called when widget tree was locked

Question

Flutter

i am trying to display a widget into Stack IF an condition (true or false ) , and it work with no problems but when i need to change the condition bool into SetState to hide the Widget again , it is also work but with annoying error messages whish is setState() or markNeedsBuild() called when widget tree was locked.

my code is so complicated but i am gonna show a simple similar example

bool displayWidget = false;
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Stack(
        children: [
          Container(
            child: TextButton(
              onPressed: () {
                final result = await FilePicker.platform.pickFiles(allowMultiple: false );
                if (result == null) return;
                final path = result.files.single.path;
                setState(() => displayWidget = true);
              },
            child: Text ("studio")
            ),
          ),
          displayWidget?
          GestureDetector(
            onTap: ()=> setState(() => displayWidget = false), // the  error happen when i click here 
            child: Container(
              child:  Image.asset("here is the picture in full secreen"),
            ),
          ):Container()
        ],
      ),
    );
  }
}

i know there is a photo viewer better than this way :D but i only give a simple example for other real case

score 0 · Answer 1 · edited Jul 06 '21 at 06:54

0

First of all I would like to ask you where is @override? Did you forget to add that in your question? If yes then that error might have something to do with that. If no then try declaring the bool value above @override.

edited Jul 06 '21 at 06:54

Dharman

30,962
25
85
135

answered Jul 06 '21 at 06:49

Sanmay Kant

149
8

1

missing @override annotation does not affect your code in any way and cannot cause any compile or runtime errors. – Olga Jul 06 '21 at 07:24
missing override annotation does not affect at all , basically @override making sense with function not variables , but i found solution and will publish it as answer so everybody will Everyone benefits from it but thanks anyway – Jack Jul 06 '21 at 08:06

score 0 · Answer 2 · answered Jul 06 '21 at 07:19

please see if this example can be helpful to you (I simplified yours just a little bit more so it can be easily run in dartpad). in your case onPressed function should contain your file picking logic and have a return type as you expect it to be (probably, String?) and check if returned value isn't null, then show your image

class MyWidget extends StatefulWidget {  
  @override
  State<MyWidget> createState() => MyWidgetState();
}

class MyWidgetState extends State<MyWidget> {
  
  bool displayWidget = false;
  
  bool onPressed(bool isShown) {
    //instead of this mocked function pickFile here 
    return !isShown;
  }
  
    @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Row(
        children: [
          Container(
            child: TextButton(
              onPressed: () {
                displayWidget = onPressed(displayWidget);
                setState(() => displayWidget);
              },
            child: Text ("Show or hide text"),
            ),
          ),
          if(displayWidget)
          GestureDetector(
            onTap: ()=> setState(() => displayWidget = !displayWidget),
            child: Container(
              child:  Text('This text is to be shown'),
            ),
          ),
        ],
      ),
    );
  }
}

thanks a lot for trying to help , but chick the answers below , i found solution — Jack, Jul 06 '21 at 08:10

Jack · Answer 3 · 2021-07-06T22:49:13.813

0

I found the solution from the official website of flutter

simply wrap set state into

in this solution would be for most cases

      if(!mounted) {
         setState
        
           }
or  

if(mounted) { // depends on your widget case
 setState
     }

source https://www.kindacode.com/article/flutter-error-setstate-called-after-dispose/

if not , try this

WidgetsBinding.instance
    .addPostFrameCallback((_) => setState(() {}));

source https://www.thetopsites.net/article/50288698.shtml

and i find same error with many answers in stackoverflow press below

Flutter setState() or markNeedsBuild() called when widget tree was locked

edited Jul 06 '21 at 22:49

answered Jul 06 '21 at 08:09

Jack

161
1
16

could you please point where it's suggested to do so in official flutter web site? this is a simple state management issue, setState does not require any additions to it to work as supposed to. – Olga Jul 06 '21 at 12:56
checking if `mounted` indeed is better approach than `Timer` (which you suggested in this answer before editing) but it's still redundant in most cases. Plus none of the sources you provide actually are from official Flutter docs too. It's not always the best practice what some recommendations provide. Sometimes answers and articles authors lack the state management and widget lifecycle understanding. I strongly suggest taking a deeper look into that. – Olga Jul 07 '21 at 07:03
to be honest i missed the website which i found the docs , please explain your issue i am trying to help – Jack Jul 07 '21 at 11:51

setState() or markNeedsBuild() called when widget tree was locked

3 Answers3