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

How do I vertically align google's material icon with text in Flutter?

I have a row widget, where the warning icon is displayed next to two text sections. In the screenshot, it looks like the alignment of the icon is at the upper level of the biggest text. I have the mainAxisAlignment and the crossAxisAlignment, and textBaseline all defined to make sure they all align at the bottom, however the icon does not seem to follow the rule. I have a screenshot and my code to also show as well.

Picture of the Icon misaligned vertically

This is how I want it to look like:

My figma design for how I want it to look like

With everything aligned at the bottom

In the screen shot you can see the warning Icon is slightly higher than the rest of the text. Here is my code (in dart):

        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.baseline,
          textBaseline: TextBaseline.alphabetic,
          children: [
            InkWell(
              onTap: () {
                showModalBottomSheet<void>(
                  context: context,
                  builder: (BuildContext context) {
                    return  const SizedBox(
                      child: WarningModal(),
                    );
                  },
                );
              },
              child: const Icon(Icons.warning_amber_rounded, size: 30.0),
            ),
            Text('$$progressAmt',
                style: const TextStyle(
                    fontWeight: FontWeight.w800, fontSize: 24)),
            Text(' of $totalProgress',
                style: const TextStyle(fontSize: 16)), 
            
          ]
Tags:

2

Answers


  1. 0

    Hope this helps:

    Update crossAxisAlignment to crossAxisAlignment: CrossAxisAlignment.center,

     Row(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.baseline,
    textBaseline: TextBaseline.alphabetic,
    children: [
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        textBaseline: TextBaseline.alphabetic,
        children: [
          InkWell(
            onTap: () {
              showModalBottomSheet<void>(
                context: context,
                builder: (BuildContext context) {
                  return SizedBox(
                    child: Container(),
                  );
                },
              );
            },
            child: const Icon(Icons.warning_amber_rounded, size: 30.0),
          ),
          Text(
            '$$progressAmt',
     

   style: const TextStyle(
                    fontWeight: FontWeight.w800, fontSize: 24),
              ),
            ],
          ),
          Text(
            ' of $totalProgress',
            style: const TextStyle(fontSize: 16),
          ),
        ],
      )
    Login or Signup to reply.
  2. 0

    Update

    crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic

    to

    crossAxisAlignment: CrossAxisAlignment.center

    This should solve the issue. for you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search