how to access an object created in one stateful widget in another stateful widget in flutter

Question

I am stuck in my project where I have two stateful widgets created in flutter as two different dart files. Now, I have to access the instance of an object created in first w

Answer 1

You can pass the model when you construct SecondScreen widget.

1. Add model to SecondScreen constructor:

   class SecondScreen extends StatefulWidget {
     final MyModel myModel;
   
     SecondScreen(MyModel myModel, {Key key}):
         super(key: key);
   ...
   }
   

2. Pass model when you construct SecondScreen in main.dart

   Navigator.push(context, new MaterialPageRoute(builder: (_) => 
     new SecondScreen(model)));
   

3. Now you can access model in _SecondScreenState via widget.myModel

Answer 2

There are lots of ways to do this depending on your use case. Here are a few options:

1. You can expose the created object as public member of your State. Then use the currentState property of a GlobalKey in one State to get a reference to the other State. Now you can access the created object via the public member. (Note: This pattern limits the testability and encapsulation of your State, so use it sparingly.)
2. Both widgets can have a ancestor widget that extends InheritedWidget that they use to look up the created object.
3. Both widgets can be passed a model argument in their a constructor, such as a ValueNotifier. They can use this object to read and write the value.

If you go into more detail on your use case we can help you pick a pattern that makes sense.

Here is some code implementing option #1.

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

final key = new GlobalKey<MyStatefulWidget1State>();

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        body: new Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            new MyStatefulWidget1(key: key),
            new MyStatefulWidget2(),
          ],
        ),
      ),
    );
  }
}

class MyStatefulWidget1 extends StatefulWidget {
  MyStatefulWidget1({ Key key }) : super(key: key);
  State createState() => new MyStatefulWidget1State();
}

class MyStatefulWidget1State extends State<MyStatefulWidget1> {
  String _createdObject = "Hello world!";
  String get createdObject => _createdObject;

  @override
  Widget build(BuildContext context) {
    return new Center(
      child: new Text(_createdObject),
    );
  }
}

class MyStatefulWidget2 extends StatefulWidget {
  State createState() => new MyStatefulWidget2State();
}

class MyStatefulWidget2State extends State<MyStatefulWidget2> {
  String _text = 'PRESS ME';

  @override
  Widget build(BuildContext context) {
    return new Center(
      child: new RaisedButton(
        child: new Text(_text),
        onPressed: () {
          setState(() {
            _text = key.currentState.createdObject;
          });
        },
      ),
    );
  }
}

Answer 3

Here is how I pass parameter to the child widget.

First Widget dart file

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

class _FirstWidgetState extends State<FirstWidget> {
    String param = "My parameter";
    @override
    Widget build(BuildContext context) {
        return Container(
                    child: 
                        SecondWidget(param), //pass parmater here
                );
    }
}

Second Widget dart file

class SecondWidget extends StatefulWidget {
    final String param; 
    SecondWidget(this.param); //passed paramter
    _SecondWidgetState createState() => _SecondWidgetState() 
}

class _SecondWidgetState extends State<SecondWidget> {
    @override
    Widget build(BuildContext context) {
        return Container(
                    child: 
                        Text(widget.param), //output paramter
                );
    }
}