Flutter 是否有可能在文本上添加图像？

Question

我一直在寻找使用图像作为背景的可能性Text我长期以来

文字剪切效果有点相似，但这不是我真正想要的东西。

事实上，我想要这样的东西。

是否存在任何 Dart 包？谁能帮我提供一个想法或解决方案？

Answer 1

最后结果

代码：

import 'dart:async';
import 'package:flutter/material.dart';
import 'dart:ui' as ui;

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {

@override
  Widget build(BuildContext context) {
    double w = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(
        title: const Text("Home Screen"),
      ),
      body: Center(
        child: FutureBuilder<ui.Image>(
          future: loadImage(const NetworkImage(
              'https://images.unsplash.com/photo-1559717642-b96cbea7bf56?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bGVhZnN8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60')),
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            return snapshot.hasData
                ? ShaderMask(
                    blendMode: BlendMode.srcATop,
                    shaderCallback: (bounds) => ImageShader(
                        snapshot.data,
                        TileMode.clamp,
                        TileMode.clamp,
                        Matrix4.identity().storage),
                    child: const Text("Geeks For Geeks",
                        style: TextStyle(fontSize: 42)),
                  )
                : Container();
          },
        ),
      ),
    );
  }
 Future<ui.Image> loadImage(ImageProvider image) async {
    final completer = Completer<ui.Image>();
    final stream = image.resolve(const ImageConfiguration());
    stream.addListener(
        ImageStreamListener((info, _) => completer.complete(info.image)));
    return completer.future;
  }
}

我认为这个答案可以解决您的问题，如果没有，请告诉我。