Flutter Stateful Widget Passing Null

Question

Below are 1 stateless widget for the page, 1 stateful widget for repetitive purposes. i realized i try to pass down the data from last page to be used here, and return initial value = null error.

actually this is the third place i did the modal route

Picture: 2nd page code, fetch data from first page, and modal to third

as the picture, the _passData is from last page, and going to pass to next page as an object, am i doing right?

error occured Error Image

errors shows that the data i passed is null. but when i test the passed data in stateless in 3rd page, not stateful in 3rd page (ie not calling stateful widget to passdata down), sometime it works some times it doesnt

Below are code for 3rd page whre

class EditDashboardCardDetailsScreen extends StatelessWidget {

  static const routeName = '/EditDashboardDetail';

  @override
  Widget build(BuildContext context) {
    final _deedID =
        ModalRoute.of(context).settings.arguments as String; // is the id!
    final _loadedDeed = Provider.of<DeedsData>(context).findByKey(_deedID);
    String _tempTitle, //A
        _tempDescription, //B
 
    TextEditingController _textCtrlA = new TextEditingController();
    TextEditingController _textCtrlB = new TextEditingController();
  
    return Scaffold(
      body: SafeArea(
        child: CustomScrollView(
          slivers: [
            SliverAppBar(
              pinned: true,
              expandedHeight: 250.0,
              actions: [],
              flexibleSpace: FlexibleSpaceBar(
                title: Text("Edit space"),
              ),
            ),
            SliverList(
              delegate: SliverChildListDelegate(
                [
                  EditTextFieldForm(
                    initialValText: _loadedDeed.title,
                    labelText: "Title",
                    maxLines: 3,
                    textControllerTextForm: _textCtrlA,
                  ),
                  
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class EditTextFieldForm extends StatefulWidget {
  final String labelText;
  final String initialValText;
  final TextEditingController textControllerTextForm;
  final int maxLines;

  EditTextFieldForm({
    @required this.labelText,
    @required this.initialValText,
    @required this.textControllerTextForm,
    @required this.maxLines,
  });

  @override
  _EditTextFieldFormState createState() => _EditTextFieldFormState();
}

class _EditTextFieldFormState extends State<EditTextFieldForm> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(12),
      child: TextFormField(
        controller: widget.textControllerTextForm,
        initialValue: widget.initialValText,
        maxLines: widget.maxLines,
        decoration: InputDecoration(
          labelText: widget.labelText,
          focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.all(
              Radius.circular(5.0),
            ),
            borderSide: BorderSide(color: Colors.blue),
          ),
        ),
      ),
    );
  }
}

Please help me.. much appreciate

i suspect the problem could be

1. the modal route passing argument
2. the stateless stateful within page 3 i did something wrong

Edit and Updates: I try to use future builder but raise another problems and i was struggling to solve

new error enter image description here

      Future<String> _getID() async {
       var _idpass = await ModalRoute.of(context).settings.arguments as String;
       return _idpass;
     }
   ......
            FutureBuilder(
              future: _getID(),
              builder:
                  (context, snapshot) {
                if (snapshot.hasData) {
                  return SliverList(
                    delegate: SliverChildListDelegate(
                      [
                      
                      ],
                    ),
                  );
                } else {
                  Center(
                    child: CircularProgressIndicator(),
                  );
                }
              },
            )

Answer 1

I suspect findByKey method haven't returned the object but _loadedDeed.title already get called at first place, so it throws the null error. To fix this, I would suggest you to use FutureBuilder .

FutureBuilder(
        future: Provider.of<DeedsData>(context).findByKey(_deedID),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return EditTextFieldForm(
              initialValText: snapshot.data.title,
              labelText: "Title",
              maxLines: 3,
              textControllerTextForm: _textCtrlA,
            );
          } else {
            return EditTextFieldForm(
              initialValText: "",
              labelText: "Title",
              maxLines: 3,
              textControllerTextForm: _textCtrlA,
            );
          }
        });

Edit

You can play around with snapshot.connectionState .

        FutureBuilder(
          future: _getID(),
          builder:(context, snapshot) {
               switch(snapshot.connectionState){
                  case ConnectionState.waiting:
                    return CircularProgressIndicator();
                    break;
                   
                   case ConnectionState.active:
                   // your code;
                  
                   case ConnectionState.done:
                  // your code;
                 
                  default:
                  return Text("Error");
               }
          },
        )