How to create ImageShader in Flutter?

Question

I was playing with ShaderMask and it accepts two types of Shaders

Gradient & ImageShader

I can create Gradient Shader like this :

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

but I couldn't find a way to create ImageShader.

When I try to create it like this :

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]));
              }

it says : Argument type widget/Image can't be assigned to parameter type ui/Painting/Image

I know these two Images are different but I couldn't create ui/Painting/Image from widget/Image.

Also there might be an intuitive way to create ImageShader?

What is the right way to crate ImageShader in Flutter?

Answer 1

I see that it's an old question, and probably you already find the answer. But I'll answer it anyway.

The problem is that Image.network creates Image widget (part of widget library) but you need Image object which is part of dart:ui library.

Example with the image from the question:

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');
        });
  }
}