我在TextStyle中搜索了阴影选项,但没有找到它。所以我问:如何在抖动文本中添加阴影?可能吗?例:
new Text( "asd" style: new TextStyle( //add shadow? ));
Flutter现在提供了一种无需任何变通方法即可完成此操作的方法,如第3402期和以下[GaryGary的回答所述]。
文本阴影现在的财产TextStyle作为这次提交
TextStyle
要启用文字阴影,请确保您使用的是先进的最新版本flutter (的$ flutterupgrade),并提供一个List<Shadow>到TextStyle.shadows:
$ flutterupgrade
List<Shadow>
TextStyle.shadows
import 'dart:ui'; ... Text( 'Hello, world!', style: TextStyle( shadows: <Shadow>[ Shadow( offset: Offset(10.0, 10.0), blurRadius: 3.0, color: Color.fromARGB(255, 0, 0, 0), ), Shadow( offset: Offset(10.0, 10.0), blurRadius: 8.0, color: Color.fromARGB(125, 0, 0, 255), ), ], ), ), ...
请记住,阴影将按照提供的顺序绘制。
虽然这可以进入更稳定的渠道,但可以使用伪造阴影BackdropFilter。
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, ), ), ), ); } }
或者,如果您不关心模糊,则只需将Stack一些半透明的Text小部件彼此堆叠在一起即可。
Stack
Text
像这样:
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, ), ], ), ); } }