Question

如何在文本上添加阴影。

在TextStyle下，还有一个阴影属性。

如果您可以提供实施示例，将会很有帮助

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

Answer 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))]),
        ),
      ),
    );
  }
}

给出

Answer 3

尝试以下解决方案

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,
          ),
        ),
      ),
    );
  }
}

Answer 4

一个影子：

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

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

4 个答案: