Flutter中Input Decoration中的labelText添加強制(*)

Question

我想在InputDecoration labelText 中添加星號並更改它的顏色（如紅色），以便用戶輕松理解此字段是必需的。

TextField(
    autofocus: true,
    controller: _nameCtrlr,
    keyboardType: TextInputType.text,
    decoration: InputDecoration(
    labelText: "Name *",
   ))

像這張圖片示例圖片的預期結果

Answer 1

您可以在InputDecoration參數中使用label arguments。 這適用於小部件TextField或TextFormField

TextField(
        decoration: InputDecoration(
          label: Row(
            children: [
              const Text('*', style: TextStyle(color: Colors.red)),
              Padding(
                padding: EdgeInsets.all(3.0),
              ),
              Text("Name")
            ],
          ),
        ),
        controller: _nameCtrlr,
        autofocus: true,
        keyboardType: TextInputType.text,
       );

Answer 2

是的，伙計，你可以做到。

TextField(
    autofocus: true,
    controller: _nameCtrlr,
    keyboardType: TextInputType.text,
    decoration: InputDecoration(
    labelText: "Name \*",
   ))

“\\”符號將幫助編譯器區分星號（*）和乘法。

Answer 3

您可以像這樣使用富文本小部件

RichText getRequiredLabel(String fieldName) {
  return RichText(
      text: TextSpan(
          style: TextStyle(color: Colors.black),
          text: fieldName,
          children: [
        TextSpan(text: '*', style: TextStyle(color: Colors.red))
      ]));
}