Flutter Textfield Remove Underline Explained With Example

TextField()

Implementing Flutter Textfield Remove Underline Border

To remove the Flutter textfield underline border, you have to use the decoration constructor of the Flutter textfield. I have passed the input decoration class to the decoration constructor and by using the border constructor of the input decoration class, you can remove the underline border of the Flutter textfield. Let’s implement Flutter textfield remove underline using code:

 TextField(
            decoration: InputDecoration(
                    border: InputBorder.none,
                    filled: true,
                    fillColor: Colors.blue.shade100),
                                       )

You can see in the above code that by passing the input border none to the border constructor of the input decoration class, I have removed the underline from the Flutter textfield. But you won’t see the Flutter textfield now so I have given a background color to the Flutter textfield using the filled and fill color constructor of the input decoration class. You can see in the image above that I have implemented Flutter textfield remove underline.

Congrats for making it to the end, now you have a complete idea of how to implement Flutter textfield remove underline. Now as a treat, I have created a beautiful Flutter textfield custom design in which Flutter textfield remove underline is also implemented, you can use in your Flutter projects if you want. I would love to see it. The complete source code is given in the next section.

Beautiful Flutter Textfield 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 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: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  TextField(
                    style: TextStyle(color: Colors.grey),
                    cursorColor: Colors.grey,
                    decoration: InputDecoration(
                        border: InputBorder.none,
                        filled: true,
                        fillColor: Colors.grey.withOpacity(.08),
                        prefixIcon: Icon(
                          Icons.email,
                          color: Colors.grey,
                        ),
                        suffixIcon: Icon(
                          Icons.visibility,
                          color: Colors.grey,
                        ),
                        labelText: 'Enter your email',
                        labelStyle:
                            TextStyle(color: Colors.grey.withOpacity(.8)),
                        enabledBorder: OutlineInputBorder(
                            borderSide: BorderSide(color: Colors.grey),
                            borderRadius: BorderRadius.circular(30).copyWith(
                                bottomRight: Radius.circular(0),
                                topLeft: Radius.circular(0))),
                        focusedBorder: OutlineInputBorder(
                            borderSide: BorderSide(color: Colors.grey),
                            borderRadius: BorderRadius.circular(30).copyWith(
                                bottomRight: Radius.circular(0),
                                topLeft: Radius.circular(0)))),
                  )
                ],
              ))),
    ));
  }
}