Home > Blockchain >  How to remove default padding of an Image in Flutter?
How to remove default padding of an Image in Flutter?

Time:05-16

As you can see in the screenshot I have some padding in my Images widgets even tho I did not define any. I guess it is the default padding. However to cope with my design I'd like to remove this padding.

Here is the code:

class PackingPlanEntry extends StatelessWidget {
  const PackingPlanEntry({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
          color: Color.fromRGBO(208, 190, 162, 100.0),
          shape: BoxShape.rectangle,
          borderRadius: BorderRadius.all(Radius.circular(5))),
      child: Row(
        children: [
          Image.asset("assets/backpack.jpeg", height: 122, width: 70),
          Image.asset("assets/boots.jpeg", height: 122, width: 70),
          Column(
            children: [
              Text(
                "Norwegen Tour 2022",
                style: TextStyle(
                    color: Colors.black,
                    fontSize: 16,
                    fontFamily: "Roboto",
                    fontWeight: FontWeight.bold),
              ),
              Row(
                children: [
                  Text(
                    "12 Teile gepackt",
                    style: TextStyle(
                        color: Color.fromARGB(400, 0, 0, 0),
                        fontSize: 12),
                  ),
                  Text("3",
                      style: TextStyle(
                          color: Colors.black.withOpacity(0.5))),
                  Image.asset("assets/user.png",
                      color: Colors.black.withOpacity(0.5))
                ],
              )
            ],
          )
        ],
      ),
    );
  }
}

I already tried to add

      padding: EdgeInsets.zero,

but that seems not to change anything at all.

enter image description here

CodePudding user response:

try this

Container(
            padding: EdgeInsets.zero,
              decoration: const BoxDecoration(
              color: Color.fromRGBO(208, 190, 162, 100.0),
              shape: BoxShape.rectangle,
              borderRadius: BorderRadius.all(Radius.circular(5))),
              child: ....,
            )

CodePudding user response:

I think your issues caused by image, so you should add fit to image,

Example:

Image.asset("assets/backpack.jpeg", height: 122, width: 70, fit: BoxFit.fitHeight),
Image.asset("assets/boots.jpeg", height: 122, width: 70, fit: BoxFit.fitHeight),

there are many types of BoxFit, you should consider to choose the right one you need

CodePudding user response:

I realized that having a width to the images kinda added that extra padding. Only having height (which works fine with constant ratio) did work and removed the padding.

  • Related