Início / coding / Perguntas / 79322686
Accepted
Toxic Prince
Asked: 2025-01-02 10:54:02 +0800 CST

Como centralizar verticalmente um ícone em relação a um widget de texto no Flutter?

  • 772

Estou tentando exibir um cabeçalho no Flutter onde o Iconestá alinhado ao centro da Textaltura do widget. Aqui está a estrutura do widget que tenho até agora:

//dart

Widget header() {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text(
        "Welcome back",
        style: TextStyle(
          fontSize: 20,
        ),
      ),
      Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text(
            "User name",
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
            style: TextStyle(
              fontSize: 22,
              fontWeight: FontWeight.bold,
            ),
          ),
          Icon(
            kVerifiedIcon,
            color: kPrimaryColor,
            size: 15,
          ),
        ],
      ),
    ],
  );
}

Resultado:

insira a descrição da imagem aqui

Atualmente, o Iconparece ligeiramente desalinhado em relação ao Text. Quero que o Iconseja centralizado verticalmente de acordo com a altura do Text.

Tentei ajustar o sizedo Icone alterar a crossAxisAlignmentpropriedade no Row, mas não funcionou como esperado.

flutter

2 respostas

  1. Adicione seu widget de ícone dentro Containerou Paddinge forneça preenchimento superior, eu tentei usar preenchimento de contêiner. Você também pode tentar com transformpropriedade em vez de preenchimento

    Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          "Welcome back",
          style: TextStyle(
            fontSize: 20,
          ),
        ),
        Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              "User name",
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                fontSize: 22,
                fontWeight: FontWeight.bold,
              ),
            ),
            Container(
              alignment: Alignment.center,
              padding: EdgeInsets.only(top: 1.5), // adjust padding on your need
              //transform: Matrix4.translationValues(0, 1.5, 0),
              child: Icon(
                Icons.verified_rounded,
                size: 15,
              ),
            ),
          ],
        ),
      ],
    ),

    Tela de resultados -insira a descrição da imagem aqui

    • 1
  2. Best Answer

    No código fornecido, o ícone é centralizado dentro da Row, mas requer um leve preenchimento do topo para alinhar o ícone verticalmente com o texto. Tente o código abaixo...

        Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            'Welcome back',
            style: TextStyle(
              fontSize: 20,
            ),
          ),
          Row(
            children: [
              Text(
                'User name',
                style: TextStyle(
                  fontSize: 22,
                ),
              ),
              SizedBox(width: 5),
              Container(
                padding: EdgeInsets.only(top: 2),
                child: Icon(
                  Icons.verified_rounded,
                  size: 15,
                ),
              ),
            ],
          ),
        ],
      ),
    • 0

relate perguntas