How to check if Widget has mounted in flutter

Question

So in my app, I want to make an Ajax request as soon as the widget is mounted, not in initState(). Similar to ComponentWillMount() in react

[This](https://docs.flutter.io/flutter/widgets/State/mounted.html) and [this](https://github.com/flutter/flutter/issues/6246) might help. — Jerome Escalante, Feb 03 '19 at 09:40

score 42 · Answer 1 · answered Dec 16 '19 at 01:42

42

if the Widget has not mounted then return. Do it before the setState method

if (!mounted) return;
setState(() {});

or

if (mounted) {
   //Do something
};
setState(() {});

answered Dec 16 '19 at 01:42

Classy-Bear

881
11
19

2

"It is an error to call setState unless mounted is true." - official docs .. https://api.flutter.dev/flutter/widgets/State/mounted.html – iamnabink Mar 06 '21 at 14:55

score 18 · Answer 2 · answered Mar 18 '21 at 14:04

18

If you want to execute some code as soon as the widget loaded , you could simply put this code in the initstate like the following ;

 void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) => yourFunction(context));   
 }

In this way , the yourFunction will be exectued as soon as the first frame of the widget loaded on the screen.

answered Mar 18 '21 at 14:04

Hossein Hadi

1,229
15
20

this should be marked an answer – Akbar Noto Jan 01 '23 at 12:33

score 8 · Answer 3 · answered Feb 03 '19 at 09:44

I don't think it's currently possible.

Here's the mounted property: https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/widgets/framework.dart#L974

bool get mounted => _element != null;

And here's when _element is set: https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/widgets/framework.dart#L3816

_state._element = this

And I don't see any hook around this code that would inform us.

Why not use initState anyway? It's probably what you want. Here's the comment above the mounted property: https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/widgets/framework.dart#L967

  /// After creating a [State] object and before calling [initState], the
  /// framework "mounts" the [State] object by associating it with a
  /// [BuildContext]. The [State] object remains mounted until the framework

score 8 · Answer 4 · answered Dec 15 '20 at 04:53

8

Simply do this as follows.

if (this.mounted) {
        setState(() {
         //Your code
        });
}

answered Dec 15 '20 at 04:53

gsm

2,348
17
16

score 3 · Answer 5 · answered Apr 04 '23 at 00:02

With the latest update, Flutter 3.7, you can directly check whether the widget is mounted using the context. Here's an example use:

@override
  Widget build(BuildContext context) {
    return OutlinedButton(
      onPressed: () async {
        await Future<void>.delayed(const Duration(seconds: 1));
        if (context.mounted) {
          Navigator.of(context).pop();
        }
      },
      child: const Text('Delayed pop'),
    );
  }

For details, refer to this page.

score 1 · Answer 6 · edited Jan 06 '23 at 14:55

1

I know this answer comes a little bit late but...

Inside your method, you should have something like this:

if(mounted){
   setState(() {});
 }

This would help, to rebuild the UI only if something changes. I use this myself inside a method, where I fill my list with users from firestore.

The mounted property helps to avoid the error, when you trying to call setState before build.

edited Jan 06 '23 at 14:55

hio

915
8
26

answered Nov 06 '21 at 10:49

Вадим

93
1
10

4

you don't need a boolean operator to check a boolean value. – Mudassir Mar 09 '22 at 09:55

How to check if Widget has mounted in flutter

6 Answers6