The didChangeDependencies method in Flutter is part of the widget lifecycle. It is called whenever the widget’s dependencies change, such as when an inherited widget that the widget relies on is modified. This method is useful for when you need to update state or fetch resources based on changes in the widget tree’s dependencies.
When is didChangeDependencies Called?
- After the first time the widget is inserted into the widget tree (right after
initState). - Whenever an inherited widget (like
ThemeorMediaQuery) that your widget depends on changes.
This method provides a chance to update or refresh data that is dependent on those inherited widgets.
Example of didChangeDependencies
Here’s a Flutter example using didChangeDependencies to react to changes in the theme of the app:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( brightness: Brightness.light, primaryColor: Colors.blue, ), darkTheme: ThemeData( brightness: Brightness.dark, primaryColor: Colors.grey, ), themeMode: ThemeMode.system, // Will switch based on system settings home: ThemeChangeDemo(), ); } } class ThemeChangeDemo extends StatefulWidget { @override _ThemeChangeDemoState createState() => _ThemeChangeDemoState(); } class _ThemeChangeDemoState extends State<ThemeChangeDemo> { Color _textColor = Colors.black; @override void didChangeDependencies() { super.didChangeDependencies(); // Retrieve the current theme's brightness and update the text color final Brightness brightness = Theme.of(context).brightness; setState(() { // If the theme is dark, set the text color to white, otherwise black _textColor = brightness == Brightness.dark ? Colors.white : Colors.black; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('didChangeDependencies Example'), ), body: Center( child: Text( 'This text color changes with the theme!', style: TextStyle(color: _textColor, fontSize: 20), ), ), ); } } |
Explanation:
-
Theme Changes: The
ThemeChangeDemowidget checks for changes in the app’s theme usingTheme.of(context).brightnessinsidedidChangeDependencies. This allows the widget to respond when the system theme (light or dark mode) changes. -
didChangeDependencies:
- The method is called after the first build (after
initState) and whenever the theme (an inherited widget) changes. - The current theme’s brightness is checked, and the text color is updated accordingly (black for light mode and white for dark mode).
- The method is called after the first build (after
-
State Update:
setStateis used to change the_textColorwhenever the theme changes.
Why Use didChangeDependencies?
didChangeDependencies is helpful in cases where your widget relies on inherited widgets (like Theme, MediaQuery, or custom inherited widgets). It automatically reacts to changes and allows you to update your widget state based on those dependencies.
This method ensures that your widget reacts to changes in dependencies without requiring manual intervention.