How To Implement Flutter Textformfield Remove Underline?

remove flutter textformfield underline

Flutter textformfield remove underline. In this article, I will be implementing Flutter textformfield remove underline in Flutter textformfield. Let’s make it very simple for you to understand how Flutter textformfield remove underline is implemented using step by step explanation. Let’s not waste anymore of your time and start implementing Flutter textformfield remove underline in Flutter textformfield using proper Flutter code example.

What is Flutter Textformfield Remove Underline?

If you want to understand how Flutter textformfield remove underline is implemented then first you have to understand what Flutter textformfield underline is. This underline is actually a default underline border. Now let’s use proper code to remove that underline border from Flutter textformfield.

Default Flutter Textformfield Underline Border

Let’s see what the default Flutter textformfield underline border looks like. See the below code:

TextFormField()
default flutter textformfield underline
As you can see in the above image that our Flutter textformfield has a default underline border. Now let’s understand how to remove that border.

Implementing Flutter Textformfield Remove Underline

To implement Flutter textformfield remove underline, we have to use the decoration constructor of the Flutter textformfield and then we have to pass the input decoration class. Using the border constructor of the input decoration class, we can now implement Flutter textformfield remove underline using the input border none, see the below code:

TextFormField(
           decoration: InputDecoration(
                border: InputBorder.none),
              )
remove flutter textformfield underline
The above is the proper code to perform Flutter textformfield remove underline. In the above image, you can see that we have a Flutter textformfield but without any underline border. For demonstration I have inputted some text in the Flutter textformfield just to make it visible that the Flutter textformfield is still there.
So this is how you can remove underline from Flutter textformfield. If you still have any queries about the removal of underline border then you can comment. I would love to answer all your queries.
Now as a treat, I have designed a beautiful Flutter textformfield for you in which Flutter textformfield remove underline is also implemented. The complete source code is given in the next section.

Beautiful Flutter Textformfield Design Source Code

remove flutter textformfield underline

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(
                  style: TextStyle(color: Colors.grey),
                  cursorColor: Colors.purple,
                  decoration: InputDecoration(
                    filled: true,
                    fillColor: Colors.blue.withOpacity(.1),
                    hintText: 'This is hint text',
                    hintStyle: TextStyle(color: Colors.grey),
                    prefixIcon: Icon(
                      Icons.person,
                      color: Colors.grey,
                    ),
                    suffixIcon: Icon(
                      Icons.edit,
                      color: Colors.grey,
                    ),
                    border: InputBorder.none,
                    enabledBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.transparent),
                        borderRadius: BorderRadius.circular(30)
                            .copyWith(topRight: Radius.circular(0))),
                    focusedBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.transparent),
                        borderRadius: BorderRadius.circular(30)
                            .copyWith(topRight: Radius.circular(0))),
                    contentPadding: EdgeInsets.all(26),
                  )))),
    ));
  }
}

Conclusion

In conclusion, now you have a detailed practical understanding of how Flutter textformfield is implemented. I would love to have your feedback on this post. I would also encourage you to visit my other articles on Flutter app development, Flutter widgets explanations, beautiful Flutter templates, amazing Flutter animations and many more, links to some of these articles are listed below. Thank you for reading.

Leave a Comment

Your email address will not be published.