Flutter现在提供了一种无需任何变通方法即可完成此操作的方法,如第3402期和以下[GaryGary的回答所述]。
文本阴影现在的财产
TextStyle作为这次提交
要启用文字阴影,请确保您使用的是先进的最新版本flutter (的
$ 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。
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小部件彼此堆叠在一起即可。
像这样:
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, ), ], ), ); }}


