CODEWITHSUNDEEP
flutterflutter-layout
Mostafa Ghorbani
Mostafa Ghorbani

Reputation: 445

How can i add shadow to CircleAvatar in flutter?

I have made a horizontal list view and in it, I have CircleAvatar just like how Instagram stories are placed in the app but I want to add a shadow under all of the circles.
Here is my code :

Container(
            height: 105.0,
            child: ListView.builder(
              padding: EdgeInsets.only(left: 10.0),
              scrollDirection: Axis.horizontal,
              itemCount: favorites.length,
              itemBuilder: (BuildContext context, int index) {
                return Padding(
                  padding: EdgeInsets.all(10.0),
                  child: Column(
                    children: <Widget>[
                      CircleAvatar(
                        radius: 30.0,
                        backgroundImage: AssetImage(favorites[index].imageUrl),
                        
                      ),
                      SizedBox(height: 6.0),
                      Text(
                        favorites[index].name,
                        style: TextStyle(
                            color: Colors.grey,
                            fontSize: 14.0,
                            fontWeight: FontWeight.w400),
                      ),
                    ],
                  ),
                );
              },
            ),
          ),

Upvotes: 12

Views: 18656

Answers (5)

E-Berry
E-Berry

Reputation: 75

Using Material with CircleBorder for the shape parameter

Material(
  shape: const CircleBorder(side: BorderSide.none),
  elevation: 15,
  child: CircleAvatar(
    backgroundColor: Colors.deepPurple,
  ),
),

Upvotes: 3

Bagus Kurnianto
Bagus Kurnianto

Reputation: 421

use Material

Material(
         borderRadius: BorderRadius.circular(20),
         elevation: 2,
         child: CircleAvatar(
         backgroundColor: Colors.red,
     ),
    ),

Upvotes: 5

Gal Rom
Gal Rom

Reputation: 6471

Checkout PhysicalModel

PhysicalModel(
       color: Colors.black,
       elevation: 15.0,
       shape: BoxShape.circle,
       child: CircleAvatar(         
             backgroundImage:NetworkImage(Constants.AVATAR_URL),
             radius: 50.0,
             backgroundColor: Colors.white,),)

Upvotes: 8

ewidaa
ewidaa

Reputation: 1

wrap it with a Material widget and add the elevation property

Container(
  height: 105.0,
  child: ListView.builder(
    padding: EdgeInsets.only(left: 10.0),
    scrollDirection: Axis.horizontal,
    itemCount: favorites.length,
    itemBuilder: (BuildContext context, int index) {
      return Padding(
        padding: EdgeInsets.all(10.0),
        child: Column(
          children: <Widget>[
            Material(
                child: CircleAvatar(
                  radius: 30.0,
                  backgroundImage: AssetImage(favorites[index].imageUrl),
                ),
                elevation: ...),
            SizedBox(height: 6.0),
            Text(
              favorites[index].name,
              style: TextStyle(color: Colors.grey, fontSize: 14.0, fontWeight: FontWeight.w400),
            ),
          ],
        ),
      );
    },
  ),
),

Upvotes: 0

Nehal
Nehal

Reputation: 1489

Wrap your avatar inside a container:

Container(
  decoration: BoxDecoration(
    color: Colors.white,
    shape: BoxShape.circle,
    boxShadow: [BoxShadow(blurRadius: 10, color: Colors.black, spreadRadius: 5)],
  ),
  child: CircleAvatar(
    radius: 30.0,
    backgroundImage: AssetImage(favorites[index].imageUrl),
  ),
);

Upvotes: 34

Related Questions