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')),
          ],
        ));
  }}

CodePudding user response：

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.