Flutter - Setting value of a variable of one stateful widget from another stateful widget

Question

I am new to flutter and this might be a very nooby question but I want to set state of a variable of one stateful widget from another Stateful widget.

Sharing a small snippet that reproduces the problem am facing.

FirstWidget.dart

class FirstWidget extends StatefulWidget {
  @override
  _FirstWidgetState createState() => _FirstWidgetState();
}

class _FirstWidgetState extends State<FirstWidget> {

bool _isDisabled = true; 

 @override
  Widget build(BuildContext context) {
    return Container(
               // Doing Something with the flag isDisabled
);
  }
}

SecondWidget.dart

class SecondWidget extends StatefulWidget {
  @override
  _SecondWidgetState createState() => _SecondWidgetState();
}

class _SecondWidgetState extends State<SecondWidget> {

 @override
  Widget build(BuildContext context) {
    return Container(
        // Here I want to update the isDisabled Flag of the First Widget. 
);

  }
}

I basically just want to know how do I update the value of a variable of one widget from another widget.

Thanks

na2axl · Accepted Answer · 2020-04-18 19:31:29Z

To achieve this, you can use a GlobalKey. GlobalKey are used to identify a specific widget in the widget tree.

Example of usage:

In the FirstWidget.dart file:

class FirstWidget extends StatefulWidget {
  @override
  FirstWidgetState createState() => FirstWidgetState();
}

// Make sure your FirstWidgetState class is not private!
class FirstWidgetState extends State<FirstWidget> {

  bool _isDisabled = true;

  void enable(bool value) {
    setState(() => _isDisabled = !value);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      // Doing Something with the flag isDisabled
    );
  }
}

In the SecondWidget.dart file (I've changed this file a bit to show the usage of GlobalKey):

final GlobalKey<FirstWidgetState> firstWidgetGlobalKey = new GlobalKey<FirstWidgetState>();

class SecondWidget extends StatefulWidget {
  @override
  _SecondWidgetState createState() => _SecondWidgetState();
}

class _SecondWidgetState extends State<SecondWidget> {

 @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          FirstWidget(
            key: firstWidgetGlobalKey,
          ),
          RaisedButton(
            onPressed: () {
              firstWidgetGlobalKey.currentState.enable(true);
            },
            child: Text("Enable First Widget"),
          ),
        ],
      ),
    );
  }
}

EDIT

A GlobalKey instance is intended to be unique in the entire app. So a smarter way to use global keys, is to store all of them in a separate file (eg. keys.dart). In this file you can have firstWidgetGlobalKey and secondWidgetGlobalKey as final variables, and just import the file to use them.

A downside (but this is an intended behavior) is that a GlobalKey can only be used when the widget it identify is currently present in the widget tree, otherwise you will get a null reference on currentState.

An other way to access the state of a widget from another one is to use InheritedWidget. Since it demand more efforts, there is a great and simple tutorial showing the usage: InheritedWidget Tutorial on Medium.

Hope this will help!

Thanks for the simple and speedy solution. I have one question though I will be using Second Widget at many places . And there might be many such values that I might need to update here. So should I just create Global keys of all the other widgets whose values I might update here or is there any other way to go about this?

Collectives™ on Stack Overflow

Flutter - Setting value of a variable of one stateful widget from another stateful widget

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related