How to make FadeInImage Circular?

cachednetworkimageprovider
circle avatar flutter
flutter image.memory example
fadeinimage placeholder widget
flutter circle image
fadeinimage flutter size
flutter clear image cache
placeholder flutter

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")),
      ),
    );

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

ClipRRect(
        borderRadius: BorderRadius.circular(25.0),
        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"),
      )

FadeInImage is not clipped when BoxDecoration is applied · Issue , FadeInImage is not clipped when BoxDecoration is applied #25615. Add a container with a box decoration and set decoration shape to circle. Add a FadeInImage to the container as a child. FadeInImage works with images of any type: in-memory, local assets, or images from the internet. In-Memory In this example, use the transparent_image package for a simple transparent placeholder.


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?

How to make FadeInImage Circular?, How to make FadeInImage Circular. Set the width and height property of FadeInImage and it should work. The idea is to create a Container. The width and height of the Container should be the same to make it a circle. Otherwise, you can use different value for width and height to create an oval. Then, pass a BoxDecoration to the decoration option of the Container. In the BoxDecoration, we make its shape circle by setting BoxShape.circle as the value.


Wrap FadeInImage widget with clip oval then Wrap clipoval widget with aspect ratio

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

Fade in images with a placeholder, FadeInImage works with images of any type: in-memory, local assets, or images class MyApp extends StatelessWidget { @override Widget build(BuildContext context) Center(child: CircularProgressIndicator()), Center( child: FadeInImage. To avoid the jarring effect of images popping onto the screen as they load, try using FadeInImage! You can specify a local placeholder image and set the height and width parameters to determine


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.

FadeInImage class - widgets library - Dart API, API docs for the FadeInImage class from the widgets library, for the Dart programming height → double: If non-null, require the image to have this height. []. Possible duplicate of How to make an image provider from an Icon in flutter for FadeInImage widget? – Richard Heap Aug 31 '18 at 13:22 I dont think so, I used as a DecorationImage, There need a ImageProvider type Widget. – mengqiao hu Aug 31 '18 at 14:08


FadeInImage (Flutter Widget of the Week), Learn more about FadeInImage → http://bit.ly/2OYTU5k. Get more tips! Where do we have to Duration: 1:04 Posted: Nov 6, 2018 In this Google flutter code example we are going to learn how to create a circle image in Flutter. The code is based on flutter version 1.0.0. Main.dart (App entry point)


Flutter Network Image does not fit in Circular Avatar, I want the images to be displayed in Circular profile form so I am using If you don't want to use CircleAvatar , here is how you can do it too. I am using Flutter to make a list of information about movies. Now I want the cover image on the left to be a rounded corners picture. I did the following, but it didn’t work.


FadeInImage is not clipped when BoxDecoration is applied, The FadeInImage is clipped as a circle. Dart version 2.1.0 (build 2.1.0-dev.9.4 f9ebf21297) [✓] Android toolchain - develop for Android devices (Android SDK  A circle that represents a user. Typically used with a user's profile image, or, in the absence of such an image, the user's initials. A given user's initials should always be paired with the same background color, for consistency.