如何在Flutter中更改TextFormField输入文本的颜色

Question

我在大学做一个 Flutter 应用的用户界面，我只想将输入到 TextFormField 中的文本设为白色。但这似乎很困难，我已经尝试过搜索等方式，但没有找到明显的答案。

  new Theme(
    // this colors the underline
    data: theme.copyWith(
      primaryColor: Colors.white,
      hintColor: Colors.transparent,

    ),
    child: new Padding(
      padding: const EdgeInsets.fromLTRB(32.0, 40.0, 32.0, 4.0),
      child: TextFormField(

          key: Key('username'),
          keyboardType: TextInputType.text,
          controller: usernameController,
          decoration: InputDecoration(

              fillColor: Colors.black.withOpacity(0.6),
              filled: true,
              border: new OutlineInputBorder(

                borderRadius: const BorderRadius.all(

                  const Radius.circular(8.0),
                ),
                borderSide: new BorderSide(
                  color: Colors.transparent,
                  width: 1.0,
                ),
              ),
              labelText: 'Username',
              labelStyle:
                  new TextStyle(color: Colors.white, fontSize: 16.0)),
          style:
              TextStyle(fontSize: 20.0, color: textTheme.button.color),
          validator: validateUserName,
          onSaved: (val) => this.loginFields._username = val),
    ),
  ),

- poujo

Answer 1

这样就可以了：

TextFormField(
  style: TextStyle(color: Colors.white),
)

- dshukertjr

Answer 2

如果有人想从材质应用程序的theme: ThemeData属性中进行此操作，可以使用subtitle1文本主题样式更改颜色。

MaterialApp(
  ...
  theme: ThemeData(
    ...
    textTheme: const TextTheme(
      ...
      subtitle1: const TextStyle(
        color: Colors.red, // <-- TextFormField input color
      ),
    ),
  ),
)

- Kwame Opare Asiedu

---

非常感谢，我无法弄清楚这个问题。但是这本来就不应该首先出现在subtitle1下面。我认为这没有意义。 - Shourya Shikhar

现在，TextFormField和TextField默认使用titleMedium作为文本样式。 - zeucxb

Answer 3

你可以使用style: TextStyle。

body: Center(
    child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
            Form(
                key: _formKey,
                child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                        TextFormField(
                            TextFormField(
                                controller: field,
                                style: TextStyle(fontSize: 18, color: Colors.red),
                                decoration: const InputDecoration(
                                    contentPadding: const EdgeInsets.only(
                                        left: 15,
                                        top: 8,
                                        right: 15,
                                        bottom: 0
                                    ),
                                    hintText: 'name',
                                ),
                                validator: (value) {
                                    if (value.isEmpty) {
                                        return 'Please enter some text';
                                    }
                                    return null;
                                },
                            ),
                        )
                    ]
                )
            )
        ]
    )
)

- Jairo Rodriguez

---

你把textField放到了一个textfield内部。 - ÄR Âmmãř Żąîñh

Answer 4

您可以在TextFormField中使用 style。

示例：

          TextFormField(
            style: const TextStyle(color: Colors.white),
          ),

- dhaval_nakum

Answer 5

你可以使用它来改变一切

TextFormField(
                //controller: _phoneController,
                cursorColor: Colors.black,
                keyboardType: TextInputType.text,
                style: TextStyle(
                  color: Colors.black
                ),
                decoration: new InputDecoration(
                  hintStyle: TextStyle(
                    color: Colors.white
                  ),
                    border: InputBorder.none,
                    //contentPadding:
                    //EdgeInsets.only(left: 15, bottom: 11, top: 11, right: 15),
                    hintText: "New Playlist"),
              ),

- pavel

Answer 6

Padding(
  padding: EdgeInsets.all(10),
  child: TextFormField(
  cursorColor: Color(0XFFFFCC00)//Cursor color change
  style: TextStyle(
    color: Color(0XFFFFCC00),
    decorationColor: Color(0XFFFFCC00),//Font color change
    backgroundColor: Color(0XFFFFCC00),//TextFormField title background color change
   ),
),

- fucukur

Answer 7

使用ThemeData更改输入文本颜色：

Material 2

在Material 2中，TextField使用titleMedium。

ThemeData(
  ...
  textTheme: const TextTheme(
    ...
    titleMedium: const TextStyle(
      color: Colors.red, // <-- TextFormField input color
    ),
  ),
),

材料 3

在材料 3 中，TextField 使用 bodyLarge。

ThemeData(
  ...
  textTheme: const TextTheme(
    ...
    bodyLarge: const TextStyle(
      color: Colors.red, // <-- TextFormField input color
    ),
  ),
),

请关注此Github问题以获取任何更改

- Aristidios

Answer 8

要在本地使用样式，请使用：

TextFormField(
  style: TextStyle(color: Colors.white),
)

在编程中，若要全局设置颜色（在字幕文本样式被弃用之后的2023年以后），唯一的方法是设置titleMedium文本样式。

ThemeData(
  ...
  textTheme: const TextTheme(
    ...
    titleMedium: const TextStyle(
      color: Colors.white,
    ),
  ),
),

如果本地文本样式未设置，Flutter将使用titleMedium样式作为输入样式的默认值。

- Martin Holoubek

Answer 9

如果您想使用ThemeData更改textColor。

现在TextField正在使用"titleMedium"。

因此，

ThemeData(
  ...
  textTheme: const TextTheme(
    ...
    titleMedium: const TextStyle(
      color: Colors.red, // <-- TextFormField input color
    ),
  ),
),

- zeucxb

Answer 10

您正在更改此行中的输入文本颜色 TextStyle(fontSize: 20.0, color: textTheme.button.color)，因此为了将其设置为白色，只需使用Colors.white常量，而不是 textTheme.button.color 。

更多有关文本样式在这里的信息。

- olexa.le