Flutter Textfield Focused Outline Border Thickness Customization

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

Outline

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

Introduction: Flutter Textfield Focused Outline Border Thickness

It specifies the height/thickness of Flutter textfield focused outline border. Outline border covers every side of textfield.

We can see the focused border when textfield is focused/tapped. We’ll first see the default outline focused border thickness. After that, we’ll customize it practically.

Default Flutter Textfield Focused Outline Border Thickness

• For that we have to implement a simple Flutter textfield widget.
• After that, we’ve to use the decoration constructor of Flutter textfield, then pass it input decoration class.
• Finally, we’ve to pass the outline input border class to its focused border constructor. See the below code:

TextField(
           decoration: InputDecoration(
                  focusedBorder: OutlineInputBorder()
                ),
              )

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

Change Flutter Textfield Focused Outline Border Thickness (Multiple Examples)

For that we have to use the same process mentioned above and after that we have to use the border side constructor of the outline input border class and pass it the border side widget.

Then by using its width constructor, we can easily change Flutter textfield focused outline 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:
       OutlineInputBorder(borderSide: BorderSide(width: .3))

TextField(
       decoration: InputDecoration(
          focusedBorder:
             OutlineInputBorder(
               borderSide: BorderSide(width: 7)
                      )),
          )

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

Custom Flutter Textfield Focused Outline 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: OutlineInputBorder(
                              borderSide: BorderSide(width: 7))),
                    )))));
  }
}