问题描述
我正在使用Flutter开发一款平板电脑应用,并且我有一个小部件以圆形装饰显示用户头像。为此,我使用网络图像来显示从服务器接收到的图像。但是,存在离线模式的情况。为此,我使用 path_provider 包将用户信息和头像作为 png 文件存储在外部存储中。用户可以看到他的信息,但是到目前为止,我还没有找到显示这种圆形装饰中的化身的方法。如果有人可以帮助我,我将非常感激。以下是我的Widget状态代码,在 build 函数的第一种情况下,您可以找到我的试用版和注释掉的代码:
class _UserCardState extends State<UserCard> {
int id;
String title;
String name;
String surname;
String password;
String imageDIR;
var img;
@override
void initState() {
this.id = widget.id;
this.title = widget.title;
this.name = widget.name;
this.surname = widget.surname;
this.password = widget.password;
this.imageDIR = widget.imageDIR;
super.initState();
}
//This is unnecessary
@override
void didUpdateWidget(UserCard oldWidget) {
super.didUpdateWidget(oldWidget);
}
@override
Widget build(BuildContext context) {
if(!vars.loadFromTabletStorage) {
saveImage();
img = NetworkImage(vars.globalURL + 'api/getUserAvatar/' + id.toString());
}
/*else {
Future<FileImage> imageData = getLocalImage();
img = imageData;//Image.file(File(imageData.toString()),width: vars.userPictureWidth,height: vars.userPictureHeigth);
}*/
print('CONNECTION STATUS ::: ' + (img == null).toString());
//Example: '\nDAVID R.\n'
String formattednameSurname = '\n' +
this.name.toupperCase() +
' ' +
this.surname.toString().substring(0,1).toupperCase() +
'.\n';
double imageWidth = (this.imageDIR.contains('WorkerSmall.png'))
? vars.userDefaultWorkerPictureWidth
: vars.userPictureWidth;
return Expanded(
child: Container(
color: vars.defaultBackgroundColor,width: vars.userContainerWidth,height: vars.userContainerHeigth,child: Column(
children: <Widget>[
Material(
color: Color.fromARGB(255,246,246),child: InkWell(
child: CircleAvatar(
radius: imageWidth + 3,backgroundColor: Colors.grey,//Color(0xFFFDCF09),child: CircleAvatar(
radius: imageWidth,backgroundImage: img,),Text(
formattednameSurname,style: new TextStyle(
fontSize: 14.0,color: Colors.black,fontWeight: FontWeight.bold,Text(
title.toupperCase() /*+'\n\n\n'*/,textAlign: TextAlign.center,color: Colors.grey,],);
}
Future<Uint8List> _readLocallyImageFile() async {
// Retrieve "External Storage Directory" for Android and "NSApplicationSupportDirectory" for iOS
Directory directory = Platform.isAndroid
? await getExternalStorageDirectory()
: await getApplicationSupportDirectory();
print('>>>>>>>>>>>> ' + directory.path);
// Create a new file. You can create any kind of file like txt,doc,json etc.
File file =
await File('${directory.path}/' + (id-1).toString() + '.png').create();
// Read the file content
Uint8List fileContent = await file.readAsBytes();
print("AVATAR FILE CONTENTS:\n$fileContent\n========================================");
return fileContent;
}
Future<FileImage> getLocalImage() async{
Directory directory = Platform.isAndroid
? await getExternalStorageDirectory()
: await getApplicationSupportDirectory();
File file =
await File("${directory.path}/" + id.toString() + '.png').create();
return FileImage(file);
}
Future<void> saveImage() async {
// Retrieve "External Storage Directory" for Android and "NSApplicationSupportDirectory" for iOS
Directory directory = Platform.isAndroid
? await getExternalStorageDirectory()
: await getApplicationSupportDirectory();
var response =
await http.get(vars.globalURL + 'api/getUserAvatar/' + id.toString());
print(response.toString());
File file =
await File("${directory.path}/" + id.toString() + '.png').create();
file.writeAsBytesSync(response.bodyBytes);
}
}
解决方法
您可以为此使用CachedNetworkImage。
pacakge:cached_network_image