skip to Main Content

I am having trouble issues aligning my icon buttons to the middle of the card. As you can see in the picture, the icon buttons are on top attached to the top of the card.

How do I make it meet at the half size of the card? Any suggestions? (I want the buttons to be located at the middle of the card)

Tried: I tried putting padding or wrap my Row widget with a center, but it doesn’t work.

 child: new Container(
            height: 150.0,
            width: MediaQuery.of(context).size.width,
            child: new Card(
              color: Colors.white,
              elevation: 8.0,
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Column(
                      children: [
                        IconButton(
                            onPressed: () {},
                            icon: Icon(Icons.sticky_note_2),
                            iconSize: 35,
                            color: Colors.lightBlue),
                        Text(
                          "Notes",
                          style: TextStyle(
                            color: Colors.black,
                            fontSize: 15,
                          ),
                        ),
                      ],
                    ),
                    Column(
                      children: [
                        IconButton(
                          onPressed: () {
                            Navigator.push(
                              context,
                              MaterialPageRoute(
                                  builder: (context) => QuizRoute()),
                            );
                          },
                          icon: Icon(Icons.quiz),
                          iconSize: 35,
                        ),
                          Text(
                          "Quizzes",
                          style: TextStyle(
                            color: Colors.black,
                            fontSize: 15,
                          ),
                        ),
                      ],
                    ),
                    Column(
                      children: [
                        IconButton(
                          onPressed: () {
                            Navigator.push(
                              context,
                              MaterialPageRoute(
                                  builder: (context) => EbooksRoute()),
                            );
                          },
                          icon: Icon(Icons.auto_stories),
                          iconSize: 35,
                        ),
                          Text(
                          "Ebooks",
                          style: TextStyle(
                            color: Colors.black,
                            fontSize: 15,
                          ),
                        ),
                      ],
                    ),
                  ]),
            ),
          ),
        ),
      ],
    ),

enter image description here

3

Answers


  1. Try below code and set mainAxisAlignment: MainAxisAlignment.center, to every Column widget. Refer layout and Align

    Container(
      height: 150.0,
      width: MediaQuery.of(context).size.width,
      child: Card(
        color: Colors.white,
        elevation: 8.0,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                IconButton(
                    onPressed: () {},
                    icon: Icon(Icons.sticky_note_2),
                    iconSize: 35,
                    color: Colors.lightBlue),
                Text(
                  "Notes",
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 15,
                  ),
                ),
              ],
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                IconButton(
                  onPressed: () {},
                  icon: Icon(Icons.quiz),
                  iconSize: 35,
                ),
                Text(
                  "Quizzes",
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 15,
                  ),
                ),
              ],
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                IconButton(
                  onPressed: () {},
                  icon: Icon(Icons.auto_stories),
                  iconSize: 35,
                ),
                Text(
                  "Ebooks",
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 15,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    ),
    

    Result Screen-> image

    Login or Signup to reply.
  2. What is the issue?

    You are using center alignment in the row but not inside the column. Now column is taking the height of entire row but the children of the column is not aligned center.

    Solution:

    Try adding mainAxisAlignment: MainAxisAlignment.center in each of your column

    Present Code:

    Row
    mainAxisAlignment:MainAxisAlignment.center
    |_Column
    |_Column
    |_Column
    

    Required Code:

    Row
    mainAxisAlignment:MainAxisAlignment.center
    |_Column
      mainAxisAlignment:MainAxisAlignment.center 👈 Add these to every column
    |_Column
      mainAxisAlignment:MainAxisAlignment.center
    |_Column
      mainAxisAlignment:MainAxisAlignment.center
    

    For the complete code refer : @Ravindra’s answer

    Login or Signup to reply.
  3. Replace your "Row" widget with the following code, this will solve your issue.

    Solution : Give your Column center alignment

    mainAxisAlignment: MainAxisAlignment.center

          child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      IconButton(
                          onPressed: () {},
                          icon: const Icon(Icons.sticky_note_2),
                          iconSize: 35,
                          color: Colors.lightBlue),
                      const Text(
                        "Notes",
                        style: TextStyle(
                          color: Colors.black,
                          fontSize: 15,
                        ),
                      ),
                    ],
                  ),
                  Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      IconButton(
                        onPressed: () {
                          // Navigator.push(
                          //   context,
                          //   MaterialPageRoute(
                          //       builder: (context) => QuizRoute()),
                          // );
                        },
                        icon: const Icon(Icons.quiz),
                        iconSize: 35,
                      ),
                      const Text(
                        "Quizzes",
                        style: TextStyle(
                          color: Colors.black,
                          fontSize: 15,
                        ),
                      ),
                    ],
                  ),
                  Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      IconButton(
                        onPressed: () {
                          // Navigator.push(
                          //   context,
                          //   MaterialPageRoute(
                          //       builder: (context) => EbooksRoute()),
                          // );
                        },
                        icon: const Icon(Icons.auto_stories),
                        iconSize: 35,
                      ),
                      const Text(
                        "Ebooks",
                        style: TextStyle(
                          color: Colors.black,
                          fontSize: 15,
                        ),
                      ),
                    ],
                  ),
                ]),
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search