Search code examples
flutterdart-null-safety

Empty value in TextFormField


This is an AlertDialog, when the person types the name, the name cannot be null or empty.

import 'package:flutter/material.dart';

abstract class ComponentDialog {
  static final TextEditingController _controller = TextEditingController();

  static Future<dynamic> BuidDialog(
      BuildContext context,
      String titleLabel,
      String inputLabel,
      String cancelLabel,
      String confirmLabel,
      ) =>

      showDialog(
        context: context,
        builder: (BuildContext context) => AlertDialog(
          title: Text(titleLabel),
          content: TextFormField(
            controller: _controller,
            decoration: InputDecoration(
              labelText: inputLabel,
              border: const OutlineInputBorder(
                borderSide: BorderSide(
                  color: Colors.pinkAccent, // TODO: charge color
                ),
              ),
            ),
          ),
          actions: <Widget>[
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: Text(cancelLabel),
            ),
            TextButton(
              onPressed: () {
                if (stringTitleLabel.IsNullOrWhiteSpace(objeto)) {

                  return;
                }
                Navigator.pop(context, _controller.text);
              },
              child: Text(confirmLabel),
            ),
          ],
        ),
      );
}

Solution

  • We can use StatefulBuilder to update UI on showDialog and errorText to show error message on TextFormFiled and onTap will reset the error message.

    abstract class ComponentDialog {
      static final TextEditingController _controller = TextEditingController();
      String? errorText;
      static Future<dynamic> BuidDialog(
        BuildContext context,
        String titleLabel,
        String inputLabel,
        String cancelLabel,
        String confirmLabel,
      ) async {
        String? errorText;
        return await showDialog(
          context: context,
          builder: (BuildContext context) => StatefulBuilder(
            builder: (context, setStateSB) {
              return AlertDialog(
                title: Text(titleLabel),
                content: TextFormField(
                  controller: _controller,
                  onTap: () {
                    setStateSB(() {
                      errorText = null;
                    });
                  },
                  decoration: InputDecoration(
                    errorText: errorText,
                    labelText: inputLabel,
                    border: const OutlineInputBorder(
                      borderSide: BorderSide(
                        color: Colors.pinkAccent,
                      ),
                    ),
                  ),
                ),
                actions: <Widget>[
                  TextButton(
                    onPressed: () {
                      if (_controller.text.isEmpty) {
                        setStateSB(() {
                          errorText = "Enter Name";
                        });
    
                        return;
                      }
                      // Navigator.pop(context, _controller.text);
                    },
                    child: Text(confirmLabel),
                  ),
                ],
              );
            },
          ),
        );
      }
    }