Overlay box when validation occur at the end of textform field in flutter

Question

I want to show a validation message in a overlay box at the nearest of textformfield . Can you help me? I want like this.

Answer 1

Try below code using Tooltip Widget hope its help to you refer Tooltip Widget here

 TextFormField(
            textCapitalization: TextCapitalization.sentences,
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              labelText: 'Name',
              hintText: 'Card Holder Name',
              suffixIcon: Tooltip(
                message: 'Required',
               
                child: Icon(
                  Icons.info,
                ),
              ),
            ),
          ),

Result of your screen

Answer 2

Result you can use errorStyle to modify

Code snippet

 Padding(
              padding: const EdgeInsets.all(8.0),
              child: TextField(
                controller: controller,
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  errorText: _isError? " required" : null,
                ),
              ),
            ),