How to make rounded corners TextField in Flutter

Last updated on October 25, 2020 The Plumber Loading... Post a comment

The following examples show you how to make rounded-corners text fields in Flutter.

Examples

Our strategy is to remove the TextField’s border and wrap it inside a Container with circular BorderRadius (this Container itself should be wrapped by another Container with alignment property).

1. Single-line rounded TextField

Container(
        alignment: Alignment.center,
        child: Container(
          width: 300,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
              border: Border.all(
                  width: 1, color: Colors.purple, style: BorderStyle.solid)),
          child: TextField(
            decoration: InputDecoration(
                hintText: 'Type someting here',
                contentPadding: EdgeInsets.all(15),
                border: InputBorder.none),
            onChanged: (value) {},
          ),
        ),
      ),

2. Multi-line rounded TextField

Container(
        alignment: Alignment.center,
        child: Container(
          width: 300,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
              border: Border.all(
                  width: 1, color: Colors.purple, style: BorderStyle.solid)),
          child: TextField(
            minLines: 10,
            maxLines: 20,
            decoration: InputDecoration(
                hintText: 'Type someting here',
                contentPadding: EdgeInsets.all(15),
                border: InputBorder.none),
            onChanged: (value) {},
          ),
        ),
      ),

Output:

That’s it. Happy coding 🙂

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles