TextField widget has by default Light blue color bottom underline. But sometimes app developer wants to modify the underline color as per their project requirement. We can do this by using enabledBorder: UnderlineInputBorder() property of decoration in TextField widget. The enabled border has a sub property borderSide: BorderSide(color) which is used to define underline color. So in this tutorial we would Change Text Input TextField Bottom Underline Color in Flutter Android iOS app example. We would also change TextField underline color on focus.
Contents in this project Change Text Input TextField Bottom Underline Color in Flutter Android iOS example:
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 Scaffold widget -> SafeArea widget -> Center widget in Widget build area in MyApp class.
|
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 ) ) )); } } |
4. Create TextField widget in Center widget wrap in Container widget.
- enabledBorder -> borderSide: BorderSide(color) : Used to set Text Input underline color without focus.
- focusedBorder -> borderSide: BorderSide(color) : Used to set Text Input underline color on focus.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
Container( width: 290, padding: EdgeInsets.all(10.0), child : TextField( autocorrect: true, decoration: InputDecoration( hintText: 'Type Text Here', enabledBorder: UnderlineInputBorder( borderSide: BorderSide(color: Colors.red), ), focusedBorder: UnderlineInputBorder( borderSide: BorderSide(color: Colors.green), ), ) ) ) |
5. 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 27 28 29 30 31 32 |
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: 290, padding: EdgeInsets.all(10.0), child : TextField( autocorrect: true, decoration: InputDecoration( hintText: 'Type Text Here', enabledBorder: UnderlineInputBorder( borderSide: BorderSide(color: Colors.red), ), focusedBorder: UnderlineInputBorder( borderSide: BorderSide(color: Colors.green), ), ) ) ) ) ) )); } } |
Screenshots:
