CODEWITHSUNDEEP
flutterdartflutter-layout
NicoleZ
NicoleZ

Reputation: 1780

How to change Flutter TextField border color on focus?

I created a simple text field with input decoration and Outlineboraderinput. When I type on that text field I want to change the border color. Below link, you can see my work. What I want is change that blue border to white:

image

TextFormField(
  decoration: InputDecoration(
    labelText: "Resevior Name",
    fillColor: Colors.white,
    enabledBorder:OutlineInputBorder(
      borderSide: const BorderSide(color: Colors.white, width: 2.0),
        borderRadius: BorderRadius.circular(25.0),
      ),
    ),
  )

Upvotes: 44

Views: 100249

Answers (2)

NearHuscarl
NearHuscarl

Reputation: 81310

In Flutter 2.5, you can change the focus color of the TextField directly in the ThemeData:

theme: ThemeData().copyWith(
  // change the focus border color of the TextField
  colorScheme: ThemeData().colorScheme.copyWith(primary: Colors.amber),
  // change the focus border color when the errorText is set
  errorColor: Colors.purple,
),

Live Demo

Upvotes: 12

Allence Vakharia
Allence Vakharia

Reputation: 1921

Add focusBorder insted of enabledBorder

TextFormField(
        decoration: InputDecoration(
          labelText: "Resevior Name",
          fillColor: Colors.white,
          focusedBorder:OutlineInputBorder(
            borderSide: const BorderSide(color: Colors.white, width: 2.0),
            borderRadius: BorderRadius.circular(25.0),
          ),
        ),
      )

Upvotes: 114

Related Questions