如何在抖动中为文本添加阴影？ [英] How to add shadow to the text in flutter?

问题描述

我在TextStyle中搜索了阴影选项，但没有找到。所以我问：如何在抖动文本中添加阴影？可能吗？
示例：

  new Text（
 asd 
样式：new TextStyle（
 //添加阴影？
））; 
  

解决方案

Flutter现在提供了一种方法没有任何变通方法，如

 导入'dart：ui'作为ui; 
导入的 package：flutter / material.dart； 
 
 void main（）{
 runApp（new MaterialApp（
 home：new MyApp（），
））; 
} 
 
类ShadowText扩展了StatelessWidget {
 ShadowText（this.data，{this.style}）：assert（data！= null）; 
 
最终字符串数据； 
最终的TextStyle样式； 
 
小部件构建（BuildContext上下文）{
 return new ClipRect（
 child：new Stack（
 children：[
 new Positioned（
顶部：2.0，
左侧：2.0，
子级：new Text（
 data，
 style：style.copyWith（color：Colors.black.withOpacity（0.5）），
），
），
 new BackdropFilter（
 filter：new ui.ImageFilter.blur（sigmaX：2.0，sigmaY：2.0），
 child：new Text（data ，样式：style），
），
]，
），
）； 
} 
} 
 
类MyApp扩展了StatelessWidget {
 @override 
 Widget build（BuildContext context）{
 return new Scaffold（
正文：新Container（
子：new Center（
子：new ShadowText（
'Hello world！'，
 style：Theme.of（context）.textTheme。 display3，
），
），
），
）; 
} 
} 
  

或者，如果您不关心模糊，只需用一些不透明的 Text 小部件制成一个 Stack 即可。

就像这样：

  import'package：flutter / material.dart'; 
 
类ShadowText扩展了StatelessWidget {
 
最终的String数据； 
最终的TextStyle样式； 
最终TextAlign textAlign; 
最终TextDirection textDirection; 
最终bool softWrap； 
最终TextOverflow溢出； 
 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）; 
 
小部件构建（BuildContext上下文）{
 return new ClipRect（
 child：new Stack（
 children：[
 new Positioned（
顶部：2.0，
左侧：2.0，
子级：new Text（
 data，
 style：style.copyWith（color：Colors.black.withOpacity（0.5）），
 textAlign：textAlign，
 textDirection：textDirection，
 softWrap：softWrap，
溢出：溢出，
 textScaleFactor：textScaleFactor，
 maxLines：maxLines，
），
），
新Text（
数据，
样式：style，
 textAlign：textAlign，
 textDirection：textDirection，
 softWrap：softWrap，
溢出：溢出，
 textScaleFactor：textScaleFactor，
 maxLines：maxLines，
） ，
]，
），
）； 
} 
} 
  

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(
"asd"
style: new TextStyle( 
//add shadow?
));

解决方案

Flutter now provides a way to do this without any work-arounds, as documented in issue 3402 and Gary Qian's answer below.

While this makes its way into the more stable channels, it's possible to fake a shadow using BackdropFilter.

import 'dart:ui' as ui;
import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    home: new MyApp(),
  ));
}

class ShadowText extends StatelessWidget {
  ShadowText(this.data, { this.style }) : assert(data != null);

  final String data;
  final TextStyle style;

  Widget build(BuildContext context) {
    return new ClipRect(
      child: new Stack(
        children: [
          new Positioned(
            top: 2.0,
            left: 2.0,
            child: new Text(
              data,
              style: style.copyWith(color: Colors.black.withOpacity(0.5)),
            ),
          ),
          new BackdropFilter(
            filter: new ui.ImageFilter.blur(sigmaX: 2.0, sigmaY: 2.0),
            child: new Text(data, style: style),
          ),
        ],
      ),
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Container(
        child: new Center(
          child: new ShadowText(
            'Hello world!',
            style: Theme.of(context).textTheme.display3,
          ),
        ),
      ),
    );
  }
}

Or if you don't care about the blur, just make a Stack with a few some semitransparent Text widgets stacked not quite precisely on top of each other.

Like this:

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) {
    return new ClipRect(
      child: new Stack(
        children: [
          new Positioned(
            top: 2.0,
            left: 2.0,
            child: new Text(
              data,
              style: style.copyWith(color: Colors.black.withOpacity(0.5)),
              textAlign: textAlign,
              textDirection: textDirection,
              softWrap: softWrap,
              overflow: overflow,
              textScaleFactor: textScaleFactor,
              maxLines: maxLines,
            ),
          ),
          new Text(
            data,
            style: style,
            textAlign: textAlign,
            textDirection: textDirection,
            softWrap: softWrap,
            overflow: overflow,
            textScaleFactor: textScaleFactor,
            maxLines: maxLines,
          ),
        ],
      ),
    );
  }
}

这篇关于如何在抖动中为文本添加阴影？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！