Como SpaceEvenly e Redimensionar dois itens em uma Linha?

0

Pergunta

Eu estou tentando spaceevenly um Icon() e um AutoSizeText() em um Row(). Quando a quantidade é longo como você pode ver nas imagens anexadas torna como o esperado, mas quando o valor é zero ou muito curto, o AutoSizeText() está sendo centralizado, mas isso faz com que a mesma distância entre as bordas não é mais mantido. Há uma distância extra causado pela centralização. Eu não sei como corrigir isso.

Editar. Se não ficou claro, estou me referindo a rosa, ícone do carrinho de compras e o valor mostrado no "Riepilogo Settimanale" seção. Se você olhar para o Restaurante Ícone e a sua quantidade, você pode notar como eles não são centralizados, eles estão mais próximos da borda esquerda.

orginal view

enter image description here

Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(20),
      ),
      width: size.width * 0.3,
      height: size.height,
      // height: size.height * 0.055,
      child: Row(
        children: [
          Spacer(),
          Expanded(
            flex: 3,
            child: Container(
              child: LayoutBuilder(
                builder: (context, constraint) {
                  return Icon(
                    icona,
                    color: colore,
                    size: constraint.biggest.width * 1,
                  );
                },
              ),
            ),
          ),
          Spacer(),
          Expanded(
            flex: 6,
            child: Center(
              child: AutoSizeText(
                importo,
                style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                  color: colore,
                ),
                maxLines: 1,
              ),
            ),
          ),
          Spacer(),
        ],
      ),
    )
android dart flutter flutter-layout
2021-11-23 20:16:17
1

Melhor resposta

1

Se eu entendi bem, você quer para a direita-alinha o texto, não centro-los.

Para isso, considere o uso de um único Spacer() entre o ícone e o texto. Do lado de fora espaçamento (margin e padding) pode ser feito usando Padding widget em vez disso.

2021-11-24 00:29:45

Em primeiro lugar, eu queria ter um comportamento semelhante para o espaço uniformemente propriedade da Linha, eu queria o mesmo espaço entre a borda esquerda-ícone, ícone-texto, texto-borda direita. Eu não sei como conseguir isso, porém, porque o texto alterar tamanho assim que redimensionar, portanto, o espaçador deve ser capaz de redimensionar de acordo. Eu decidi que era melhor apenas à direita alinha o texto como você sugeriu, mesmo que não seja o que eu queria, mas parece decente
iocomxda

@iocomxda, oh, se você quisesse ter o mesmo espaço em 3 de lacunas, você pode tentar colocar 3 Spacer() widgets para isso. Mas os textos (com diferentes largura) não serão alinhados uns com os outros na página (como ter $2666 e $0), para alinhar à direita é a abordagem mais comum.
user1032613

Obrigado por tipo de explicação! Não sei alinhar à direita era a abordagem mais comum.
iocomxda

Em outros idiomas

Esta página está em outros idiomas

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................