如何在 flutter 中加载后显示网络图像

Question

I had a bottom navigation bar

Widget bottomNav(int index, PageController pageController){
return CustomNavigationBar(
  currentIndex: index,
  bubbleCurve: Curves.bounceIn,
  scaleCurve: Curves.decelerate,
  selectedColor: constantColors.blueColor,
  unSelectedColor: constantColors.darkColor,
  strokeColor: constantColors.blueColor,
  scaleFactor: 0.1,
  iconSize: 30,
  onTap: (val){
    index = val;
    pageController.jumpToPage(val);
    notifyListeners();
  },
  backgroundColor: Colors.white,
  items: [
    CustomNavigationBarItem(icon: Icon(EvaIcons.home)),
    CustomNavigationBarItem(icon: Icon(EvaIcons.messageCircle)),
    CustomNavigationBarItem(icon: CircleAvatar(
      radius: 35,
      backgroundColor: Colors.transparent,
      backgroundImage: NetworkImage(userAvatar),
    ),
    ),
  ],
);

}

In backgroundImage: i am addressing a NetworkImage => userAvatar but when app loads then the value of userAvatar is null because it take some time to fetch the image. But instantly it throws me error that url.= null is not true. How to show image after loading without any error.

Answer 1

You can use cached_network_image for this

CachedNetworkImage(
  imageUrl: "http://via.placeholder.com/200x150",
  imageBuilder: (context, imageProvider) => Container(
    decoration: BoxDecoration(
      image: DecorationImage(
          image: imageProvider,
          fit: BoxFit.cover,
       ),
    ),
  ),
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
),