有没有一种方法可以在颤动中显示文本内的图像

问题描述：

我有这段代码可以在文本内部显示图像，但是当我使用ImageShader时.我收到这个错误未为类型图像"定义方法资产".尝试将名称更正为现有方法的名称，或定义一个名为"asset"的方法

I have this code to show an image inside text in flutter but when I'm using ImageShader. I'm getting this error The method 'asset' isn't defined for the type 'Image'. Try correcting the name to the name of an existing method, or defining a method named 'asset'

我还提到了回购.此仓库链接是在有关ImageShader的*上先前提出的问题中给出的.
我知道"dart:ui"不包含任何资产方法.所以我使用了Image.asset，但是当我使用这种方法时，出现了这个错误.

I have also referred to this Repo. This repo link was given in previously asked question on * about ImageShader.
I know "dart:ui" doesn't contain any asset method. So I used Image.asset but when I used this method I got this error.

参数类型'Image(其中Image在/Users/username/Development/flutter/packages/flutter/lib/src/widgets/image.dart)'不能分配给参数类型'Image(其中定义了Image在/Users/username/Development/flutter/bin/cache/pkg/sky_engine/lib/ui/painting.dart)'

The argument type 'Image (where Image is defined in /Users/username/Developement/flutter/packages/flutter/lib/src/widgets/image.dart)' can't be assigned to the parameter type 'Image (where Image is defined in /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();
              }
            },
          ),
        ),
      ),
    );
  }
}

答

两个问题:

加载图像的方式，我编写了 loadImageFromFile 辅助功能
您不应将 getImage()直接放在 future 字段中，因为每次重新构建页面时flutter都会创建一个新的未来(因此，多次加载图像)

The way you load image, which I wrote a loadImageFromFile helper funtion
You should not put getImage() directly in to future field, because flutter will create a new future every time you rebuild the page (so load the image multiple times)

完整代码:

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

有没有一种方法可以在颤动中显示文本内的图像

相关推荐