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

Solution 1

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
                )
            ],
            ),
        )

Solution 2

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

Comments

[Sludge]

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

[Apoleo]

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

[Amit Prajapati]

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

[Apoleo]

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

[Amit Prajapati]

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