Изображение флаттера по умолчанию не загружается

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.

Не могу понять, что происходит.

---

@ Джона Уильямс для вашей справки -

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',
        ),
      ),

Может быть, это не лучший способ. Но это работает!

Answer 2

(я предполагаю, что CachedNetworkImageProvider на самом деле является CachedNetworkImage из этого пакета).

Эта строка кода всегда отображает второе изображение.

(this.profileImgPath == null)
  ? new AssetImage('images/user-avatar.png')
  : new CachedNetworkImageProvider(this.profileImgPath)

Поскольку profileImagePath не равно NULL, AssetImage никогда не создается. Даже если это так, как только это не будет, кэшированный сетевой образ заменит его до загрузки. Вместо этого используйте параметр placeholder сетевого образа. Это будет отображать ваше изображение актива, пока изображение сети не загрузится.

new CachedNetworkImage(
  placeholder: new AssetImage('images/user-avatar.png'),
  imageUrl: profileImgPath,
)