dart 如何在Flutter中为必填字段设置红色星号(*)

zzwlnbp8  于 2023-06-19  发布在  Flutter
关注(0)|答案(5)|浏览(232)

我试图在RichText小部件中获得红色星号();我可以使用style属性。但它会使整个文本变红。我只希望星号()为红色。任何线索,如何使它发生?
这是我的RichText小工具,现在我可以查看星号(*)与文本的其余部分相同的颜色。

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

l7wslrjt1#

我知道怎么做了。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,
  ),
crcmnpdw

crcmnpdw2#

您可以使用以下命令:

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

exdqitrt3#

即使你可以通过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,
                    )),
        ])),
     
     
     ),
      
  );
 }
}
ua4mk5z4

ua4mk5z44#

升级flutter到2.5.3,你会得到一个“标签”小部件来自定义你的标签。你想怎么改都行。

decoration: InputDecoration(
          label: Row(
            children: [
              CustomText(widget.label,
                  font: Font.NUNITO_REGULAR, color: ColorResource.COLOR_cacaca),
              if (widget.isMandatory)
                const CustomText(" *",
                    font: Font.NUNITO_REGULAR,
                    color: ColorResource.COLOR_DB4437)
            ],
          ),
aurhwmvo

aurhwmvo5#

谢谢,从这里回答,我已经找到了一个解决方案......除了你必须改变labeltext标签

child: TextFormField(
                      style: TextStyle(
                          color: Colors.black,
                          fontWeight: FontWeight.w500,
                          fontFamily: 'DM Sans'),
                      keyboardType: TextInputType.name,
                      textAlign: TextAlign.center,
                      decoration: InputDecoration(
                        label: RichText(
                          text: TextSpan(
                              text: 'Nom',
                              style: TextStyle(
                                color: Colors.green,
                              ),
                              children: [
                                TextSpan(
                                    text: '*',
                                    style: TextStyle(color: Colors.yellow))
                              ]),
                        ),
                        hintText: 'Nom',
                        labelStyle: TextStyle(color: Color(0xFF6F6F6F)),
                        hintStyle: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.w500,
                          color: Colors.black,
                          fontFamily: 'DM Sans',
                        ),
                        focusedBorder: OutlineInputBorder(
                            borderSide: BorderSide(color: Color(0xFF6F6F6F))),
                        border: OutlineInputBorder(
                            borderSide: BorderSide(
                          color: Color(0xFF6F6F6F),
                        )),
                        prefixIcon: Padding(
                          padding: EdgeInsets.all(10),
                          child: SvgPicture.asset("assets/icons/icon_name.svg"),
                        ),
                      ),
                    ),

相关问题