没有边框颜色的圆角文本框。

Question

我需要一个带圆角的TextField，我已经做到了，但它显示的是默认的边框颜色。我尝试更改borderSide，但无法更改颜色（仍然是黑色）：

       TextFormField(
                decoration: InputDecoration(
                    prefixIcon: Icon(
                      Icons.person,
                      color: Colors.white,
                    ),
                    border: OutlineInputBorder(
                      // width: 0.0 produces a thin "hairline" border
                      borderRadius: BorderRadius.all(Radius.circular(90.0)),
                      borderSide: BorderSide(color: Colors.white24)
                      //borderSide: const BorderSide(),
                    ),

                    hintStyle: TextStyle(color: Colors.white,fontFamily: "WorkSansLight"),
                    filled: true,
                    fillColor: Colors.white24,
                    hintText: 'Password'),
              ),

我需要这个效果，但是不想要边框，光标应该是白色。我尝试更改了border参数中的一切内容，但仍然没有变化。

我想要的效果:

我得到的效果:

- Farhana Naaz Ansari

Answer 1

设置：

borderSide: BorderSide.none,

就像这样：

   TextFormField(
            decoration: InputDecoration(
                prefixIcon: Icon(
                  Icons.person,
                  color: Colors.white,
                ),
                border: OutlineInputBorder(
                  // width: 0.0 produces a thin "hairline" border
                  borderRadius: BorderRadius.all(Radius.circular(90.0)),
                  borderSide: BorderSide.none,
                ),

                hintStyle: TextStyle(color: Colors.white,fontFamily: "WorkSansLight"),
                filled: true,
                fillColor: Colors.white24,
                hintText: 'Password'),
          ),

- Nae

Answer 2

创建一个透明的边框：

      final border = OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(90.0)),
            borderSide: BorderSide(
              color: Colors.transparent,
            )
            );

另一个选项是使用：

borderSide: BorderSide.none

将其用于focusedBorder和border属性中，还需添加一个主题以设置光标和提示颜色：

    Theme(
                  data: Theme.of(context).copyWith(
                    cursorColor: Colors.red,
                    hintColor: Colors.transparent,
                  ),
                  child: TextFormField(
                    decoration: InputDecoration(
                        focusedBorder: border,
                        border: border,
                        prefixIcon: Icon(
                          Icons.person,
                          color: Colors.white,
                        ),
                        hintStyle: TextStyle(
                            color: Colors.white, fontFamily: "WorkSansLight"),
                        filled: true,
                        fillColor: Colors.white24,
                        hintText: 'Password'),
                  ),
                ),

- diegoveloper

---

仍然显示黑色颜色，TextFormField 中未定义 cursorColor，但在焦点上，它会改变。 - Farhana Naaz Ansari

我应该在MaterialApp中更改ThemeData吗？ - Farhana Naaz Ansari

取决于你，如果你希望所有视图具有相同的主题属性，则应该这样做，否则只更改文本字段的主题。 - diegoveloper

很好，它正在工作。当我输入内容时，我会更改标签文本颜色，它会显示黑色。我尝试了以下代码：labelText: TextStyle(color: Colors.white)，但是出现了错误。 - Farhana Naaz Ansari

它的标签样式是没有标签文本。 - diegoveloper