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

问题描述 投票:0回答:13

在大学为 flutter 应用程序做 UI,我只希望在 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),
    ),
  ),
dart flutter
13个回答
159
投票

这样就可以了:

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

17
投票

对于尝试从材质应用程序的

theme: ThemeData
属性执行此操作的任何人,可以使用
subtitle1
文本主题样式更改颜色。

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

11
投票

您可以在 TextFormField 中使用 style

示例:

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

10
投票

Puedes usar

style: TextStyle

body: Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Form(
        key: _formKey,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            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;
              },
            ),
          ],
        ),
      ),
    ],
  ),
),

6
投票

你可以用它来改变一切

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

6
投票

使用

ThemeData
:

更改输入文本颜色

材料2

在材料 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 问题以获取任何更改


4
投票

要在本地使用样式,请使用:

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

全局设置颜色(2023年后不推荐使用字幕文本样式时),唯一的方法是设置titleMedium文本样式。

ThemeData( ... textTheme: const TextTheme( ... titleMedium: const TextStyle( color: Colors.white, ), ), ),
如果没有设置本地文本样式,Flutter默认使用titleMedium样式作为输入样式。


3
投票
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 ), ),
    

2
投票
您正在更改此行中的输入文本颜色

TextStyle(fontSize: 20.0, color: textTheme.button.color)

,因此为了设置为
white
,只需使用
Colors.white
常量而不是
textTheme.button.color

有关文本样式的更多信息

此处


2
投票
如果您尝试使用 ThemeData 更改文本颜色。

现在 TextField 正在使用

titleMedium

那么,

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

1
投票
概述:textFormField 样式设置为定义为 MediumStyle 的 TextStyle。 样式影响文本框中显示的字符。 而 labelStyle 会影响 inputdecoration 的字体显示。

TextFormField( style: MediumStyle, keyboardType: TextInputType.emailAddress, focusNode: _employeeEmailFocus, decoration: InputDecoration(labelText: "Employee Email", labelStyle:MediumBoldStyle), validator: (val)=> null, onSaved:(value)=> this._employeeEmail=value, onFieldSubmitted: (term){ _fieldFocusChange(context,_employeeEmailFocus,_passwordFocus); }, ),
    

0
投票
decoration: const InputDecoration( labelStyle: TextStyle(color: Colors.white), ),
    

-11
投票
为textformfield添加一个inputdecoration类 我是这样想的

decoration: InputDecoration( prefixStyle: new TextStyle( ),
    
© www.soinside.com 2019 - 2024. All rights reserved.