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() ), )
![How To Change Flutter Textformfield Border Radius [Detailed Guide] 3 Flutter textformfield default border radius](https://letmeflutter.com/wp-content/uploads/2022/09/IMG_20220923_052959-300x88.jpg)
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))
![How To Change Flutter Textformfield Border Radius [Detailed Guide] 4 Flutter textformfield border radius circular](https://letmeflutter.com/wp-content/uploads/2022/09/IMG_20220923_053034-300x92.jpg)
enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(30) .copyWith(bottomRight: Radius.circular(0)))
![How To Change Flutter Textformfield Border Radius [Detailed Guide] 5 Flutter textformfield border radius circular](https://letmeflutter.com/wp-content/uploads/2022/09/IMG_20220923_053117-300x88.jpg)
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), ))
![How To Change Flutter Textformfield Border Radius [Detailed Guide] 6 Flutter textformfield border radius only](https://letmeflutter.com/wp-content/uploads/2022/09/IMG_20220923_053152-300x88.jpg)
Custom Flutter Textformfield Border Radius Source Code
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.