how to return a form widget in futureBuild in flutter

Question

I have this code as am trying to code something to update data in firestore.

  @override
  Widget build(BuildContext context) {
    // Use the Todo to create the UI.
    return Scaffold(
      appBar: AppBar(
        title: Text(mid.toString()),
      ),
      body: FutureBuilder<Member?>(
        future: readMember(mid),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            final member = snapshot.data;


          /// return a form



          } else {
            return const Center(child: CircularProgressIndicator());
          }
        },
      ),
    );
  }

if snapshot hasData I want to return a form like this

Card(
          child: Row(
        children: <Widget>[
          TextField(
            controller: controllerName,
            decoration: decoration('name'),
          ),
          const SizedBox(height: 24),
          TextField(
            controller: controllerAge,
            decoration: decoration('Age'),
            keyboardType: TextInputType.number,
          ),
          const SizedBox(height: 24),
          ElevatedButton(
            child: const Text('Create'),
            onPressed: () {},
          ),
        ],
      ));

All my attempt yield no success please I need help.

Answer 1

Check others state like error or if the data is null or not

builder: (context, snapshot) {
  if (snapshot.hasError) {
    return Text("Got Error");
  }
  if (snapshot.data == null) {
    return Text("No data");
  }
  if (snapshot.hasData) {
    final member = snapshot.data;
    return Card( ///here form
        child: Row(
      children: <Widget>[],
    ));
  } else {
    return const Center(child: CircularProgressIndicator());
  }
},

And provide width on TextFiled to fix overflow, TextFiled and row are trying to get infinite with. just wrap with Expanded

Expanded(child: TextField(...)),

You can find more about unbound height& width