颤动中的文本上的纹理(图像) [英] texture (image) on text in flutter

问题描述

是否可以在Flutter中将图像(纹理)放在文本上?

is there a way to put image (texture) on a text in Flutter?

如下图所示

推荐答案

在文本上绘制图像的操作是异步的，因为它等待图像被加载并在TextStyle的前景着色器上进行设置.

the operation of drawing image on text is asynchronous, because it waits for the image to be loaded and set it on the TextStyle's foreground shader.

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

String textureName = "images/texture.jpg";
 Future<TextStyle> textureText(TextStyle textStyle,
    ) async {
  ui.Image img;
  img = await ImageLoader.load(textureName);
  Float64List matrix4 = new Matrix4.identity().storage;
  return textStyle.copyWith(
      foreground: Paint1()
        ..shader = ImageShader(img, TileMode.mirror, TileMode.mirror, matrix4));
}

在下面，FutureBuilder调用textureText并使用返回的TextStyle

below, FutureBuilder calls textureText and use the returned TextStyle

  Widget tt = new FutureBuilder<TextStyle>(
    future: texturedText(
        TextStyle(fontSize: 70.0,), // a Future<String> or null
    builder: (BuildContext context, AsyncSnapshot<TextStyle> snapshot) {
      switch (snapshot.connectionState) {
        case ConnectionState.waiting:
          return new Text('Awaiting result...');
        default:
          if (snapshot.hasError)
            return new Text('Error: ${snapshot.error}');
          else
            return new Text(
              'TEXTURE',
              style: snapshot.data,
            );
      }
    },
  );

您可以像普通的小部件一样使用tt(texturedText).

you can use tt (texturedText) like a normal widget.

完整示例在此存储库中可用.

这篇关于颤动中的文本上的纹理(图像)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！