Как добавить тени к тексту во флаттере

Question

Как добавить тени к тексту.

Под TextStyle также имеется свойство shadows .

Будет полезно, если выМожно включить пример для его реализации

Answer 1

Я добавил два простых 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 2

Вот простой пример, заимствованный из здесь :

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 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

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