текстура (изображение) на тексте во флаттере - PullRequest
Новая
       7

текстура (изображение) на тексте во флаттере

0 голосов
/ 30 октября 2018

есть ли способ поместить изображение (текстуру) в текст во флаттере?

как на изображении, показанном ниже

enter image description here

1 Ответ

0 голосов
/ 30 октября 2018

операция рисования изображения на тексте является асинхронной, потому что она ожидает загрузки изображения и устанавливает его в шейдер переднего плана TextStyle. 

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

  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 (текстурированный текст) как обычный виджет.

A полный пример также доступен в этом репо .

...