Error Inputdecorator Text Field In Flutter Android App

admin_img Posted By Bajarangi soft , Posted On 06-10-2020

I have two text inputs in the same row (refer to images), when the errortext property of the inputdecorator is shown it causes the text field to get padding somehow and pop out of place, even the label moves its position. I have read a few posts on this issue and have tried their recommendations of giving the container a fixed size, putting it into a sizedBox etc but none of the solutions worked can someone give me a suggestion.

Error Inputdecorator Text Field In Flutter Android App

Create a Error InputDecorator Textfield 

Step 1: Error InputDecorator Textfield Short Code Example

Container(
  width: MediaQuery.of(context).size.width,
  margin: EdgeInsets.fromLTRB(15, 0, 15, 0),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Expanded(
        child: FormField(
          builder: (FormFieldState state) {
            return TextFormField(
              autovalidate: true,
              keyboardType: TextInputType.number,
              validator: (String value) {
                if (value.isEmpty) {
                  return 'Invalid Number';
                }
                return null;
              },
              decoration: InputDecoration(
                errorStyle: TextStyle(
                  color: Colors.redAccent,
                  fontSize: 16.0,
                ),
                labelText: "Number :",
                labelStyle: TextStyle(
                  color: Colors.black,
                  fontWeight: FontWeight.bold,
                  fontSize: 12,
                ),
                fillColor: Colors.white,
                filled: true,
                contentPadding: EdgeInsets.all(15),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(5),
                  borderSide: BorderSide(
                    color: Colors.grey,
                    style: BorderStyle.solid,
                    width: 1,
                  ),
                ),
              ),
            );
          },
        ),
      ),
      SizedBox(
        width: 12,
      ),
      Expanded(
        child: FormField(
          builder: (FormFieldState state) {
            return TextFormField(
              autovalidate: true,
              keyboardType: TextInputType.visiblePassword,
              validator: (String value) {
                if (value.isEmpty) {
                  return 'Invalid Password';
                }
                return null;
              },
              decoration: InputDecoration(
                errorStyle: TextStyle(
                  color: Colors.redAccent,
                  fontSize: 16.0,
                ),
                labelText: "Password :",
                labelStyle: TextStyle(
                  color: Colors.black,
                  fontWeight: FontWeight.bold,
                  fontSize: 12,
                ),
                fillColor: Colors.white,
                filled: true,
                contentPadding: EdgeInsets.all(15),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(5),
                  borderSide: BorderSide(
                    color: Colors.grey,
                    style: BorderStyle.solid,
                    width: 1,
                  ),
                ),
              ),
            );
          },
        ),
      ),
    ],
  ),
)

Complete Code For Error InputDecorator Textfield In Flutter
Main.dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
          appBar: AppBar(
            centerTitle: true,
            backgroundColor: Colors.red,
            title: Text("Error InputDecorator TextField"),
          ),
          body: ErrorTextField()
      ),
    );
  }
}

class ErrorTextField extends StatefulWidget {
  @override
  ErrorTextFieldWidget createState() => ErrorTextFieldWidget();
}

class ErrorTextFieldWidget extends State {
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top:20.0),
      child: Column(
        children: <Widget>[
            Container(
              width: MediaQuery.of(context).size.width,
              margin: EdgeInsets.fromLTRB(15, 0, 15, 0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Expanded(
                    child: FormField(
                      builder: (FormFieldState state) {
                        return TextFormField(
                          autovalidate: true,
                          keyboardType: TextInputType.number,
                          validator: (String value) {
                            if (value.isEmpty) {
                              return 'Invalid Number';
                            }
                            return null;
                          },
                          decoration: InputDecoration(
                            errorStyle: TextStyle(
                              color: Colors.redAccent,
                              fontSize: 16.0,
                            ),
                            labelText: "Number :",
                            labelStyle: TextStyle(
                              color: Colors.black,
                              fontWeight: FontWeight.bold,
                              fontSize: 12,
                            ),
                            fillColor: Colors.white,
                            filled: true,
                            contentPadding: EdgeInsets.all(15),
                            border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(5),
                              borderSide: BorderSide(
                                color: Colors.grey,
                                style: BorderStyle.solid,
                                width: 1,
                              ),
                            ),
                          ),
                        );
                      },
                    ),
                  ),
                  SizedBox(
                    width: 12,
                  ),
                  Expanded(
                    child: FormField(
                      builder: (FormFieldState state) {
                        return TextFormField(
                          autovalidate: true,
                          keyboardType: TextInputType.visiblePassword,
                          validator: (String value) {
                            if (value.isEmpty) {
                              return 'Invalid Password';
                            }
                            return null;
                          },
                          decoration: InputDecoration(
                            errorStyle: TextStyle(
                              color: Colors.redAccent,
                              fontSize: 16.0,
                            ),
                            labelText: "Password :",
                            labelStyle: TextStyle(
                              color: Colors.black,
                              fontWeight: FontWeight.bold,
                              fontSize: 12,
                            ),
                            fillColor: Colors.white,
                            filled: true,
                            contentPadding: EdgeInsets.all(15),
                            border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(5),
                              borderSide: BorderSide(
                                color: Colors.grey,
                                style: BorderStyle.solid,
                                width: 1,
                              ),
                            ),
                          ),
                        );
                      },
                    ),
                  ),
                ],
              ),
            )
        ]
      ),
    );
  }
}

 

Related Post