Update value TextField using TextEditingController - Flutter

Fash
January 18, 2023
208 views
0 votes
2 Answers

I want to update value in TextField but it become like this

And this my issue code

Widget build(BuildContext context) {
        final certificatesData = Provider.of < Certificates > (context);
        final cerData = certificatesData.certData;

        if (cerData != null) {
            print("test in");
            inspectionTypeDis = cerData['inspectionType'];
            _clientDataL = clientDis;
            if (_clientDataL != null) {
                getClientEmailL(_clientDataL);
            }


        }
        if (emailClientDataL != null) {
            _emailClientDataL = clientEmailDis;
        }

        return Form(
                key: _formKey,
                child: AlertDialog(
                    title: Container(
                        color: Color.fromARGB(255, 75, 185, 159),
                        child: Text('Edit',
                            textAlign: TextAlign.center, style: TextStyle(color: Color.fromARGB(255, 250, 251, 250))),
                        padding: const EdgeInsets.all(17),
                            margin: const EdgeInsets.all(0),
                    ),

                    content: SingleChildScrollView(
                        child: Column(
                            mainAxisSize: MainAxisSize.min,
                            children: < Widget > [
                                SizedBox(
                                    width: 630,
                                    height: 100,
                                    child: ListView(
                                        shrinkWrap: true,
                                        scrollDirection: Axis.horizontal,
                                        children: < Widget > [
                                            Container(
                                                width: 310,
                                                height: 20,
                                                // color: Colors.purple[600],
                                                child: ListTile(
                                                    title: Text('Inspection Type'),
                                                    subtitle: TextField(
                                                        controller: TextEditingController(text: inspectionTypeDis),
                                                        onChanged: (text) {
                                                            inspectionTypeDis = text;
                                                        },
                                                        decoration: const InputDecoration(
                                                            border: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(4))),
                                                        ),
                                                    ),
                                                ),
                                            ),

                                        ),
                                    ]),
                            ],
                        ));

                }

Detail Code

class EditCertificateInspection extends StatefulWidget with InputValidationMixin {
    EditCertificateInspection({
        Key key
    }): super(key: key);
    @override
    _EditCertificateInspection createState() => _EditCertificateInspection();
}

class InputValidationMixin {}

class _EditCertificateInspection extends State < EditCertificateInspection > {
        final navigatorKey = GlobalKey < NavigatorState > ();
        final _formKey = GlobalKey < FormState > ();



        Widget build(BuildContext context) {

            final certificatesData = Provider.of < Certificates > (context);
            final cerData = certificatesData.certData;

            if (cerData != null) {
                print("test in");
                inspectionTypeDis = cerData['inspectionType'];
                _clientDataL = clientDis;
                if (_clientDataL != null) {
                    getClientEmailL(_clientDataL);
                }


            }
            if (emailClientDataL != null) {
                _emailClientDataL = clientEmailDis;
            }

            return Form(
                key: _formKey,
                child: AlertDialog(
                    title: Container(
                        color: Color.fromARGB(255, 75, 185, 159),
                        child: Text('Edit',
                            textAlign: TextAlign.center, style: TextStyle(color: Color.fromARGB(255, 250, 251, 250))),
                        padding: const EdgeInsets.all(17),
                            margin: const EdgeInsets.all(0),
                    ),

                    content: SingleChildScrollView(
                        child: Column(
                            mainAxisSize: MainAxisSize.min,
                            children: < Widget > [
                                SizedBox(
                                    width: 630,
                                    height: 100,
                                    child: ListView(
                                        shrinkWrap: true,
                                        scrollDirection: Axis.horizontal,
                                        children: < Widget > [
                                            Container(
                                                width: 310,
                                                height: 20,
                                                child: ListTile(
                                                    title: Text('Inspection Type'),
                                                    subtitle: TextField(
                                                        controller: TextEditingController(text: inspectionTypeDis),
                                                        onChanged: (text) {
                                                            inspectionTypeDis = text;
                                                        },
                                                        decoration: const InputDecoration(
                                                            border: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(4))),
                                                        ),
                                                    ),
                                                ),
                                            ),

                                        ),
                                    ]),
                            ],
                        ));

                },
            }

Tags: dart flutter

Answers

I will suggest creating a state variable for TextEditingController for statefulwidget and to set the text. use

TextEditingController.fromValue(TextEditingValue(text: inspectionTypeDis));

Widget structure can be

final TextEditingController controller = TextEditingController();
@override
Widget build(BuildContext context) {
  return Consumer<Certificates>(builder: (context, value, child) {
    final cerData = value....;
    if (cerData != null) {

    //  your logic
      controller.text =  "";
    }
    return TextFormField(
      controller: controller,
    );
  });
}

What you could to is to change your TextField for a TextFormField with an initialValue.

TextFormField(
        initialValue: cerData['inspectionType'],
        onChanged: (text) {
          inspectionTypeDis = text;
        },
        decoration: const InputDecoration(
          border: OutlineInputBorder(
              borderRadius: BorderRadius.all(Radius.circular(4))),
        ),

EDIT

Here is a fully example using a StatefulWidget using the snippet I provide above.

class Test extends StatefulWidget {
  const Test({Key? key}) : super(key: key);

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

class _TestState extends State<Test> {
  String _inspectionTypeDis = 'initialValue';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          TextFormField(
            initialValue: _inspectionTypeDis,
            onChanged: (text) {
              _inspectionTypeDis = text;
            },
            decoration: const InputDecoration(
              border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(4))),
            ),
          ),
          TextButton(
              child: const Text('Print value'),
              onPressed: () => print(_inspectionTypeDis)),
        ],
      ),
    );
  }
}

Please signup or login to give your own answer.

Click here to cancel reply.

Update value TextField using TextEditingController – Flutter

Answers