Change Text Input TextField Bottom Underline Color in Flutter

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.

2. Call our main MyApp class using void main runApp() method.

3. Create Scaffold widget -> SafeArea widget -> Center widget in Widget build area in MyApp class.

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.

5. Complete source code for main.dart file:

Screenshots:

TextField_underline_color_1

Leave a Reply

Your email address will not be published.