How To Change Flutter Textformfield Border Radius [Detailed Guide]

In this tutorial, we’ll learn how to easily implement Flutter textformfield border radius by using a proper practical Flutter code examples.

Introduction: Flutter Textformfield Border Radius

Flutter textformfield border radius is used to decorate the border of Flutter textformfield. For instance, if you want to make the Flutter textformfield border rounded then you can achieve it through the customization of Flutter textformfield border radius. You can make some or all of the border radius for textformfield Flutter circular or let them remain sharped.

Don’t worry, I will explain Flutter textformfield border radius in Flutter using proper code implementation so you can have a better idea of how Flutter textformfield border radius works.

Default Flutter Textformfield Border Radius

Let’s implement a simple Flutter textformfield with a border so we can see the default Flutter textformfield border radius decoration. See below code:

TextFormField(
            decoration:InputDecoration(
              enabledBorder: OutlineInputBorder()
                                      ),
          )

Flutter textformfield default border radius

I have used the enabled border constructor of the input decoration class which shows the border when the Flutter textformfield is not focused. Then passing the outline input border class to the enabled border constructor.

By implementing the above code, we now have a Flutter textformfield with an outline border.

In the above image, we can see that the default Flutter textformfield border radius has some minor value, more value means more circular edges of the Flutter textformfield. We can see that the border edges of Flutter textformfield are a bit circular.

Change Flutter Textformfield Border Radius

Let’s now change the Flutter textformfield border radius. For that, we’ll be using different methods to customize the radius of Flutter textformfield border.

Circular Flutter Textformfield Border Radius(All Edges Same Value)

If you want to make each and every edge of Flutter textformfield circular and all of the same value, then use the below code:

 enabledBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(20))

Flutter textformfield border radius circular

As you can see in the above code, we’ve used the border radius constructor of the outline input border class and by passing a double value to the borderRadius.circular, we’ve made all the edges of Flutter textformfield circular with a single value.

If you want some edges to have a different radius value then you can use the copyWith method. See below code.

  enabledBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(30)
                            .copyWith(bottomRight: Radius.circular(0)))

By using the copyWith method, we can customize one or more specific edges.

For demonstration, I have used the bottom right edge and have made its circular value 0. You can see in the above image that all the edges of Flutter textformfield are circular except the bottom right one.

Circular Flutter Textformfield Border Radius(All Edges Different Value)

If you want to provide each edge of Flutter textformfield 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),

                ))

Flutter textformfield border radius only

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 textformfield.

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

Congrats for making it to the last, now you have a complete understanding of how to change the Flutter textformfield 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 textformfield is focused.

The complete source code of custom Flutter textformfield border radius is given in the next section.

Custom Flutter Textformfield Border Radius Source Code

Flutter textformfield border radius

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: TextFormField(
                decoration: InputDecoration(
                    enabledBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(0),
                          topRight: Radius.circular(40),
                          bottomLeft: Radius.circular(40),
                          bottomRight: Radius.circular(0),
                        ),
                        borderSide: BorderSide(color: Colors.blue))),
              ))),
    ));
  }
}

Conclusion

To conclude this tutorial, now you’ve a detailed and in-depth practical knowledge of how to customize Flutter textformfield border radius. I’ll be delighted to receive your feedback on this post.

I’d love to see you visit my other tutorials on Flutter app development and Python programming as well. Thank you for reading this post.