How to change flutter app keyboard color?

Question

In my flutter , I create a TextFormField, but it's keyboard color is black in iOS, I want to know how to change it to white.

flutter language version: >=2.2.2 <3.0.0

this is my code about the TextFormField:

TextFormField(
     style: TextStyle(
               fontSize: 14,
               color: Colors.black),
               autofocus: false,
               initialValue: 'initial value', 
               maxLines: 1,
               // onSaved: (String value) => _person = value,
               // obscureText: _isObscure,
               validator: (String value) {
                          if (value.isEmpty) {
                            return 'nononono';
                          }
                          return null;
                        },
               decoration: InputDecoration(
                          hintText: 'please make sure',
                          contentPadding: EdgeInsets.fromLTRB(15, 5, 15, 5),
               hintStyle: TextStyle(
                             color: Colors.grey,
                             fontSize: 12,
                             ),
               hasFloatingPlaceholder: false,
               // contentPadding: contentPadding,
               border: InputBorder.none,
               ),
),

when I click this TextFormField

what I get: black keyboard

what I want: white keyboard

Amit Prajapati · Accepted Answer · 2019-08-23 05:19:17Z

13

White keyboard use Brightness.light

Black keyboard use Brightness.dark

    body: Center(
            child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
                TextField(
                    keyboardType: TextInputType.text,
                    keyboardAppearance: Brightness.light, // no matter what you set, it simply shows white keyboard
                )
            ],
            ),
        )

answered Aug 23, 2019 at 5:19

Amit Prajapati

14.4k8 gold badges67 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sludge Over a year ago

Just FYI, per the docs, "This setting is only honored on iOS devices." : api.flutter.dev/flutter/material/TextField/…

Apoleo Over a year ago

In fact doesn't seem to work on Android. Any Solution?

Amit Prajapati Over a year ago

@Apoleo This trick is only working on ios. api.flutter.dev/flutter/material/TextField/…

Apoleo Over a year ago

@AmitPrajapati I got that, are there any solution for Android?

Amit Prajapati Over a year ago

@Apoleo I'm sorry I didn't found anything for android.

mixable · Accepted Answer · 2021-05-06 17:10:32Z

8

If you use ThemeData for global styling of your app, you can set primaryColorBrightness. The keyboard of a text field will use this brightness (light or dark) if no value is given for keyboardAppearance.

final ThemeData themeDark = ThemeData(
  primaryColorBrightness: Brightness.dark,
  // ...
);

This has the advantage that you don't have to define keyboardAppearance for each text field.

See https://api.flutter.dev/flutter/material/TextField/keyboardAppearance.html

answered May 6, 2021 at 17:10

mixable

1,1682 gold badges13 silver badges45 bronze badges

1 Comment

shennan Over a year ago

I used: brightness: Brightness.dark, in ThemeData

Collectives™ on Stack Overflow

How to change flutter app keyboard color?

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related