Change Input Textfield Underline Color In Flutter App

admin_img Posted By Bajarangi soft , Posted On 10-09-2020

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.

Change Input Textfield Underline Color In Flutter App

Complete Code For Change Input Textfield Underline Color In Flutter
main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
        home: Scaffold(
          appBar: AppBar(
            centerTitle: true,
            backgroundColor: Colors.green,
            title: Text("Change Input Text Field BOttom Underline Color"),
          ),
            body: SafeArea(
                child: Column(
                  children: <Widget>[
                    Container(
                        width: 290,
                        padding: EdgeInsets.all(10.0),
                        child : TextField(
                            autocorrect: true,
                            decoration: InputDecoration(
                              hintText: 'UserName',
                              enabledBorder: UnderlineInputBorder(
                                borderSide: BorderSide(color: Colors.pink),
                              ),
                              focusedBorder: UnderlineInputBorder(
                                borderSide: BorderSide(color: Colors.green),
                              ),
                            )
                        )
                    ),
                    Container(
                        width: 290,
                        padding: EdgeInsets.all(10.0),
                        child : TextField(
                            autocorrect: true,
                            decoration: InputDecoration(
                              hintText: 'E-mail',
                              enabledBorder: UnderlineInputBorder(
                                borderSide: BorderSide(color: Colors.pink),
                              ),
                              focusedBorder: UnderlineInputBorder(
                                borderSide: BorderSide(color: Colors.green),
                              ),
                            )
                        )
                    ),
                  ],
                )
            )
        ));
  }
}

Related Post