Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I make rounded TextField in flutter?

Tags:

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 ?

like image 749
Tushar Pol Avatar asked Mar 13 '18 13:03

Tushar Pol


People also ask

How do I change the TextField style in Flutter?

Step 1: Locate the file where you have placed the TextField widget. Step 2: Inside the TextField widget, add the style parameter and assign the TextField widget. Step 3: Inside the TextField widget, add the color parameter and set the color of your choice.

How do you make a JTextField round?

By default, a JTextfield has a rectangle shape, we can also implement a round-shaped JTextField by using the RoundRectangle2D class and need to override the paintComponent() method.

How do you round dialog in Flutter?

To display rounded corners for AlertDialog in Flutter, specify the shape property of AlertDialog with RoundedRectangleBorder object with border radius specified. An AlertDialog with rounded corners having a border radius of 30 is shown in the following screenshot.


4 Answers

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),
)
like image 51
Rockvole Avatar answered Oct 09 '22 23:10

Rockvole


@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,
    ),
),
like image 28
Aryeetey Solomon Aryeetey Avatar answered Oct 09 '22 21:10

Aryeetey Solomon Aryeetey


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,
              ),
             ),
           )
like image 8
MD MEHEDI HASAN Avatar answered Oct 09 '22 22:10

MD MEHEDI HASAN


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),
),
like image 30
DwlRathod Avatar answered Oct 09 '22 22:10

DwlRathod