'how to implement text field borders flutter

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!;
                },
          ),

flutter

Solution 1:^[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:

Solution 2:^[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	tareq albeesh
Solution 2	Jinto Joseph

'how to implement text field borders flutter

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]