我在TextStyle中搜索了阴影选项,但我没有找到.所以我问：如何在颤动的文本中添加阴影？可能吗？
例：
例：
new Text( "asd" styel: new TextStyle( //add shadow? ));
解决方法
如
issue 3402和
Gary Qian’s answer below所述,Flutter现在提供了一种无需任何解决方法的方法.
虽然这可以进入更稳定的通道,但可以使用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,);
}
}
或者,如果你不关心模糊,只需制作一个带有一些半透明文本小部件的堆栈,这些小部件堆叠不完全相互叠加.
像这样：
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,textAlign: textAlign,textDirection: textDirection,softWrap: softWrap,overflow: overflow,textScaleFactor: textScaleFactor,maxLines: maxLines,new Text(
data,style: style,);
}
}
