Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change flutter app keyboard color?

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

like image 994
GorCat Avatar asked Aug 23 '19 03:08

GorCat


People also ask

How do you change the color on flutter?

Step 1: Go to your main. Step 2: Inside the MaterialApp, find the ThemeData widget. Step 3: Add the scaffoldBackgroundColor property inside and assign the color you want. (e.g. scaffoldBackgroundColor: Colors.


2 Answers

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
                )
            ],
            ),
        )
like image 94
Amit Prajapati Avatar answered Oct 26 '22 22:10

Amit Prajapati


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

like image 28
mixable Avatar answered Oct 26 '22 22:10

mixable