我在TextStyle中搜索阴影选项,但没有找到.所以我问:怎样才能在Flutter 中给文字添加阴影呢?有可能吗? 示例:
new Text(
"asd"
style: new TextStyle(
//add shadow?
));
我在TextStyle中搜索阴影选项,但没有找到.所以我问:怎样才能在Flutter 中给文字添加阴影呢?有可能吗? 示例:
new Text(
"asd"
style: new TextStyle(
//add shadow?
));
Flutter now provides a way to do this without any work-arounds, as documented in 100 and 101.
虽然这使得它可以进入更稳定的通道,但也可以使用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,
),
),
),
);
}
}
或者,如果你不在乎模糊度,只需要把一些半透明的Text
小部件堆叠在彼此不太精确的顶部,做成Stack
.
这样地:
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,
),
],
),
);
}
}