Flutter Rounded Border TextField

To set rounded corner border on TextField we will use borderRadius property of enabledBorder. This will make the border corner rounded. We will use borderRadius property on focusedBorder. So when user focus on TextField it will still show rounded corner border on focus event.

Flutter Rounded Border TextField

1. Creating TextField and defining borderRadius.

TextField(
	  autocorrect: true,
	  decoration: InputDecoration(
		hintText: 'Enter Name....',
		hintStyle: TextStyle(color: Colors.blue),
		filled: true,
		fillColor: Colors.white,
		enabledBorder: OutlineInputBorder(
		  borderRadius: BorderRadius.all(Radius.circular(8.0)),
		  borderSide:
			  BorderSide(color: Colors.deepOrange, width: 1.5),
		),
		focusedBorder: OutlineInputBorder(
		  borderRadius: BorderRadius.all(Radius.circular(8.0)),
		  borderSide:
			  BorderSide(color: Colors.green, width: 1.5),
		),
	  ),
	)

Screenshots:

Source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
        home: Scaffold(
            body: Center(
                child: SizedBox(
                    width: 280,
                    child: TextField(
                      autocorrect: true,
                      decoration: InputDecoration(
                        hintText: 'Enter Name....',
                        hintStyle: TextStyle(color: Colors.blue),
                        filled: true,
                        fillColor: Colors.white,
                        enabledBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.all(Radius.circular(8.0)),
                          borderSide:
                              BorderSide(color: Colors.deepOrange, width: 1.5),
                        ),
                        focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.all(Radius.circular(8.0)),
                          borderSide:
                              BorderSide(color: Colors.green, width: 1.5),
                        ),
                      ),
                    )))));
  }
}