簡體   English   中英

如何更改 Flutter 中的 TextFormField 輸入文本顏色

[英]How to change TextFormField input text color in Flutter

在 uni 為 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),
    ),
  ),

這將:

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

Puedes 用戶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;
                                },
                            ),
                        )
                    ]
                )
            )
        ]
    )
)

你可以用它來改變一切

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

對於任何嘗試從材質應用程序的theme: ThemeData屬性執行此操作的人,可以使用subtitle1文本主題樣式更改顏色。

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

您正在更改此行中的輸入文本顏色TextStyle(fontSize: 20.0, color: textTheme.button.color) ,因此為了設置為white只需使用Colors.white常量而不是textTheme.button.color

更多關於文本樣式 在這里

概述: 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);
            },

            ),

您可以在 TextFormField 中使用樣式

例子 :

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

裝飾:const InputDecoration(labelStyle:TextStyle(顏色:Colors.white),),

如果您想使用 Global Change,請使用以下命令:

 return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
          primarySwatch: Colors.blue,
          textTheme: Theme.of(context).textTheme.copyWith(
                subtitle1: const TextStyle(color: Colors.green),
              )),
      home: const MyHomePage(),
    );

否則你可以這樣做:

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

為 textformfield 添加一個 inputdecoration 類,這是我認為的

    decoration: InputDecoration(
              prefixStyle: new TextStyle(

              ),

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM