Search code examples
flutterdartflutter-layoutflutter-image

Why doesn't the NetworkImage radius property work? (Flutter)


I can't understand why my image, gotten from the network doesn't have a BorderRadius. Tell me please where did I error? I thought I needed to take a smaller image, but that didn't work for me either.

Widget customListTile({
  required String title,
  required String singer,
  required String cover,
  onTap
}){
  return InkWell(
    onTap: onTap,
    child: Container(
      padding: const EdgeInsets.all(8),
      child: Row(
        children: [
          Container(
            height: 80.0,
            width: 80.0,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(16.0),
              image: DecorationImage(
                image: NetworkImage(cover)
              )
            ),
          ),
          const SizedBox(
            width: 10.0,
          ),
          Column(
            children: [
              Text(
                title,
                style: const TextStyle(
                  fontSize: 18.0,
                  fontWeight: FontWeight.w600
              ),
              ),
              const SizedBox(
                height: 5.0,
              ),
              Text(
                singer,
                style: const TextStyle(
                color: Colors.grey,
                    fontSize: 16.0
              ),
              )
            ],
          )
        ],
      ),
    ),
  );
}

I tried different ways to wrap the xset image in different widgets, but that didn't work for me either, I don't understand why. Please help me deal with this problem! This my result enter image description here


Solution

  • Try this

    
                                            ClipRRect(
                                                    borderRadius: BorderRadius.circular(16.0),
                                                    child: Image.network(
                                                      cover,
                                                      width: 80,
                                                      height: 80,
                                                      fit: BoxFit.cover,
                                                    ),
                                                  ),
    ...
    

    Use ClipRRect()