How To Change Flutter Textformfield Outline Border Width

Flutter textformfield outline border width customization. In this post, I will be changing the Flutter textformfield outline border width with an easy Flutter example code. I will be using a step by step explanation of how to change the Flutter textformfield outline border width. I will be explaining what the border width is and what its role and usage is in Flutter textformfield.

Outline

What is Flutter Textformfield Outline Border Width?
Default Flutter Textformfield Outline Border Width
Change Flutter textformfield Outline Border Width
Custom Flutter Textformfield Design Source Code
Conclusion

What is Flutter Textformfield Outline Border Width?

Flutter textformfield outline border width is the thickness of the outline border. Let’s implement it using Flutter example for better understanding of what border width is and how customize Flutter textformfield outline border width.

Default Flutter Textformfield Outline Border Width

To see the default width of outline border, we have to define a simple Flutter textformfield widget, then using its decoration constructor and passing input decoration class to it. Using the enabled border and focused border constructor of the input decorations class and passing it outline input border class will let us see the default Flutter textformfield outline border width for both enabled and focused border. See the below code:

TextFormField(
           decoration: InputDecoration(
                  enabledBorder: OutlineInputBorder(),
                  focusedBorder: OutlineInputBorder(),
                ),
              )

Flutter textformfield default outline border width

In the above image, you can see the default Flutter textformfield outline border width. Let’s now see how we can change the outline border width.

Change Flutter textformfield Outline Border Width

In order to change the default Flutter textformfield outline border width, we have to use the border side constructor of the outline input border class and pass it border side class. Using the width constructor, we can change the width of outline border, it takes a double value. See the below code:

 OutlineInputBorder(
               borderSide: BorderSide(width: 3))

Flutter textformfield change outline border width

You can see in the above image that we have given it a width of 3 to demonstrate that Flutter textformfield outline border width is customized.

Now you have a complete practical knowledge of how to change Flutter textformfield outline border width in Flutter textformfield. If you face any errors or if you have any questions regarding Flutter textformfield outline border width then let me know in the comment section. I would love to answer your questions.

I also have prepared a beautiful custom Flutter textformfield design source code for you in which Flutter textformfield outline border width is also customized. The complete source code is available in the below section.

Custom Flutter Textformfield Design Source Code

Flutter textformfield outline border width

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 StatefulWidget {
  @override
  State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      body: Center(
          child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 40),
              child: TextFormField(
                style: TextStyle(color: Colors.blue),
                decoration: InputDecoration(
                  enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(50)
                          .copyWith(bottomRight: Radius.circular(0)),
                      borderSide: BorderSide(color: Colors.blue, width: 4)),
                  focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(50)
                          .copyWith(bottomRight: Radius.circular(0)),
                      borderSide: BorderSide(color: Colors.blue, width: 3)),
                ),
              ))),
    ));
  }
}

Conclusion

In conclusion, we have practically discussed how to change Flutter textformfield outline border width with Flutter example code. I would love to have your feedback and would love to hear about what you’ve learned and think about my other articles on Flutter app development, Flutter widgets, amazing Flutter templates, Flutter animations, and more. Links to some of these posts are listed below. Thanks for reading this article.

Flutter app articles you might like to read: beautiful gradient login UI, Dart Vs JavaScript, flutter login UI form, flutter basics for beginners, explanation of widgets in flutter, flutter architecture, flutter vs native, flutter sliverappbar customization, mobile app marketing tips, flutter bottom navigation bar, flutter appbar actions,flutter appbar title center, why learn react native framework, react native jobs, react native elements, unique flutter development.