This article will help you to understand how to force flutter to rebuild or redraw all widgets. You will see the set-by-step process to force flutter to rebuild or redraw all widget using setState() method.
Force Flutter to Rebuild or Redraw All Widgets.pptx
1.
2. 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.
3. 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.
4. 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:
5. Widget build(BuildContext context) {
return AppBuilder(builder: (context) {
return MaterialApp(
...
);
});
}
You can tell the app to rebuild using:
AppBuilder.of(context).rebuild();
6. 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);
}
7. 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
8. class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
final ValueNotifier _counter = ValueNotifier(0);
9. @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),
),
],
);
},
10. // 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,
),
);
}
}
11. 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:
12. 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.