How can I make rounded TextField in flutter?

Solution 1:

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),
)

Solution 2:

@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,
    ),
),