How to Force Flutter to Rebuild/Redraw All Widgets?

• Flutter
• Flutter Widget Guide

Earlier we have been through various articles based on how to pass data to a Stateful widget in Flutter so, in this article, we will go through How to Force Flutter to Rebuild/Redraw All Widget in Flutter?

Are you ready for the same?

How to Force Flutter to Rebuild/Redraw All Widgets In Flutter?

This type of use case, where you have data that children can read but you don’t want to explicitly pass the data to the constructor arguments of all your children, usually calls for an Inherited Widget. flutter will automatically track which widgets depend on the data and rebuild the parts of your tree that have changed.

There is a LocaleQuery widget that is designed to handle locale changes. You can consult an expert Flutter developer from Flutter Agency to implement these solutions and for Flutter mobile application development.

If you want to track something other than locale changes, you can make your own class that extends inherited widget, and include it in the hierarchy near the root of your app. Its parent should be a Stateful Widget with a key set to a GlobalKey that accessible to the children.

The State of the stateful widget should own the data you want to distribute and expose methods for changing it that call setState. If child widgets want to change the State’s data, they can use the global key to get a pointer to the State (key.currentState) and call methods on it.

If they want to read the data, they can call the static of(context) method of your subclass of Inherited Widget and that will tell Flutter that these widgets need to rebuilt whenever your State calls setState.

• Your widget should have a setState() method, every time this method is called, the widget is redrawn.

https://api.flutter.dev/flutter/widgets/State/setState.html

You can use the widget by wrapping your MaterialApp with it, for example:

Widget build(BuildContext context) {
  return AppBuilder(builder: (context) {
    return MaterialApp(
      ...
    );
  });
}

• You can tell the app to rebuild using:

AppBuilder.of(context).rebuild();

• In your build method, call the RebuildAllChildren function and pass it the context:

@override
Widget build(BuildContext context) { 
  rebuildAllChildren(context);
  return ...
}

void rebuildAllChildren(BuildContext context) {
  void rebuild(Element el) {
    el.markNeedsBuild();
    el.visitChildren(rebuild);
  }
  (context as Element).visitChildren(rebuild);
}

This will visit all children and mark them as needing to rebuild. If you put this code in the topmost widget in your widgets tree, it will rebuild everything.

• Refreshing the whole widget tree might be expensive and when you do it in front of the user’s eyes that wouldn’t seem sweet.so for this purpose flutter has ValueListenableBuilder<T> class. It allows you to rebuild only some of the widgets necessary for your purpose and skip the expensive widgets.
• You can see the documents here ValueListenableBuilder flutter docs

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {

  final ValueNotifier _counter = ValueNotifier(0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("ValueListenableBuilder")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('You have pushed the button this many times:'),
            ValueListenableBuilder(
              valueListenable: _counter,
              builder: (context, value, _) {
                // This builder will only get called when the _counter
                // is updated.
                return Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Text(
                      '$value',
                      style: const TextStyle(fontSize: 25),
                    ),
                  ],
                );
              },

              // The child parameter is most helpful if the child is
              // expensive to build and does not depend on the value from
              // the notifier.
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.plus_one),
        onPressed: () => _counter.value += 1,
      ),
    );
  }
}

And also never forget the power of setState(() {});

• Whenever you need to refresh: There is also a pub package named states_rebuilder that would do the trick.

Output

Conclusion:

Thanks for reading it out.

In this article, we have been through Force Flutter to Rebuild/Redraw All Widget.

Keep Learning !!! Keep Fluttering !!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.