TextField widget has a property decoration which has a sub property border: InputBorder.none .This property would Remove TextField Text Input Bottom Underline in Flutter Android iOS mobile app. The bottom underline shows us how much area in width Text Input is occupying on mobile screen.
Contents in this project Hide Remove TextField Text Input Bottom Underline in Flutter Android iOS App:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Call our main MyApp class using void main runApp() method.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main class named as MyApp extends with State less widget.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
4. Create Scaffold widget in Widget build area with SafeArea widget and Center widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Center( child : ) ) )); } } |
5. Create container widget in Center widget and put TextField widget in container widget.
- border: InputBorder.none : Hide bottom underline from Text Input widget.
|
1 2 3 4 5 6 7 8 9 10 |
Container( width: 280, padding: EdgeInsets.all(8.0), child : TextField( autocorrect: true, decoration: InputDecoration( border: InputBorder.none, hintText: 'Enter Some Text Here') ) ) |
6. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Center( child : Container( width: 280, padding: EdgeInsets.all(8.0), child : TextField( autocorrect: true, decoration: InputDecoration( border: InputBorder.none, hintText: 'Enter Some Text Here') ) ) ) ) )); } } |
Screenshot before hiding underline:
Also Read:
Flutter Create Alert Dialog with Yes No Cancel Buttons Android iOS Example
Solve Flutter App Content Above Status Bar UI Error
Flutter Load Different Style on Container Widget on Button Click
Create Multiple Checkbox Dynamically using Array Map Items in Flutter
Flutter Create Round Circle Oval Shape Button Android iOS Example