CODEWITHSUNDEEP
flutter
Tushar Pol
Tushar Pol

Reputation: 7619

How can I make rounded TextField in flutter?

Material Design for iOS doesn't look good, especially the TextField. So is there any way to create your own ? Or Is ther any way to add some styling to TextField so it will look rounded ?

Upvotes: 147

Views: 224433

Answers (8)

Serge AHOUANSINOU
Serge AHOUANSINOU

Reputation: 131

decoration: InputDecoration(
        prefixIconColor: Constants.appPrimaryColor,
        contentPadding: const EdgeInsets.all(8),
        hintText: hintText,
        fillColor: fillColor,
        prefixIcon: prefixIcon != null
            ? Icon(
                prefixIcon,
                size: 20,
              )
            : null,
        suffixIcon: suffixIcon != null
            ? IconButton(
                onPressed: suffixIconTap,
                icon: Icon(
                  suffixIcon,
                  color: Constants.appPrimaryColor,
                  size: 20,
                ))
            : null,
        focusedBorder: OutlineInputBorder(
          borderSide: const BorderSide(color: Colors.transparent),
          borderRadius: BorderRadius.circular(25.7),
        ),
        enabledBorder: UnderlineInputBorder(
          borderSide: const BorderSide(color: Colors.transparent),
          borderRadius: BorderRadius.circular(20.0),
        ),
      ),

Upvotes: 1

Rockvole
Rockvole

Reputation: 4860

You can add rounded corners to a TextField within the decoration parameter of it

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(10.0),
    ),
    filled: true,
    hintStyle: TextStyle(color: Colors.grey[800]),
    hintText: "Type in your text",
    fillColor: Colors.white70,
  ),
)

Upvotes: 301

RS Bind
RS Bind

Reputation: 31

Try this in TextFormField:

border: OutlineInputBorder(
     borderRadius: BorderRadius.all(
         Radius.circular(20.0),
     ),
),

Upvotes: 2

MD MEHEDI HASAN
MD MEHEDI HASAN

Reputation: 2470

You can try this code bellow:

      decoration:  InputDecoration(
         border: OutlineInputBorder(
             borderRadius: const BorderRadius.all(
                const Radius.circular(10.0), 
             ),
             borderSide: BorderSide(
              width: 0, 
              style: BorderStyle.none,
              ),
             ),
           )

Upvotes: 16

Javad Moradi
Javad Moradi

Reputation: 994

You could approach the purpose in a few different ways:

First Approach:

Container(
      child: new Text (
          "Some Text",
          style: TextStyle(
              color: Colors.black
          )
      ),
      decoration: BoxDecoration (
          borderRadius: BorderRadius.all( Radius.circular(15)),
          color: Colors.white
      ),
      padding: EdgeInsets.all(16.0),
    ),

Second Approach:

 TextField(
      decoration: InputDecoration(
          border: OutlineInputBorder(
            borderRadius: const BorderRadius.all(
              Radius.circular(15.0),
            ),
          ),
          filled: true,
          hintStyle: new TextStyle(color: Colors.grey[600]),
          hintText: "Hint text",
          fillColor: Colors.white),
    )

Third Approach:

TextField(
    textAlign: TextAlign.center,
    controller: someTextXontroller,
    keyboardType: TextInputType.text,
    decoration: InputDecoration(
        hintText: 'Hint Text',
        border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(12),
            borderSide: BorderSide(
                width: 0, 
                style: BorderStyle.none,
            ),
        ),
        filled: true,
        contentPadding: EdgeInsets.all(16),
        fillColor: Colors.blue,
    ),
),

Upvotes: 6

Mohammed H. Hannoush
Mohammed H. Hannoush

Reputation: 581

I've collected this solution from several methods and solutions over the internet, it works very well with me, so it could help someone out there: This solution will control the width and height of the TextField, and other properties

Container(
    child: Theme(
      data: Theme.of(context).copyWith(splashColor: Colors.transparent),
      child: TextField(
        autofocus: false,
        style: TextStyle(fontSize: 15.0, color: Color(0xFFbdc6cf)),
        decoration: InputDecoration(
          filled: true,
          fillColor: Colors.white,
          hintText: 'Search',
          contentPadding:
          const EdgeInsets.only(left: 14.0, bottom: 12.0, top: 0.0),


          focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.white),
            borderRadius: BorderRadius.circular(25.7),
          ),

          enabledBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: Colors.white),
            borderRadius: BorderRadius.circular(25.7),
          ),
        ),
      ),
    ),

    decoration: new BoxDecoration (
      borderRadius: new BorderRadius.all(new Radius.circular(30.0)),
      color: Colors.white   ),   width: 250,   height: 50,   margin: new EdgeInsets.fromLTRB(20, 20, 20, 210),   padding: new EdgeInsets.fromLTRB(8, 8, 8, 8),

),

Upvotes: 8

Aryeetey Solomon Aryeetey
Aryeetey Solomon Aryeetey

Reputation: 5826

@Rockvole answer is correct but just in case u don't like the default border around the TextField, you can achieve it by overriding the borderSide attribute of the OutlineInputBorder like this:

TextField(
    textAlign: TextAlign.center,
    controller: searchCtrl,
    keyboardType: TextInputType.text,
    decoration: InputDecoration(
        hintText: 'Enter a product name eg. pension',
        hintStyle: TextStyle(fontSize: 16),
        border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(8),
            borderSide: BorderSide(
                width: 0, 
                style: BorderStyle.none,
            ),
        ),
        filled: true,
        contentPadding: EdgeInsets.all(16),
        fillColor: colorSearchBg,
    ),
),

Upvotes: 121

DwlRathod
DwlRathod

Reputation: 780

You can get desired output with the help of Container Have a look..

new Container(
  child: new Text (
      "Text with rounded edges.",
      style: new TextStyle(
          color: Colors.blue[500],
          fontWeight: FontWeight.w900
      )
  ),
  decoration: new BoxDecoration (
      borderRadius: new BorderRadius.all(new Radius.circular(10.0)),
      color: Colors.black
  ),
  padding: new EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 16.0),
),

Upvotes: 31

Related Questions