Are there any possibilities to add an image on text in Flutter?

Question

I have been searching for possibilities to use an image as the background of Text widget in Flutter for very long, and I am tired of getting some HTML/CSS solutions on the internet.

cut-out text effect is little similar, but it's not the thing I really want.

Actually, I want something like this.

Is there any Dart Package that exists? Can anyone help me with an idea or a solution?

Joyance

Does this answer your question? Cut Out Text Effect In Flutter – Pollen

@YeasinSheikh Cut Out effect is like making it transparent, so the parent will be visible through it. I think my need is a bit different one from that – Joyance

What is your target platform? – Pollen

@YeasinSheikh Currently android and iOS, expecting it on the web too – Joyance

@Joyance check previous comment. – Eadie

@JeelBhatti awarded bounty for your answer – Joyance

Answer 1

Final Result

Code:

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

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {

@override
  Widget build(BuildContext context) {
    double w = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(
        title: const Text("Home Screen"),
      ),
      body: Center(
        child: FutureBuilder<ui.Image>(
          future: loadImage(const NetworkImage(
              'https://images.unsplash.com/photo-1559717642-b96cbea7bf56?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bGVhZnN8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60')),
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            return snapshot.hasData
                ? ShaderMask(
                    blendMode: BlendMode.srcATop,
                    shaderCallback: (bounds) => ImageShader(
                        snapshot.data,
                        TileMode.clamp,
                        TileMode.clamp,
                        Matrix4.identity().storage),
                    child: const Text("Geeks For Geeks",
                        style: TextStyle(fontSize: 42)),
                  )
                : Container();
          },
        ),
      ),
    );
  }
 Future<ui.Image> loadImage(ImageProvider image) async {
    final completer = Completer<ui.Image>();
    final stream = image.resolve(const ImageConfiguration());
    stream.addListener(
        ImageStreamListener((info, _) => completer.complete(info.image)));
    return completer.future;
  }
}

I think this answer is to solve your problem if not then tell me.

Eadie

Answer 2

Use "ShaderMask" Widget. For more get on to flutter.dev/shadermask

Timer