How to set a red asterisk (*) for sign of is mandatory field in Flutter

Question

I am trying to get a red asterisk() in a RichText widget; I can use the style property. But it will make the entire text red. I want only the asterisk() to be red. Any clue, how to make it happen?

Here is my RichText Widget, right now i am able to view a asterisk(*) in the same color as the rest of the text.

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

Vasilek

Answer 1

I figured out how to do it. TextSpan has an attribute for children, which takes a List as value.

So i assigned a a TextSpan for the asterisk(*).

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

Vasilek

Answer 2

Upgrade flutter to 2.5.3 ,you will get a "label" widget to customize your label. You can change however you want .

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

Eratosthenes

Answer 3

You can use this :

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

Usage :

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

Astrobiology

Answer 4

You Can Use This even you can change the colors of all the characters in TextSpan via children property.

Here is my sample Code you figure out it :

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

Delphadelphi

Answer 5

thanks, to answer from here, I've found a solution...except that you have to change labeltext to label

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

Quadriplegia

Answer 6

You can easily include an asterisk (*) in the label of a TextFormField without relying on the RichText widget. Here's how you can achieve that:

TextFormField(
  decoration: InputDecoration(
    label: Text("Title *"), // Adding an asterisk to indicate a required field
    border: OutlineInputBorder(borderSide: BorderSide()),
  ),
),

This simple approach allows you to indicate required fields clearly while keeping your code clean and straightforward! Feel free to modify any part of it to better fit your style or needs!

Output: sample 1

Sample 2

Devise