flutterdartglobal-variablesscoped-model

Access child widget's variable in parent widget (Flutter with Dart)


I have a button which when pressed opens a modal bottom sheet. The sheet has a form widget that takes few text fields and an image (from gallery/camera). For this image input, I have created another stateful widget which is called in the previous view (the modal sheet). Now, the image file received through user is set in a variable in the child stateful widget. My question is, how can I access this variable (a File object in child widget) inside the parent widget?

Please refer to the following code:

Bottom Sheet: (See comment where child widget is called.)

        context: _scaffoldKey.currentContext,
        builder: (BuildContext context) {
          return Scaffold(
              backgroundColor: Colors.white,
              appBar: AppBar(
                elevation: 0.0,
                automaticallyImplyLeading: false,
                backgroundColor: Colors.white,
                title: Center(
                  child: _formTitleWidget(),
                ),
              ),
              body: Container(
              height: MediaQuery.of(context).size.height* 0.5,
              margin: EdgeInsets.all(MediaQuery
                  .of(context)
                  .copyWith()
                  .size
                  .width * 0.05),
              child: Form(
                key: _addChildFormKey,
                child: SingleChildScrollView(
                  child: Container(
                    height: MediaQuery.of(context).size.height* 0.4,
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        // Calling the child widget here - where 'image' variable is set
                        AddChildView(),
                        Container(
                          height: MediaQuery.of(context).size.height* 0.4,
                          width:  MediaQuery.of(context).size.width* 0.65,
                          child: Column(
                            children: [
                              _childNameInput(),
                              _childBirthDateInput(),
                              _childHeightInput(),
                              _childWeightInput(),
                              _addChildWithInfo()
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                ),
              ),
            )
          );
        }```

Solution

  • If you're not using a state management solution you will have to use a callback.

    Create a variable in the parent. Create a method that takes in value and assigns it to the variable you just created.

    Create a final Function and add it to the constructor in your child. Now when you instantiate the Child Widget in your Parent it will accept the method you just created.

    Run the function in your child when appropriate.

    class ParentWidget extends StatelessWidget {
      Image image;
    
      callBack(Image imageFromChild) {
        this.image = imageFromChild;
      }
    
      @override
      Widget build(BuildContext context) {
        return Container();
      }
    }
    
    class ChildWidget extends StatelessWidget {
      final Function callBack;
    
      const ChildWidget({Key key, this.callBack}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Container(
          child: FlatButton(
            child: Text('Press'),
            onPressed: () {
              var image = uploadImageMethod();
              callBack(image);
            },
          ),
        );
      }
    }