Flutter TextFormField. How to stick validation text inside TextFormField

Question

How to stick validation text inside TextFormField. By default it goes below

the text field

I want like this

But it shows like this

I have looked in various sources, but did not find a suitable answer

is there any way to show the validation text inside the textbox

Prabhanshu Tiwari · Answer 1 · 2021-06-06T20:11:41.420

1

You can update text from TextEditingController if validation fails for a certain text field and also can remove text from controller in "onTap" property.

TextEditingController _passwordController = TextEditingController();
if(condition)
{
 //success call
}
else
{
setState((){
  _passwordController.text="Password Does not match
 });
}

edited Jun 06 '21 at 20:11

answered Jun 06 '21 at 20:01

Prabhanshu Tiwari

39
2

Thanks for the answer. then the text in the field will simply change, you need how the validation would work, but that the validation text would be inside the text field – S.A.R Jun 06 '21 at 20:21
You can simply remove the text by using 'onTap' property. `setState((){ _passwordController.clear(); });` – Prabhanshu Tiwari Jun 06 '21 at 20:34

score 0 · Answer 2 · answered Jun 06 '21 at 20:13

you should validate your form in the Following way

class MyForm extends StatefulWidget {
  @override
  MyFormState createState() {
    return MyFormState();
  }
}

// Create a corresponding State class.
// This class holds data related to the form.
class MyFormState extends State<MyForm> {
  // Create a global key that uniquely identifies the Form widget
  // and allows validation of the form.
  //
  // Note: This is a GlobalKey<FormState>,
  // not a GlobalKey<MyFormState>.
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    // Build a Form widget using the _formKey created above.
    return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          TextFormField(
            // The validator receives the text that the user has entered.
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please enter some text';
              }
              return null;
            },
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: ElevatedButton(
              onPressed: () {
                // Validate returns true if the form is valid, or false otherwise.
                if (_formKey.currentState!.validate()) {
                  // If the form is valid, display a snackbar. In the real world,
                  // you'd often call a server or save the information in a database.
                  // sendData();
                  ScaffoldMessenger.of(context)
                      .showSnackBar(SnackBar(content: Text('Processing Data')));
                }
              },
              child: Text('Submit'),
            ),
          ),
        ],
      ),
    );
  }
}

Thanks for the answer. it just shows a snackbar, you need how the validation works, but for the validation text to be inside the text field — S.A.R, Jun 06 '21 at 20:23

Flutter TextFormField. How to stick validation text inside TextFormField

2 Answers2