How To Change Flutter Textformfield Underline Thickness [Detailed Flutter Guide]

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

Outline

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

Introduction: Flutter Textformfield Underline Thickness

It specifies the height of underline border. We’ll first see the default underline border thickness. After that, we’ll customize it practically.

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

Change Flutter Textformfield Underline Thickness (Multiple Examples)

• We’ve to change the underline border thickness for both focused and enabled border, if we want both of them to have a custom underline border thickness.
• 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. Same process for focused border as well.
• 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 underline 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

TextFormField(
       decoration: InputDecoration(
          enabledBorder:
             UnderlineInputBorder(
               borderSide: BorderSide(width: 3)
                      )),
          )

enabledBorder:
       UnderlineInputBorder(borderSide: BorderSide(width: .3))

focusedBorder:
       UnderlineInputBorder(borderSide: BorderSide(width: 3))

So this is how we can easily change Flutter textformfield underline thickness. You can specify different width values to enabled and focused border as well.

Custom Flutter Textformfield Underline 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.3)),
                focusedBorder:
                    UnderlineInputBorder(borderSide: BorderSide(width: 3))),
          )),
    )));
  }
}