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!