Search code examples
fluttertextfield

how to display texts in a flutter textfield


I am working on an update functionality but I want the user to see his/her details displayed in the textfields form immediately he/she navigate to the update page. I have been able to send the logged in user's info to the update page but having issues on displaying them on the different textfields. The fields for update are optional so I want the user to change any of the field he/she desired to change while the rest should remain as it was retrieved from the server when the user click on the update button.

Widget buildInputFields(Size size,bool isParish, String input, String textHint,
    bool isObscured, void Function(String value)? func) {
  return Container(
    margin: isParish?EdgeInsets.zero:const EdgeInsets.only(left: 15,right: 15),

    child: Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(
          input,
          style: GoogleFonts.inter(
            fontSize: 14.0,
            color: Colors.black,
            height: 1.0,
          ),
        ),
        const SizedBox(
          height: 8,
        ),
        inputFieldBody(size, textHint, isObscured, func)
      ],
    ),
  );
}

Widget inputFieldBody(Size size, String textHint, bool isObscured,
    void Function(String value)? func) {
  return SizedBox(
    height: size.height / 17,
    child: TextField(
      style: GoogleFonts.inter(
        fontSize: 18.0,
        color: const Color(0xFF151624),
      ),
      maxLines: 1,
      obscureText: isObscured ? true : false,
      cursorColor: const Color(0xFF151624),
      onChanged: (value) => func!(value),
      decoration: InputDecoration(
        hintText: textHint,
        hintStyle: GoogleFonts.inter(
          fontSize: 14.0,
          color: const Color(0xFFABB3BB),
          height: 1.0,
        ),
        border: OutlineInputBorder(
          //borderSide: BorderSide.none,
          borderRadius: BorderRadius.circular(8),
        ),
        focusedBorder: OutlineInputBorder(
          borderSide:  BorderSide(
            color: Colors.blue.shade900.withOpacity(0.8),
            width: 2.0,
          ),
          borderRadius: BorderRadius.circular(8),
        ),
        ),
    ),
  );
}

Solution

  • You can display the passed text as an initial text in text field:

                TextFormField(
                  initialValue: 'It\'s Initial Text', // displayed as initial text
                  onFieldSubmitted: (s){
                    // update that text remotely using api or firebase
                  },
                )