Flutter Remove TextField Underline

The default TextField comes with a underline or we can say a bottom border. The main purpose of showing underline on TextField is to show where the TextField are on screen. We will remove TextField underline with defining border property none.

Flutter Remove TextField Underline

1. Create a TextField and define border as none using InputBorder.none property.

TextField(
	autocorrect: true,
	decoration: InputDecoration(
		border: InputBorder.none,
		hintText: 'Type Name Here...'))

Screenshot:

Source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
        home: Scaffold(
            body: Center(
                child: SizedBox(
                    width: 280,
                    child: TextField(
                        autocorrect: true,
                        decoration: InputDecoration(
                            border: InputBorder.none,
                            hintText: 'Type Name Here...'))))));
  }
}