Center Image In Container's child column flutter-CodePudding

I want to align image in center in column and increase size of image.

My desired look

This is what I got by using code

Here is my code:

class BigRoundedContainer extends StatelessWidget {
  final String image, text;

  const BigRoundedContainer({Key? key, required this.image, required this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 145.w,
      height: 145.h,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(Dimensions.radius40),
        color: Colors.white,
        boxShadow: <BoxShadow>[
          BoxShadow(
            color: Colors.black.withOpacity(0.5),
            blurRadius: Dimensions.radius10,
            offset: const Offset(0.0, 10),
          )
        ],
      ),
      child: Padding(
        padding: EdgeInsets.only(bottom: Dimensions.height10),
        child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
          Expanded(
            child: Image.asset(
              image,
              color: AppColors.fIconsAndTextColor,
            ),
          ),
          SmallText(text: text, size: Dimensions.height20),
        ]),
      ),
    );
  }
}

This is how im using BigRoundedContainer

 Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                 BigRoundedContainer(
                      image: "assets/images/agency.png",
                      text: LanguageStringKeys.instance.agency.tr,
                    ),
                  
                 BigRoundedContainer(
                      image: "assets/images/freelancer.png",
                      text: LanguageStringKeys.instance.freelancer.tr,
                    ),
                  ),
                ],

CodePudding user response：

While you are using Expanded, you can skip size params on Image. Include fit: BoxFit.cover

Expanded(
     child: Image.asset(
       image,
       fit: BoxFit.cover,
     ),
   ),

CodePudding user response：

try this:

Expanded(
  child: Align(
    alignment: Alignment.bottomCenter,
    child: Image.asset(
      image,
      color: AppColors.fIconsAndTextColor,
    ),
  ),
),
Padding(
  padding: const EdgeInsets.only(top: 16.0),
  child: SmallText(text: text, size: Dimensions.height20),,
)

you can play with SmallText's padding to get your desire space.

CodePudding user response：

Give padding all in parent container then give image width height and margin between the text