Images inside Container not fitting completely-CodePudding

I have a Container with a Row inside.

Container(
                                      width: MediaQuery.of(context).size.width,
                                      child: Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.center,
                                        children: [
                                          //mbx
                                          Container(
                                              width: 40.0,
                                              height: 40.0,
                                              decoration: new BoxDecoration(
                                                  color: AppColors.grisMovMap,
                                                  shape: BoxShape.circle,
                                                  image: new DecorationImage(
                                                      fit: BoxFit.fill,
                                                      image: AssetImage(
                                                          'assets/sports/MBX.png')))),
                                          SizedBox(
                                            width: 5,
                                          ),
                                          //motocross
                                          Container(
                                              width: 40.0,
                                              height: 40.0,
                                              decoration: new BoxDecoration(
                                                  color: AppColors.grisMovMap,
                                                  shape: BoxShape.circle,
                                                  image: new DecorationImage(
                                                      fit: BoxFit.fill,
                                                      image: AssetImage(
                                                          'assets/sports/motocross.png')))),
                                        ],
                                      ),
                                    )

The Row contains two other Containers with a circular asset image inside.

The issue is that both image are not filling the circle space, they are cut on some parts of the border.

I would like to put both images completely inside the circles, just as adding a padding value.

EDIT:

Here you have both full images to compare with the app output:

CodePudding user response：

CircleAvatar(
          radius: 100,
          child: Padding(
            padding: EdgeInsets.all(10),
            child: Image.asset(
              "assets/images/w3lk3.png",
            ),
          ),
          backgroundColor: Colors.purple,
        ),

Output:

CodePudding user response：

Use fit:BoxFit.contain to fit the image fully inside the container.

CodePudding user response：

Since you are using circle image I would suggest using the native flutter solution for circle images as found here in the official documentation. https://api.flutter.dev/flutter/material/CircleAvatar-class.html

In terms of code:

CircleAvatar( backgroundImage: NetworkImage(userAvatarUrl), )

If I understood correctly you want a certain color around the circle?

Use double CircleAvatar widget. It may not be the correct way but it accomplishes the task.

          CircleAvatar(
            radius: 70,
            backgroundColor: Colors.red,
            child: CircleAvatar(
              backgroundImage: 
              AssetImage('assets/sports/motocross.png'),
              radius: 50,
            ),
          ),

Since it creates two circles just make sure the first one is bigger than the second one and set the color of your choice.