有没有办法在颤动的文本中显示图像答案

【问题标题】：Is there a way to show image inside text in flutter有没有办法在颤动的文本中显示图像
【发布时间】：2020-11-06 07:26:46
【问题描述】：

我有这段代码可以在颤动的文本中显示图像，但是当我使用 ImageShader 时。我收到此错误 没有为“图像”类型定义“资产”方法。尝试将名称更正为现有方法的名称，或定义名为“asset”的方法

我也提到了这个Repo。这个 repo 链接是在 StackOverflow 上关于 ImageShader 的先前提出的问题中给出的。
我知道“dart:ui”不包含任何资产方法。所以我使用了 Image.asset 但是当我使用这个方法时，我得到了这个错误。

参数类型'Image（其中Image定义在 /Users/用户名/开发/flutter/packages/flutter/lib/src/widgets/image.dart)' 不能分配给参数类型“图像”（其中定义了图像在 /Users/username/Developement/flutter/bin/cache/pkg/sky_engine/lib/ui/painting.dart)'

 import 'dart:ui' as ui;    
    class _MyAppState extends State<MyApp> {
  Float64List matrix4 = new Matrix4.identity().storage;
  ui.Image img;

  Future<ui.Image> getImage() async{
    img = await ui.Image.asset("assets/images/ob_girl_cropped.png"); // This Line Is showing error. Please Help.
  }
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: Center(
          child: FutureBuilder(
            future: getImage(),
            builder: (context, snapshot)
            {
              if(snapshot.hasData){
                return Text(
                  'Greetings, planet!',
                  style: TextStyle(
                    fontSize: 40,
                    foreground: Paint()
                      ..shader = ImageShader(
                          img,
                          TileMode.clamp,
                          TileMode.clamp,
                          matrix4),
                  ),
                );
              }
              else{
               return CircularProgressIndicator();
              }
            },
          ),
        ),
      ),
    );
  }
}

【问题讨论】：

您链接的答案使用img = await ImageLoader.load(...);，而不是img = await ui.Image.asset(...)
该链接中的 ImageLoader 代码错误。甚至文档也不包含任何细节。

标签： image flutter text mask clip

【解决方案1】：

两个问题：

加载图片的方式，我写了一个loadImageFromFile辅助函数
你不应该把getImage()直接放到future字段中，因为每次重建页面时flutter都会创造一个新的未来（所以多次加载图像）

完整代码：

import 'dart:typed_data';
import 'package:flutter/services.dart' show rootBundle;

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Float64List matrix4 = new Matrix4.identity().storage;
  Future<ui.Image> imgFuture;

  // New helper function
  Future<ui.Image> loadImageFromFile(String path) async {
    var fileData = Uint8List.sublistView(await rootBundle.load(path));
    return await decodeImageFromList(fileData);
  }

  @override
  void initState() {
    imgFuture = loadImageFromFile("assets/images/ob_girl_cropped.png"); // Works now
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: Center(
          child: FutureBuilder(
            future: imgFuture,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Text(
                  'Greetings, planet!',
                  style: TextStyle(
                    fontSize: 40,
                    foreground: Paint()..shader = ImageShader(snapshot.data, TileMode.clamp, TileMode.clamp, matrix4),
                  ),
                );
              } else {
                return CircularProgressIndicator();
              }
            },
          ),
        ),
      ),
    );
  }
}

【讨论】：