In this tutorial, we’ll learn how to easily change Flutter textfield outline border width by using a proper practical Flutter example code.
What is Flutter Textfield Outline Border Width?
Flutter textfield 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 textfield outline border width.
Default Flutter Textfield Outline Border Width
To see the default width of outline border, we have to define a simple Flutter textfield 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 textfield outline border width for both enabled and focused border. See the below code:
TextField( decoration: InputDecoration( enabledBorder: OutlineInputBorder(), focusedBorder: OutlineInputBorder(), ), )
Change Flutter textfield Outline Border Width
In order to change the default Flutter textfield 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 Textfield 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: TextField(
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
To conclude this tutorial, now you’ve a detailed and in-depth practical knowledge of how to customize Flutter textfield outline border width size. 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.
