如何在 Flutter 中为标志设置红色星号 (*) 是必填字段答案

【问题标题】：How to set a red asterisk (*) for sign of is mandatory field in Flutter如何在 Flutter 中为标志设置红色星号 (*) 是必填字段
【发布时间】：2019-05-16 01:36:25
【问题描述】：

我正在尝试在 RichText 小部件中添加一个红色星号 ()；我可以使用样式属性。但它会使整个文本变红。我只希望星号（）是红色的。任何线索，如何实现？

这是我的 RichText 小部件，现在我可以查看与其余文本颜色相同的星号 (*)。

RichText(
    text: TextSpan(
        text: '$labelText *',
        style: TextStyle(
            color: labelColor, fontWeight: fontWeight, fontSize: fontSize)),
    textScaleFactor: labelTextScale,
    maxLines: labelMaxLines,
    overflow: overflow,
    textAlign: textAlign,
  );

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

将 Flutter 升级到 2.5.3，您将获得一个“标签”小部件来自定义您的标签。你可以随心所欲地改变。

装饰：输入装饰（标签：行（孩子们： [ CustomText(widget.label, 字体：Font.NUNITO_REGULAR，颜色：ColorResource.COLOR_cacaca）， if (widget.isMandatory) 常量 CustomText(" *", 字体：Font.NUNITO_REGULAR，颜色：ColorResource.COLOR_DB4437） ], ),

【讨论】：

【解决方案2】：

即使您可以通过 children 属性更改 TextSpan 中所有字符的颜色，您也可以使用它。

这是我的示例代码，你想办法：

Here is output you can view it

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Navigation Basics',
    home: HomePage(),
  ));
}

class HomePage extends StatelessWidget {
  String labelText = "Ayush Kumar ";
  
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
     body:Center(
       child:RichText(
    text: TextSpan(
        text: '$labelText',
        style: TextStyle(
            color: Colors.black,
            fontSize:30.0,
          fontWeight: FontWeight.bold,
        ),
        children: [
           TextSpan(
                  text: ' *',
                  style: TextStyle(
                      color: Colors.red,
                         fontSize:30.0,
                    fontWeight: FontWeight.bold,
                    )),
           TextSpan(
                  text: ' *',
                  style: TextStyle(
                      color: Colors.blue,
                    fontSize:30.0,
                    fontWeight: FontWeight.bold,
                    )),
        ])),
     
     
     ),
      
  );
 }
}

【讨论】：

【解决方案3】：

你可以用这个：

class FormField extends StatelessWidget {
  final String label;
  final bool withAsterisk;
  const FormField({Key key, @required this.label, @required this.withAsterisk})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(children: [
      Container(
        padding: EdgeInsets.fromLTRB(16, 16, 16, 0),
        child: TextFormField(
          decoration: InputDecoration(
              border: OutlineInputBorder(),
              focusedBorder: OutlineInputBorder(),
              errorBorder: OutlineInputBorder(
                borderSide: const BorderSide(color: Colors.red, width: 1),
              )),
        ),
      ),
      Padding(
        padding: const EdgeInsets.only(left: 32, top: 10),
        child: RichText(
          text: TextSpan(
            children: <TextSpan>[
              TextSpan(
                  text: ' $label',
                  style: TextStyle(
                      backgroundColor:
                          Theme.of(context).scaffoldBackgroundColor,
                      color: DsColor.textColorDrkGrey,
                      fontWeight: FontWeight.w400,
                      fontSize: 12)),
              TextSpan(
                  text: withAsterisk ? '* ' : ' ',
                  style: TextStyle(
                      fontWeight: FontWeight.w500,
                      fontSize: 12,
                      backgroundColor:
                          Theme.of(context).scaffoldBackgroundColor,
                      color: Colors.red)),
            ],
          ),
        ),
      ),
    ]);
  }
}

用法：

FormField(
  label: "Name",
  withAsterisk: true,
),
FormField(
  label: "Phone",
  withAsterisk: false,
)

【讨论】：

【解决方案4】：

我想出了怎么做。 TextSpan 有一个子属性，它以 List 作为值。

所以我为星号 (*) 分配了一个 TextSpan。

 RichText(
    text: TextSpan(
        text: '$labelText',
        style: TextStyle(
            color: labelColor, fontWeight: fontWeight, fontSize: fontSize),
        children: [
           TextSpan(
                  text: ' *',
                  style: TextStyle(
                      color: Colors.red,
                      fontWeight: fontWeight,
                      fontSize: fontSize))
        ]),
    textScaleFactor: labelTextScale,
    maxLines: labelMaxLines,
    overflow: overflow,
    textAlign: textAlign,
  ),

【讨论】：