简体   繁体   English

Flutter - 如何更改 TextField 的边框颜色?

[英]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:我开始使用 flutter 学习,我想更改 TextField 的边框颜色,因为默认情况下它是灰色的,如屏幕截图所示:

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我为我的应用程序使用黑色背景色,并且 TextField 的边框不可见,仅在聚焦或使用键盘时可见

normal TextField普通文本字段

focused TextField重点文本字段

I have tried with new Theme :我尝试过使用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. Mush 更容易将应用程序主题模式设置为深色,并在您确定主题时使用默认 Theme.dark。 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 Sravan Kumar Nerella 的回答很有帮助,我没有这样想过,但是我继续研究,我不知道可以为容器设置主题,这就是我的代码结果:希望它有帮助给别人

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

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