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?
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.