如何在Flutter中创建ImageShader？

Question

我正在玩ShaderMask，它接受两种类型Shaders

Gradient & ImageShader

我可以Gradient Shader这样创建：

LinearGradient(colors: <Color>[
                      Colors.deepOrange,
                      Colors.blue,
                      Colors.green,
                      Colors.amber,
                    ]).createShader(bound)

但我找不到创建的方法ImageShader。

当我尝试像这样创建它时：

ImageShader(
                    Image.network(
                      "https://product-image.juniqe-production.juniqe.com/media/catalog/product/cache/x800/401/62/401-62-101P.jpg",
                    ),
                    TileMode.mirror,
                    TileMode.mirror,
                    Float64List.fromList([1.0, 1, 0, 1, 1, 1, 1, 1, 0]));
              }

它说：参数类型widget/Image不能分配给参数类型ui/Painting/Image

我知道这两个图像是不同的，但我无法从小部件/图像创建 ui/绘画/图像。

还可能有一种直观的方式来创建ImageShader？

在 Flutter 中创建 ImageShader 的正确方法是什么？

Answer 1

我发现这是一个老问题，也许您已经找到了答案。但无论如何我都会回答。

问题是Image.network创建 Image 小部件（小部件库的一部分），但您需要作为 dart:ui 库一部分的Image对象。

问题中的图像示例：

import 'dart:async';
import 'dart:ui' as ui;

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: SafeArea(
          child: MyHomePage(),
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Future<ui.Image> loadUiImage(String url) async {
    final response = await http.get(url);
    response.bodyBytes;
    final completer = Completer<ui.Image>();
    ui.decodeImageFromList(response.bodyBytes, completer.complete);
    return completer.future;
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<ui.Image>(
        future: loadUiImage(
            'https://product-image.juniqe-production.juniqe.com/media/catalog/product/cache/x800/401/62/401-62-101P.jpg'),
        builder: (context, img) {
          return img.hasData
              ? ShaderMask(
                  blendMode: BlendMode.colorDodge,
                  shaderCallback: (bounds) => ImageShader(
                    img.data,
                    TileMode.clamp,
                    TileMode.clamp,
                    Matrix4.identity().storage,
                  ),
                  child: Container(
                    color: Colors.red,
                    height: 600,
                    width: 600,
                    child: Text('loaded'),
                  ),
                )
              : Text('loading');
        });
  }
}