FadeInImage loaded-CodePudding

I have a Row with a Text and a FadeInImage.memoryNetwork inside. Is there any way to hide the text (or the whole Row) until the image is loaded? I think the user experience will be better this way.

   return Card(elevation: 5,
      child: Row(
        children: [
          Text(widget.brandTitle),
          FadeInImage.memoryNetwork(
            placeholder: kTransparentImage,
            image: _brandImage.image.path,
            width: 200,
          ),
        ],
      ),
    );

CodePudding user response：

try this

return Card(elevation: 5,
      child: Row(
        children: [
          kTransparentImage != null ? Text(widget.brandTitle): Container(),
          FadeInImage.memoryNetwork(
            placeholder: kTransparentImage,
            image: _brandImage.image.path,
            width: 200,
          ),
        ],
      ),
    );

CodePudding user response：

You can add Process indicator using Image.network

Image.network(
  "https://www.kindpng.com/imgv/ioJmwwJ_dummy-profile-image-jpg-hd-png-download/",
  loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent loadingProgress) {
    if (loadingProgress == null) return child;
    return Center(
      child: CircularProgressIndicator(
        value: loadingProgress.expectedTotalBytes != null
            ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes
            : null,
      ),
    );
  },
),