Question 77892 in Flutter Question posted in
The official Flutter documentation can be found here.

Center Image In Container's child column flutter

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

My desired look

enter image description here

This is what I got by using code

enter image description here

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,
                    ),
                  ),
                ],
Tags:

3

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    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),,
)

    enter image description here

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

    Login or Signup to reply.
  3. 0

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

    Expanded(
     child: Image.asset(
       image,
       fit: BoxFit.cover,
     ),
   ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search