Flutter – setState from Another Class

In Flutter, the setState() method is used to update the state of a widget. By default, it can only be called within the class where the widget’s state is managed. However, there are cases where you may need to update the state from another class. This can be achieved by using different approaches such as using callback functions or global state management solutions like Provider or Riverpod.

Using Callback Functions

One way to update the state of a widget from another class is by using callback functions. Here’s an example that demonstrates this approach:

    
      // main.dart
      
      import 'package:flutter/material.dart';
      import 'package:your_app/other_class.dart';
      
      void main() {
        runApp(MyApp());
      }
      
      class MyApp extends StatelessWidget {
        @override
        Widget build(BuildContext context) {
          return MaterialApp(
            home: Scaffold(
              appBar: AppBar(title: Text('Flutter - setState')),
              body: MyWidget(),
            ),
          );
        }
      }
      
      class MyWidget extends StatefulWidget {
        @override
        _MyWidgetState createState() => _MyWidgetState();
      }
      
      class _MyWidgetState extends State {
        int _counter = 0;
      
        void _incrementCounter() {
          setState(() {
            _counter++;
          });
        }
      
        @override
        Widget build(BuildContext context) {
          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('Counter: $_counter'),
                OtherClass(callback: _incrementCounter),
              ],
            ),
          );
        }
      }
      
      
      // other_class.dart
      
      import 'package:flutter/material.dart';
      
      class OtherClass extends StatelessWidget {
        final VoidCallback callback;
      
        OtherClass({required this.callback});
      
        @override
        Widget build(BuildContext context) {
          return ElevatedButton(
            onPressed: callback,
            child: Text('Increment Counter'),
          );
        }
      }
    
  

In this example, we have a main.dart file where the MyApp widget is defined. Inside the MyApp widget, we have a MyWidget widget that manages the state of a counter. The counter value is displayed in the UI, and there is also an OtherClass widget that triggers the increment of the counter when a button is pressed.

The OtherClass widget takes a callback function as a parameter. This callback function is then used as the onPressed handler for the button. When the button is pressed, it calls the callback function, which triggers the setState() method in the MyWidget widget and updates the counter value.

Using Global State Management Solutions

Another approach to update the state of a widget from another class is by using global state management solutions like Provider or Riverpod. These solutions help manage a global state that can be accessed and modified from any part of the application.

Here’s an example using the Provider package:

    
      // main.dart
      
      import 'package:flutter/material.dart';
      import 'package:provider/provider.dart';
      import 'package:your_app/counter_provider.dart';
      import 'package:your_app/other_class.dart';
      
      void main() {
        runApp(
          ChangeNotifierProvider(
            create: (context) => CounterProvider(),
            child: MyApp(),
          ),
        );
      }
      
      class MyApp extends StatelessWidget {
        @override
        Widget build(BuildContext context) {
          return MaterialApp(
            home: Scaffold(
              appBar: AppBar(title: Text('Flutter - setState')),
              body: MyWidget(),
            ),
          );
        }
      }
      
      class MyWidget extends StatelessWidget {
        @override
        Widget build(BuildContext context) {
          final counterProvider = Provider.of(context);
      
          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('Counter: ${counterProvider.counter}'),
                OtherClass(),
              ],
            ),
          );
        }
      }
      
      
      // counter_provider.dart
      
      import 'package:flutter/foundation.dart';
      
      class CounterProvider with ChangeNotifier {
        int _counter = 0;
      
        int get counter => _counter;
      
        void incrementCounter() {
          _counter++;
          notifyListeners();
        }
      }
      
      
      // other_class.dart
      
      import 'package:flutter/material.dart';
      import 'package:provider/provider.dart';
      import 'package:your_app/counter_provider.dart';
      
      class OtherClass extends StatelessWidget {
        @override
        Widget build(BuildContext context) {
          final counterProvider = Provider.of(context);
      
          return ElevatedButton(
            onPressed: counterProvider.incrementCounter,
            child: Text('Increment Counter'),
          );
        }
      }
    
  

In this example, we have a main.dart file where the MyApp widget is defined. The CounterProvider class is created to manage the counter state. Its notifyListeners() method is called whenever the counter value is updated to notify all the listeners.

The MyApp widget wraps the ChangeNotifierProvider around its child, allowing all the descendant widgets to access the CounterProvider through the Provider.of() method. Inside the MyWidget widget, we access the counter value from the CounterProvider and display it in the UI.

The OtherClass widget also uses the Provider.of() method to access the CounterProvider and use its incrementCounter() method as the onPressed handler for the button. When the button is pressed, it calls the incrementCounter() method from the CounterProvider, which updates the counter value and notifies all the listeners, triggering a UI update.

These are just a few examples of how you can update the state of a widget from another class in Flutter. Depending on your specific use case, you may choose a different approach or use other state management solutions available in the Flutter ecosystem.