颤振默认图像未加载

Question

扑朔迷离。在个人项目上工作。卡在与显示图像有关的一个小问题上。这是我用来显示图像的小部件代码。

import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:cached_network_image/cached_network_image.dart';

class UserProfile extends StatefulWidget {
  @override
  UserProfileState createState() => new UserProfileState();
}

class UserProfileState extends State<UserProfile> {

  Future<SharedPreferences> _prefs = SharedPreferences.getInstance();
  Map userDetails = {};
  String profileImgPath;

  @override
  void initState() {
    super.initState();
    getUserDetails();
  }


  Future<Null> getUserDetails() async {
    try {
      final SharedPreferences prefs = await _prefs;
      this.userDetails = json.decode(prefs.getString('user'));

      if (prefs.getString('user') != null) {
        if (this.userDetails['isLoggedIn']) {
          setState(() {
            this.profileImgPath = this.userDetails['profileImg'];
            print('Shared preference userDetailsss : ${this.userDetails}');
          });
        }
      } else {
        print('Shared preference has no data');
      }
    } catch (e) {
      print('Exception caught at getUserDetails method');
      print(e.toString());
    }
  }

  @override
  Widget build(BuildContext context) {
    Widget profileImage = new Container(
      margin: const EdgeInsets.only(top: 20.0),
      child: new Row(
        children: <Widget>[
        new Expanded(
          child: new Column(
            children: <Widget>[
              new CircleAvatar(
                backgroundImage: (this.profileImgPath == null) ? new AssetImage('images/user-avatar.png') : new CachedNetworkImageProvider(this.profileImgPath),
                radius:50.0,
              )
            ],
          )
        )
        ],
      )
    );

    return new Scaffold(
      appBar: new AppBar(title: new Text("Profile"), backgroundColor: const Color(0xFF009688)),
      body: new ListView(
        children: <Widget>[
          profileImage,
        ],
      ),
    );
  } 
}  

我想做的是，user-avatar.png只要CachedNetworkImageProvider不显示原始图像，就显示默认图像。但是，它的行为有所不同。

每当我打开页面时-我都会得到一个空白的蓝色框，然后突然出现原始图像CachedNetworkImageProvider。

无法理解正在发生的事情。

---

@Jonah Williams供您参考-

Answer 1

CachedNetworkImage不能用于backgroundImage属性，因为它不会扩展ImageProvider。您可以创建CircleAvatar如下所述的自定义CachedNetworkImage程序来使用该程序包：

class CustomCircleAvatar extends StatelessWidget {

  final int animationDuration;
  final double radius;
  final String imagePath;

  const CustomCircleAvatar({
    Key key, 
    this.animationDuration, 
    this.radius, 
    this.imagePath
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new AnimatedContainer(
      duration: new Duration(
        milliseconds: animationDuration,
      ),
      constraints: new BoxConstraints(
        minHeight: radius,
        maxHeight: radius,
        minWidth: radius,
        maxWidth: radius,
      ),
      child: new ClipOval(
        child: new CachedNetworkImage(
          errorWidget: new Icon(Icons.error),
          fit: BoxFit.cover,
          imageUrl: imagePath,
          placeholder: new CircularProgressIndicator(),
        ),
      ),
    );
  }

}

以及使用方法：

body: new Center(
        child: new CustomCircleAvatar(
          animationDuration: 300,
          radius: 100.0,
          imagePath: 'https://avatars-01.gitter.im/g/u/mi6friend4all_twitter?s=128',
        ),
      ),

也许这不是更好的方法。但是，它有效！