简体   繁体   中英

Flutter - How to change the border color of the TextField?

I'm starting to study with flutter and I want to change the border color of the TextField because by default it is gray, as I show in the screenshot:

TextField by default

I use a black background color for my application and the border of the TextField is not visible, It is only visible when it is focused or when the keyboard is in use

normal TextField

focused TextField

I have tried with new Theme :

Container(
                  child: new Theme(
                    data: ThemeData(
                      primaryColor: Colors.white,
                      //
                      inputDecorationTheme: InputDecorationTheme(
                          enabledBorder: OutlineInputBorder(
                              borderSide: BorderSide(color: Colors.white)),
                          focusedBorder: OutlineInputBorder(
                              borderSide: BorderSide(color: Colors.white))),
                    ),
                    child: Column(
                      children: [
                        TextField(
                          style: TextStyle(
                            color: Colors.white,
                          ),
                          decoration: InputDecoration(
                            labelText: 'EMAIL',
                            labelStyle: TextStyle(
                              fontFamily: 'Montserrat',
                              fontWeight: FontWeight.bold,
                              color: Colors.white,
                            ),
                          ),
                        ),
                      ],
                    ),
                  )),

and it looks like this:

TextField

Mush easier to set application theme mode to dark and use the default Theme.dark while you figure out the themes. The dark theme works pretty well with text fields etc.

Sravan Kumar Nerella's answer was a great help, I had not thought of it that way, however I continued researching and I did not know that it was possible to set a theme to a container and this is how my code turned out: Hope it helps to someone else

Container(
                child: Theme(
                  data: new ThemeData.dark(), // HERE
                  child: Column(
                    children: [
                      TextField(
                        style: TextStyle(color: Colors.white),
                        decoration: InputDecoration(
                          labelText: 'EMAIL',
                          labelStyle: TextStyle(
                            fontFamily: 'Montserrat',
                            fontWeight: FontWeight.bold,
                            color: Colors.white,
                          ),
                          focusedBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.white),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM