有没有一种方法可以在颤动中显示文本内的图像 [英] Is there a way to show image inside text in flutter
问题描述
我有这段代码可以在文本内部显示图像,但是当我使用ImageShader时.我收到这个错误未为类型图像"定义方法资产".尝试将名称更正为现有方法的名称,或定义一个名为"asset"的方法
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'
我还提到了回购.此仓库链接是在有关ImageShader的StackOverflow上先前提出的问题中给出的.
我知道"dart:ui"不包含任何资产方法.所以我使用了Image.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.
参数类型'Image(其中Image在/Users/username/Development/flutter/packages/flutter/lib/src/widgets/image.dart)'不能分配给参数类型'Image(其中定义了Image在/Users/username/Development/flutter/bin/cache/pkg/sky_engine/lib/ui/painting.dart)'
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)'
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();
}
},
),
),
),
);
}
}
推荐答案
两个问题:
- 加载图像的方式,我编写了
loadImageFromFile
辅助功能 - 您不应将
getImage()
直接放在future
字段中,因为每次重新构建页面时flutter都会创建一个新的未来(因此,多次加载图像)
- The way you load image, which I wrote a
loadImageFromFile
helper funtion - You should not put
getImage()
directly in tofuture
field, because flutter will create a new future every time you rebuild the page (so load the image multiple times)
完整代码:
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();
}
},
),
),
),
);
}
}
这篇关于有没有一种方法可以在颤动中显示文本内的图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!