Flutter Textformfield Focused Underline Border Thickness Customization

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

Introduction: Flutter Textformfield Focused Underline Border Thickness

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

Default Flutter Textformfield Focused 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 focused underline border thickness in the above given image. Let’s now customize it.

Change Flutter Textformfield Focused 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 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 textformfield 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))

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

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

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