blending.dart

import 'dart:async';
import 'dart:typed_data';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'MyApp Demo',
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Icon(),
      ),
    );
  }
}

class Icon extends StatefulWidget {
  const Icon({super.key});

  @override
  State<Icon> createState() => _IconState();
}

class _IconState extends State<Icon> {
  final String url =
      'https://firebasestorage.googleapis.com/v0/b/codeless-dev.appspot.com/o/projects%2FvdIXkgYL4eGX3Hoy2tc9%2F0f04672e4e046c13b73f5dfdf5b0d3be57cc48ee?alt=media&token=d1451e7a-f324-40cf-b3c8-63fe4c749ae6';
  late Future<Shader> _shader;

  @override
  void initState() {
    super.initState();
    _shader = _loadShader();
  }

  Future<Shader> _loadShader() async {
    final completer = Completer<ImageInfo>();

    ResizeImage(
      NetworkImage(url),
      width: 130,
      height: 130,
    ).resolve(const ImageConfiguration()).addListener(
          ImageStreamListener((info, _) => completer.complete(info)),
        );

    final info = await completer.future;
    return ImageShader(
      info.image,
      TileMode.clamp,
      TileMode.clamp,
      Float64List.fromList(Matrix4.identity().storage),
      filterQuality: FilterQuality.high,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: double.infinity,
      alignment: Alignment.center,
      child: FutureBuilder<Shader>(
        future: _shader,
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            return const CircularProgressIndicator();
          }
          return ShaderMask(
            shaderCallback: (Rect bounds) => snapshot.data!,
            blendMode: BlendMode.dstIn, // This cuts out the shape of the image like a cookie-cutter
            child: Image.network(
              'https://firebasestorage.googleapis.com/v0/b/codeless-dev.appspot.com/o/projects%2FvdIXkgYL4eGX3Hoy2tc9%2F0f04672e4e046c13b73f5dfdf5b0d3be57cc48ee?alt=media&token=d1451e7a-f324-40cf-b3c8-63fe4c749ae6',
              width: 130,
              height: 130,
              color: const Color(0xFFE85F34),
              colorBlendMode: BlendMode.hardLight,
            ),
          );
        },
      ),
    );
  }
}