how to implement text field borders flutter

Question

I want to insert a border to my text field as image showing. how can I do this. here's my code I have implemented so far with no borders.

TextFormField(
                controller: emailEditingController,
                enabled: typing,
                decoration: const InputDecoration(
                    hintText: "Email",
                    hintStyle: TextStyle(
                        color: textGrey, fontFamily: "Dubai", fontSize: 14),
                ),
                validator: (String? UserName) {
                  if (UserName != null && UserName.isEmpty) {
                    return "Email can't be empty";
                  }
                  return null;
                },
                onChanged: (String? text) {
                  email = text!;
                  // print(email);
                },
                onSaved: (value) {
                  loginUserData['email'] = value!;
                },
          ),

tareq albeesh · Accepted Answer · 2022-03-26 10:34:33Z

1

you can edit the border by adding a border to the decoration of your field:

TextFormField(
        controller: emailEditingController,
        enabled: true,
        decoration: InputDecoration(
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(30.0),
          ),
          hintText: "Email",
          hintStyle:
              TextStyle(color: Colors.grey, fontFamily: "Dubai", fontSize: 14),
        ),
        validator: (String? UserName) {
          if (UserName != null && UserName.isEmpty) {
            return "Email can't be empty";
          }
          return null;
        },
        onChanged: (String? text) {
          email = text!;
          // print(email);
        },
        onSaved: (value) {
          // loginUserData['email'] = value!;
        },
      ),

the output would look like:

answered Mar 26, 2022 at 10:34

tareq albeesh

1,8612 gold badges12 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jinto Joseph · Accepted Answer · 2022-03-26 11:38:35Z

please add Containers padding property and contentPadding property to this code so you can achieve the layout


Container(
                padding:
                    EdgeInsets.only(left: 20, right: 20, top: 20, bottom: 20),
                child: TextFormField(

 contentPadding: EdgeInsets.fromLTRB(20, 5, 10, 5),

this is my full code

 Container(
                padding:
                    EdgeInsets.only(left: 20, right: 20, top: 20, bottom: 20),
                child: TextFormField(
                  controller: emailEditingController,
                  decoration: InputDecoration(
                    alignLabelWithHint: true,
                    floatingLabelBehavior:FloatingLabelBehavior.never,
                    contentPadding: EdgeInsets.fromLTRB(20, 5, 10, 5),
                    labelText: "Email/User name",
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(30.0),
                    ),
                    hintStyle: TextStyle(
                        color: textGrey, fontFamily: "Dubai", fontSize: 14),
                  ),
                  validator: (String? UserName) {
                    if (UserName != null && UserName.isEmpty) {
                      return "Email can't be empty";
                    }
                    return null;
                  },
                  onChanged: (String? text) {
                    // email = text!;
                    // print(email);
                  },
                  onSaved: (value) {
                    // loginUserData['email'] = value!;
                  },
                )),

out put will be

Collectives™ on Stack Overflow

how to implement text field borders flutter

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related