Is there a way to show image inside text in flutter

问题

I have this code to show an image inside text in flutter but when I'm using ImageShader. I'm getting this error The method 'asset' isn't defined for the type 'Image'. Try correcting the name to the name of an existing method, or defining a method named 'asset'

I have also referred to this Repo. This repo link was given in previously asked question on StackOverflow about ImageShader.
I know "dart:ui" doesn't contain any asset method. So I used Image.asset but when I used this method I got this error.

The argument type 'Image (where Image is defined in /Users/username/Developement/flutter/packages/flutter/lib/src/widgets/image.dart)' can't be assigned to the parameter type 'Image (where Image is defined in /Users/username/Developement/flutter/bin/cache/pkg/sky_engine/lib/ui/painting.dart)'

Link to the similar question asked on stackoverflow

 import 'dart:ui' as ui;    
    class _MyAppState extends State<MyApp> {
  Float64List matrix4 = new Matrix4.identity().storage;
  ui.Image img;

  Future<ui.Image> getImage() async{
    img = await ui.Image.asset("assets/images/ob_girl_cropped.png"); // This Line Is showing error. Please Help.
  }
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: Center(
          child: FutureBuilder(
            future: getImage(),
            builder: (context, snapshot)
            {
              if(snapshot.hasData){
                return Text(
                  'Greetings, planet!',
                  style: TextStyle(
                    fontSize: 40,
                    foreground: Paint()
                      ..shader = ImageShader(
                          img,
                          TileMode.clamp,
                          TileMode.clamp,
                          matrix4),
                  ),
                );
              }
              else{
               return CircularProgressIndicator();
              }
            },
          ),
        ),
      ),
    );
  }
}

回答1:

Two problems:

The way you load image, which I wrote a loadImageFromFile helper funtion
You should not put getImage() directly in to future field, because flutter will create a new future every time you rebuild the page (so load the image multiple times)

Full Code:

import 'dart:typed_data';
import 'package:flutter/services.dart' show rootBundle;

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Float64List matrix4 = new Matrix4.identity().storage;
  Future<ui.Image> imgFuture;

  // New helper function
  Future<ui.Image> loadImageFromFile(String path) async {
    var fileData = Uint8List.sublistView(await rootBundle.load(path));
    return await decodeImageFromList(fileData);
  }

  @override
  void initState() {
    imgFuture = loadImageFromFile("assets/images/ob_girl_cropped.png"); // Works now
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: Center(
          child: FutureBuilder(
            future: imgFuture,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Text(
                  'Greetings, planet!',
                  style: TextStyle(
                    fontSize: 40,
                    foreground: Paint()..shader = ImageShader(snapshot.data, TileMode.clamp, TileMode.clamp, matrix4),
                  ),
                );
              } else {
                return CircularProgressIndicator();
              }
            },
          ),
        ),
      ),
    );
  }
}

来源：https://stackoverflow.com/questions/62937882/is-there-a-way-to-show-image-inside-text-in-flutter

标签

image

Flutter

text

mask

clip