How to Remove TextField Underline in Flutter

By default, TextField widget of Flutter has an underline. Sometimes, you may want to get rid of this line. In this Flutter tutorial, let’s check how to remove underline in TextField.

You can remove underline by using InputBorder class as given below.

TextField(
          decoration: InputDecoration(
          border: InputBorder.none,
          hintText: "TextInput without Underline"),
          controller: myController,
            ),

Following is the complete example.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter TextInput without Underline',
      home: FlutterExample(),
    );
  }
}

class FlutterExample extends StatefulWidget {
  @override
  _FlutterExampleState createState() => _FlutterExampleState();
}

class _FlutterExampleState extends State<FlutterExample> {
  final myController = TextEditingController();

  @override
  void dispose() {
    myController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('TextInput Remove Underline'),
        ),
        body: Padding(
          padding: EdgeInsets.all(16),
          child: Center(
            child: TextField(
              decoration: InputDecoration(
                  border: InputBorder.none,
                  hintText: "TextInput without Underline"),
              controller: myController,
            ),
          ),
        ));
  }
}

That’s how you remove Flutter TextField underline. Thank you for reading!