In this tutorial, we’ll learn how to properly customize Flutter textformfield enabled underline border thickness by using practical Flutter code examples.
Introduction: Flutter Textformfield Enabled Underline Border Thickness
It specifies the height/thickness of Flutter textformfield enabled underline border. We can see the enabled border when textformfield is not focused/tapped. We’ll first see the default underline enabled border thickness. After that, we’ll customize it practically.
Default Flutter Textformfield Enabled Underline Border Thickness
For that, we’ve to implement a simple Flutter textformfield widget. It comes with an underline border having default thickness. See below code:
TextFormField()
We can see default Flutter textformfield enabled underline border thickness in the above given image. Let’s now customize it.
Change Flutter Textformfield Enabled Underline Border Thickness (Multiple Examples)
- For that, we’ve to use the decoration constructor of Flutter textformfield and pass it input decoration.
- After that, we’ve to pass underline input border to its enabled border constructor.
- Now we’ve to pass border side widget to its border side constructor.
- Finally, by using its width constructor, we can easily change Flutter textformfield enabled underline border thickness. This constructor takes a double(decimal) value but passing it an integer will also work just fine.
- For demonstration, we’ll use multiple examples to show how it works. See below examples:
Example 1
enabledBorder: UnderlineInputBorder(borderSide: BorderSide(width: .3))
Example 2
TextFormField( decoration: InputDecoration( enabledBorder: UnderlineInputBorder( borderSide: BorderSide(width: 3) )), )
So this is how we can properly customize Flutter textformfield enabled underline border thickness. Hope you like this post.
Custom Flutter Textformfield Enabled Underline Border Thickness 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: UnderlineInputBorder(borderSide: BorderSide(width: 3)), )), ))); } }
Conclusion
To conclude this tutorial, now you’ve a detailed and in-depth practical knowledge of how to customize Flutter textformfield enabled underline border thickness. I’d love to have your feedback on this post.
I’d also love to see you visit my other tutorials on Flutter app development and Python programming as well. Thank you for reading this post.