How to use both the text color and foreground color properties together

Question

I would like to know if there's any way to first set the text color of a text and then apply a stroke color to it using the foreground property. I'm looking to make something like this:

Here's the code that I have written. Please note that this is a date range picker calendar(3rd party plugin called syncfusion_flutter_datepicker) and I would like to apply the above style to all the weekend days.

                         SfDateRangePicker(
                            monthCellStyle: DateRangePickerMonthCellStyle(
                            weekendTextStyle: TextStyle(
                                foreground: Paint()
                                  ..style = PaintingStyle.stroke
                                  ..color = PrimaryColor
                                  ..strokeWidth = 2,
                                shadows: [
                                  Shadow(
                                      color: PrimaryColor,
                                      blurRadius: 5,
                                      offset: Offset(0, 0))
                                ],
                                // color: Colors.white,       //I would like to set the text color to white
                                fontSize: 25,
                                fontWeight: FontWeight.bold),
                          ))

If I try using both the properties, this is the error I get

Assertion failed:
..\…\painting\text_style.dart:510
color == null || foreground == null
"Cannot provide both a color and a foreground\nThe color argument is just a shorthand for \"foreground: new Paint()..color = color\"."

Is there any workaround to this?

Answer 1

The only way to add a "border" to your text would be to put your Text widget inside a Stack and render 2 Text widget, one for the border and another one to render the text in the color you want and render the shadows.

Code Sample

class OutlinedText extends StatelessWidget {
  final String text;
  final Color primaryColor;

  const OutlinedText({
    required this.text,
    required this.primaryColor,
  });

  @override
  Widget build(BuildContext context) {
    final textStyle = TextStyle(
      shadows: [
        Shadow(
          color: primaryColor,
          blurRadius: 5,
          offset: const Offset(0, 0),
        )
      ],
      color: Colors.white,
      fontSize: 25,
      fontWeight: FontWeight.bold,
    );
    return Stack(
      alignment: Alignment.center,
      children: [
        Text(
          text,
          style: textStyle.copyWith(
            foreground: Paint()
              ..style = PaintingStyle.stroke
              ..color = primaryColor
              ..strokeWidth = 2,
            color: null,
          ),
        ),
        Text(text, style: textStyle),
      ],
    );
  }
}

OutlinedText(
  text: "Hello, World!",
  primaryColor: Colors.red,
);

Output

Try the full example on DartPad