How to add shadow to the text in flutter?

后端 未结 4 1907
鱼传尺愫
鱼传尺愫 2021-01-30 21:47

I searched for the shadow option in TextStyle, but I didn\'t find it. So I ask: how can I add shadow to the text in flutter? Is it possible? Example:

new Text(
\         


        
4条回答
  •  有刺的猬
    2021-01-30 22:16

    Expanding on Collin Jackson's answer. This will account for the various TextAlign properties.

    import 'package:flutter/material.dart';
    
    class ShadowText extends StatelessWidget {
      final String data;
      final TextStyle style;
      final TextAlign textAlign;
      final TextDirection textDirection;
      final bool softWrap;
      final TextOverflow overflow;
      final double textScaleFactor;
      final int maxLines;
    
      const ShadowText(
        this.data, {
        Key key,
        this.style,
        this.textAlign,
        this.textDirection,
        this.softWrap,
        this.overflow,
        this.textScaleFactor,
        this.maxLines,
      }) : assert(data != null);
    
      Widget build(BuildContext context) {
        AlignmentDirectional _align;
        switch (textAlign) {
          case TextAlign.justify:
          case TextAlign.center:
            _align = AlignmentDirectional.center;
            break;
          case TextAlign.end:
          case TextAlign.right:
            _align = AlignmentDirectional.centerEnd;
            break;
          case TextAlign.start:
          case TextAlign.left:
            _align = AlignmentDirectional.centerStart;
            break;
          default:
            _align = AlignmentDirectional.center;
        }
        return new ClipRect(
          child: new Stack(
            alignment: _align,
            children: [
              Text(data,
                  style: style.copyWith(color: Colors.black.withOpacity(0.5)),
                  textAlign: textAlign,
                  textDirection: textDirection,
                  softWrap: softWrap,
                  overflow: overflow,
                  textScaleFactor: textScaleFactor + 0.03,
                  maxLines: maxLines),
              new Text(
                data,
                style: style,
                textAlign: textAlign,
                textDirection: textDirection,
                softWrap: softWrap,
                overflow: overflow,
                textScaleFactor: textScaleFactor,
                maxLines: maxLines,
              ),
            ],
          ),
        );
      }
    }
    

    Then whenever you want to use this just import this file at the top and replace the Text() with ShadowText() widget.

提交回复
热议问题