How to make Tinder like Bio editor - Flutter

Question

I want a Tinder-like Bio editor, When the user taps on the info, the text field should appear and retrieve the data from the firebase, and display the old bio, if the user taps on the done button on the keyboard or press anywhere on the screen, the data should be submitted. Thanking you in advance

Update: Here is the code I tried, Is there any way I can remove the upper stack and show the text field when the about container is tapped and after the submission the stack to come back and display the about field, and also I want to retrieve the old text from firebase in the text field(when the user is updating).

Widget about(BuildContext context, dynamic snapshot) {
return Padding(
  padding: const EdgeInsets.symmetric(horizontal: 8.0),
  child: Container(
        height: MediaQuery
            .of(context)
            .size
            .height * 0.2,
        width: MediaQuery
            .of(context)
            .size
            .width,
        decoration: BoxDecoration(
          color: constantColors.white,
          borderRadius: BorderRadius.circular(15),
        ),
        child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
          Row(
            children: [
              Padding(
                padding: const EdgeInsets.only(
                  top: 8.0,
                  left: 10,
                ),
                child: Text(
                  "About",
                  style: TextStyle(fontSize: 24),
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 13, left: 6),
                child: Icon(
                  FontAwesome.pencil,
                  size: 13,
                ),
              )
            ],
          ),
          Stack(
            children: [

              Container(
                height: MediaQuery
                    .of(context)
                    .size
                    .height * 0.1,
                width: MediaQuery
                    .of(context)
                    .size
                    .width,
                child: TextField(
                  onTap: (){
                    Provider.of<PostFunctions>(context, listen: false).about(context, Provider.of<Authentication>(context, listen: false).getUserUid, {
                      'about': aboutController.text,
                    });
                  },
                  controller: aboutController,
                  maxLines: 8,
                  cursorColor: constantColors.green,
                  decoration: InputDecoration(
                      contentPadding: EdgeInsets.all(15),
                      hintText: 'A little about you',
                      isDense: true,
                      enabledBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(20),
                          borderSide: BorderSide.none),
                      focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(20),
                          borderSide: BorderSide.none),
                      fillColor: constantColors.white,
                      filled: true,),
                ),
              ),
              Container(
                height: MediaQuery
                    .of(context)
                    .size
                    .height * 0.1,
                width: MediaQuery
                    .of(context)
                    .size
                    .width,
                color: constantColors.white,
                child: Text(snapshot.data.data()['about']),),
            ],
          ),
        ]),
      ),



);

}

here is the future method of uploading and updating

Future about(BuildContext context, String userID, dynamic data)async{
return FirebaseFirestore.instance.collection('users').doc(userID).update(data);

}

Answer 1

The better approach will be to retrieve the user data ahead of time. Then you can populate the text field using its conntroller with the data if the data exists.