CODEWITHSUNDEEP
flutterflutter-layout
user18797867
user18797867

Reputation:

Center Image and Text Inside of Column Inside of Container

I've tried so many things and I can't get my image and text (column) to center inside of my Container. It stays at the top of the container. Here's my setup:

           Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              //Container 1
              Container(
                  height: 150,
                  width: 150,
                  decoration: BoxDecoration(
                    color: Colors.green,
                    border: Border.all(color: Colors.green, width: 3),
                    borderRadius: BorderRadius.all(Radius.circular(18)),
                  ),
                  child: Column(
                    children: const [
                      Expanded(
                        child: Image(
                          image: AssetImage('assets/images/Church.png'),
                        ),
                      ),
                      Expanded(
                        child: Text(
                          'Our Church',
                          style: TextStyle(
                            fontSize: 20,
                            color: Colors.black,
                            fontFamily: 'DMSans',
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                      ),
                    ],
                  )),

And here is the resulting image on screen:

enter image description here

Upvotes: 0

Views: 435

Answers (1)

George Rabbat
George Rabbat

Reputation: 578

First Remove both Expanded widget and then apply MainAxisAlignment to center. Your code should look like this:

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Container(
          height: 150,
          width: 150,
          decoration: BoxDecoration(
            color: Colors.green,
            border: Border.all(color: Colors.green, width: 3),
            borderRadius: const BorderRadius.all(Radius.circular(18)),
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
              Image.asset(
                'assets/Avatar.png',
                 width: 60,
                 height: 40,
                ),
              Text(
                'Our Church',
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.black,
                  fontFamily: 'DMSans',
                  fontWeight: FontWeight.w500,
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }

Edit: I don't have Church image, Sorry for replacement.

Result

Upvotes: 0

Related Questions