Flutter的Image之加载网络图片(效果)

//添加了淡出效果
Image.network(
              "https://www.???.com/image/xx.png",
              height: 300,
              frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
                if (wasSynchronouslyLoaded)
                  return child;

                return AnimatedOpacity(
                  child: child,
                  opacity: frame == null ? 0 : 1,
                  duration: const Duration(seconds: 2),
                  curve: Curves.easeOut,
                );
              },),
//添加了 圆形进度条
            Image.network(
              "https://www.???.com/image/xx.png",
              height: 150,
              loadingBuilder: (context, child, loadingProgress) {
                if (loadingProgress == null)
                  return child;

                return Container(
                  alignment: Alignment.center,
                  child: CircularProgressIndicator(
                    value: loadingProgress.expectedTotalBytes != null
                        ? loadingProgress.cumulativeBytesLoaded /
                        loadingProgress.expectedTotalBytes
                        : null,
                  ),
                );
              },)

你可能感兴趣的:(Flutter的Image之加载网络图片(效果))