【问题标题】:Flutter - How to change the border color of the TextField?Flutter - 如何更改 TextField 的边框颜色?
【发布时间】:2021-03-17 23:40:15
【问题描述】:

我开始学习 Flutter,我想更改 TextField 的边框颜色,因为默认情况下它是灰色的,如屏幕截图所示:

TextField by default

我的应用程序使用黑色背景色,TextField 的边框是不可见的,只有在获得焦点或使用键盘时才可见

normal TextField

focused TextField

我已经尝试过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,
                            ),
                          ),
                        ),
                      ],
                    ),
                  )),

它看起来像这样:

TextField

【问题讨论】:

    标签: flutter dart


    【解决方案1】:

    在您确定主题时,可以更轻松地将应用程序主题模式设置为深色并使用默认 Theme.dark。深色主题非常适合文本字段等。

    【讨论】:

      【解决方案2】:

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

      【讨论】:

        猜你喜欢
        • 2019-11-23
        • 2019-06-29
        • 1970-01-01
        • 2019-03-25
        • 2019-12-23
        • 1970-01-01
        • 2021-12-07
        • 2018-10-11
        • 2019-05-09
        相关资源
        最近更新 更多