How to make FadeInImage Circular?

user_9552485 0
Viewed 8376

I am using FadeInImage Widget to show a Network Image in my App. As I want to use the placeholder property of FadeInImage, I can't use NetworkImage or Image.Network Widget.

Now I want to make FadeInImage circular so I tried to use following options.

  1. I tried wrapping FadeInImage inside Container to make it circular but the DecorationImage property does not allow FadeInImage
  2. I tried using CircleAvatar but backgroundImage property of CircleAvatar does not allow FadeInImage
  3. I tried using cached_network_image library of flutter but was facing the same issue
  4. Last option I tried was using ClipRRect to make it circular but still it does not work

Following is my code

Container(
      width: 50.0,
      height: 50.0,
      child: ClipRRect(
        borderRadius: BorderRadius.circular(25.0),
        child: FadeInImage(
            placeholder: AssetImage("images/alex.jpg"),
            image: NetworkImage(
                "https://cdn1.thr.com/sites/default/files/imagecache/scale_crop_768_433/2018/02/gettyimages-862145286_copy_-_h_2018.jpg")),
      ),
    );
dart flutter
4 Answers

Set the width and height property of FadeInImage and it should work.

ClipOval(
  child: CachedNetworkImage(
      fit: BoxFit.cover,
      width: 50,
      height: 50,
      placeholder: AssetImage("images/alex.jpg"),
      imageUrl:"https://cdn1.thr.com/sites/default/files/imagecache/scale_crop_768_433/2018/02/gettyimages-862145286_copy_-_h_2018.jpg",
  ),
)

enter image description here

user_54589130

Wrap FadeInImage widget with ClipOval then wrao ClipOval widget with AspectRatio:

AspectRatio(
      aspectRatio: 1/1,
      child: ClipOval(
        child: FadeInImage.assetNetwork(
            fit: BoxFit.cover,
            placeholder: "Your-placeholder-path",
            image: "Your-Image-Url"),
      ),
    );
user_79738340

I created a custom widget for this:

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';

class CircleCachedNetworkAvatar extends StatelessWidget {
  final String url;
  final double size;

  CircleCachedNetworkAvatar({@required this.url, this.size = 50.0});

  @override
  Widget build(BuildContext context) {
    return Container(
        height: size,
        width: size,
        child: url != null
            ? ClipOval(
                child: CachedNetworkImage(
                  fadeInDuration: const Duration(seconds: 0),
                  fadeOutDuration: const Duration(seconds: 0),
                  imageUrl: url,
                  placeholder: Container(
                      color: Colors.greenAccent, child: Icon(Icons.person)),
                  fit: BoxFit.cover,
                ),
              )
            : CircleAvatar(
                backgroundColor: Colors.greenAccent,
                child: Icon(Icons.person)));
  }
}

What do you think about this code?

user_71404860 
ClipRRect(
        borderRadius: BorderRadius.circular(25.0),
        child: CachedNetworkImage(
            fit: BoxFit.fill,
            width: 50,
            height: 50,
            placeholder: AssetImage("images/alex.jpg"),
            imageUrl: "<IMAGE URL>"),
      );

This worked for me, have a look.

user_125905580
Related