CODEWITHSUNDEEP
flutterwidget
Ayush Surana
Ayush Surana

Reputation: 1926

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

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

Upvotes: 2

Views: 6205

Answers (1)

na2axl
na2axl

Reputation: 1948

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!

Upvotes: 1

Related Questions