如何在 Flutter 中为文本添加阴影

Posted 2023-02-23

【中文标题】如何在 Flutter 中为文本添加阴影

【英文标题】：How to add shadows to Text in Flutter

【发布时间】：2019-09-07 07:34:36

【问题描述】：

如何为文本添加阴影。

TextStyle 下还有一个 shadows 属性。

如果您可以包含其实施示例，将会很有帮助

【参考方案1】：

这是一个简单的例子，借用here:

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),
      ),
    ],
  ),
),

【讨论】：

谢谢，它的工作，但我不明白为什么它的阴影列表，请你解释一下

是应用多种效果。所有这些都是按特定顺序绘制的。

例如：左侧模糊较少的红色阴影以及右侧模糊较多的灰色阴影

好的，所以列表中的第一个将首先呈现，然后列表中的下一个将呈现在其上方，对吗？

【参考方案2】：

我添加了两个简单的Shadow 来展示Offset 的效果和模糊效果

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(home: SO());
  


class SO extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      backgroundColor: Colors.deepOrange.shade400,
      appBar: AppBar(),
      body: Center(
        child: Text(
          "A  B  C",
          style: TextStyle(
              fontSize: 80,
              shadows: [Shadow(color: Colors.blue.shade100, offset: Offset(-10, -10)), Shadow(color: Colors.black, blurRadius: 8, offset: Offset(10, 10))]),
        ),
      ),
    );
  

给了

【参考方案3】：

一个影子：

style: TextStyle(
    shadows: [
        Shadow(
            blurRadius: 10.0,
            color: Colors.blue,
            offset: Offset(5.0, 5.0),
            ),
        ],
    ),

多重阴影：

style: TextStyle(
    fontSize: 60,
    shadows: [
        Shadow(
            blurRadius: 10.0,
            color: Colors.blue,
            offset: Offset(5.0, 5.0),
            ),
        Shadow(
            color: Colors.green,
            blurRadius: 10.0,
            offset: Offset(-10.0, 5.0),
            ),
        ],
    ),

ohalliday/flutter-shadows source code

【参考方案4】：

试试下面的解决方案

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 Flutter!',
            style: Theme.of(context).textTheme.display3,
          ),
        ),
      ),
    );