Как я могу добавить тень к тексту в flutter?
Я искал опцию shadow в TextStyle, но не нашел. Поэтому я спрашиваю: как я могу добавить тень к тексту в flutter? Возможно ли это? Пример:
new Text(
"asd"
styel: new TextStyle(
//add shadow?
));
3 ответа:
Flutter пока не обеспечивает встроенную поддержку текстовых теней, но если вы не хотите ждать, пока проблема 3402 будет исправлена, можно подделать тень с помощью
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, ), ], ), ); } }
В настоящее время это невозможно, но это будет когда-нибудь скоро.
Вы можете следить за этим вопросом: https://github.com/flutter/flutter/issues/3402
Развивая ответ Колина Джексона. Это будет учитывать различные свойства TextAlign.
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) { AlignmentDirectional _align; switch (textAlign) { case TextAlign.justify: case TextAlign.center: _align = AlignmentDirectional.center; break; case TextAlign.end: case TextAlign.right: _align = AlignmentDirectional.centerEnd; break; case TextAlign.start: case TextAlign.left: _align = AlignmentDirectional.centerStart; break; default: _align = AlignmentDirectional.center; } return new ClipRect( child: new Stack( alignment: _align, children: [ Text(data, style: style.copyWith(color: Colors.black.withOpacity(0.5)), textAlign: textAlign, textDirection: textDirection, softWrap: softWrap, overflow: overflow, textScaleFactor: textScaleFactor + 0.03, maxLines: maxLines), new Text( data, style: style, textAlign: textAlign, textDirection: textDirection, softWrap: softWrap, overflow: overflow, textScaleFactor: textScaleFactor, maxLines: maxLines, ), ], ), ); } }
Затем всякий раз, когда вы хотите использовать это, просто импортируйте этот файл в верхней части и замените
Text(
) наShadowText()
виджет.