Flutter Textfield Border Radius Explained With Example-Best Flutter Guide

Circular Flutter Textfield Border Radius(All Edges Different Value)

If you want to provide each edge of Flutter textfield with different value, then use the below code:

 enabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(0),
                  topRight: Radius.circular(40),
                  bottomLeft: Radius.circular(40),
                  bottomRight: Radius.circular(0),

                ))

As you can see in the above code, we’ve used the borderRadius.only and by using its constructors, we can give different value to each and every edge of the Flutter textfield.

In the above image, we can see a Flutter textfield of different edge radius.

Congrats for making it to the last, now you have a complete understanding of how to change the Flutter textfield border radius. You have to use the same process for the focused border constructor as well if you want a customized radius decoration when the Flutter textfield is focused.

As a treat, I have made a beautiful Flutter textfield for you. I would love to see you implement it in you Flutter app. The complete source code is given in the next section.

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      body: Center(
          child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 40),
              child: TextField(
                style: TextStyle(color: Colors.blue),
                decoration: InputDecoration(
                    prefixIcon: Icon(
                      Icons.person,
                      color: Colors.blue,
                    ),
                    labelText: 'Enter email...',
                    labelStyle: TextStyle(color: Colors.blue.withOpacity(.8)),
                    enabledBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.blue),
                        borderRadius: BorderRadius.circular(30)
                            .copyWith(bottomRight: Radius.circular(0))),
                    focusedBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.blue),
                        borderRadius: BorderRadius.circular(30)
                            .copyWith(bottomRight: Radius.circular(0)))),
              ))),
    ));
  }
}