Flutter Textfield Focused Underline Border Thickness Customization

In this tutorial, we’ll learn how to properly customize Flutter textfield focused underline border thickness by using practical Flutter code examples.

Outline

1. Introduction: Flutter Textfield Focused Underline Border Thickness
2. Default Flutter Textfield Focused Underline Border Thickness
3. Change Flutter Textfield Focused Underline Border Thickness (Multiple Examples)
4. Custom Flutter Textfield Focused Underline Border Thickness Source Code
5. Conclusion

Introduction: Flutter Textfield Focused Underline Border Thickness

It specifies the height/thickness of Flutter textfield focused underline border. Focused border is visible when the textfield is tapped/focused. We’ll first see the default underline focused border thickness. After that, we’ll customize it practically.

Default Flutter Textfield Focused Underline Border Thickness

For that, we’ve to implement a simple Flutter textfield widget. It comes with an underline border having default thickness. See below code:

TextField()

We can see default Flutter textfield focused underline border thickness in the above given image. Let’s now customize it.

Change Flutter Textfield Focused Underline Border Thickness (Multiple Examples)

• For that, we’ve to use the decoration constructor of Flutter textfield and pass it input decoration.
• After that, we’ve to pass underline input border to its focused 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 textfield focused 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

focusedBorder:
       UnderlineInputBorder(borderSide: BorderSide(width: .1))

TextField(
       decoration: InputDecoration(
          focusedBorder:
             UnderlineInputBorder(
               borderSide: BorderSide(width: 5)
                      )),
          )

So this is how we can properly customize Flutter textfield focused underline border thickness. Hope you like this post.

Custom Flutter Textfield Focused 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: TextField(
            decoration: InputDecoration(
                focusedBorder:
                    UnderlineInputBorder(borderSide: BorderSide(width: 5)),
          )),
    )));
  }
}