Flutter textformfield outline border width customization. In this post, I will be changing the Flutter textformfield outline border width with an easy Flutter example code. I will be using a step by step explanation of how to change the Flutter textformfield outline border width. I will be explaining what the border width is and what its role and usage is in Flutter textformfield.
What is Flutter Textformfield Outline Border Width?
Flutter textformfield outline border width is the thickness of the outline border. Let’s implement it using Flutter example for better understanding of what border width is and how customize Flutter textformfield outline border width.
Default Flutter Textformfield Outline Border Width
To see the default width of outline border, we have to define a simple Flutter textformfield widget, then using its decoration constructor and passing input decoration class to it. Using the enabled border and focused border constructor of the input decorations class and passing it outline input border class will let us see the default Flutter textformfield outline border width for both enabled and focused border. See the below code:
TextFormField( decoration: InputDecoration( enabledBorder: OutlineInputBorder(), focusedBorder: OutlineInputBorder(), ), )
Change Flutter textformfield Outline Border Width
In order to change the default Flutter textformfield outline border width, we have to use the border side constructor of the outline input border class and pass it border side class. Using the width constructor, we can change the width of outline border, it takes a double value. See the below code:
OutlineInputBorder( borderSide: BorderSide(width: 3))
Custom Flutter Textformfield Design 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 StatefulWidget {
@override
State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 40),
child: TextFormField(
style: TextStyle(color: Colors.blue),
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(50)
.copyWith(bottomRight: Radius.circular(0)),
borderSide: BorderSide(color: Colors.blue, width: 4)),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(50)
.copyWith(bottomRight: Radius.circular(0)),
borderSide: BorderSide(color: Colors.blue, width: 3)),
),
))),
));
}
}Conclusion
In conclusion, we have practically discussed how to change Flutter textformfield outline border width with Flutter example code. I would love to have your feedback and would love to hear about what you’ve learned and think about my other articles on Flutter app development, Flutter widgets, amazing Flutter templates, Flutter animations, and more. Thanks for reading this article.
