flutterdartflutter-layouttextfieldflutter-dialog

error message nt going even if my textfield is not empty


Before I reach to my alert demo.. I am stuck in the beginning..

In my alert dialog there is a textField in content,

I have set an error text if textfield is empty but even after typing this error text not disappearing..it remains there....what is my fault... here is my code

import 'package:flutter/material.dart';
class HomeScreen extends StatefulWidget {
  @override
  State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
  String name='';
  TextEditingController? txtname;
  get _errortext {
    final str=txtname!.value.text;
    if(str.isEmpty)
      return 'Cant be emtpy';
    else
       return null;
  }
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    txtname=TextEditingController();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Demo Page'),),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('My Name is '+name),
           SizedBox(height: 20.0,),
           ElevatedButton(onPressed: (){
             openDialog();
           }, child: Text("Get Name")),
          ],),),);}

  void openDialog() {showDialog(
        context: context,
        builder: (context)=>AlertDialog(
          title: Text('Enter Your name here'),
          content: TextField(
            controller: txtname,
            onChanged: (value){
              setState(() {});},
            decoration: InputDecoration(
              hintText: 'Enter Name',
              errorText: _errortext,
            ),),

          actions: [
            TextButton(onPressed: (){

            }, child: Text('Submit')),
          ],
        ));
  }}


Solution

  • To update inside dialog, you need to use StatefulBuilder and use its setState.

     void openDialog() {
        showDialog(
            context: context,
            builder: (context) => StatefulBuilder(
                  builder: (context, setState) => AlertDialog(
                    title: Text('Enter Your name here'),
                    content: TextField(
                      controller: txtname,
                      onTap: () {
                        setState(() {});
                      },
                      onChanged: (value) {
                        setState(() {});
                      },
                      decoration: InputDecoration(
                        hintText: 'Enter Name',
                        errorText: _errortext,
                      ),
                    ),
                    actions: [
                      TextButton(
                        onPressed: () {},
                        child: const Text('Submit'),
                      ),
                    ],
                  ),
                ));
      }
    

    You can also separate the content StatefulWidget which is not needed in cases like this.