Início / coding / Perguntas / 79437002
Accepted
Andy
Asked: 2025-02-14 00:16:27 +0800 CST

Por que esses contêineres não estão dimensionados corretamente?

  • 772

Estou tentando adicionar alguns logotipos a uma linha em um widget Flutter; o código relevante está abaixo:

 Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Container(
        decoration: BoxDecoration(
          border: Border.all(color: FbColors.grey),
          borderRadius: BorderRadius.circular(300),
        ),
        child: Image(
          width: FbSizes.iconMd,
          height: FbSizes.iconMd,
          image: AssetImage(dark ? FbImages.googleDark : FbImages.googleLight),
        ),
      ),
      const SizedBox(width: FbSizes.spaceBtwnItems),
      Container(
        decoration: BoxDecoration(
          border: Border.all(color: FbColors.grey),
          borderRadius: BorderRadius.circular(100),
        ),
        child: Image(
          width: FbSizes.iconMd,
          height: FbSizes.iconMd,
          image: AssetImage(dark ? FbImages.appleDark : FbImages.appleLight),
        ),
      ),
    ],
  )

Observe que o primeiro Containertem uma BorderRadius.circular(300)chamada, e o segundo tem uma BorderRadius.circular(100)chamada - mas ambos têm o mesmo tamanho na tela, e nenhum deles tem o tamanho especificado (eles terão o mesmo tamanho na visualização final - apenas alterei os tamanhos no código para mostrar que eles não estão respondendo).

insira a descrição da imagem aqui

Não consigo entender por que não consigo redimensioná-los. Alguém tem alguma ideia do que estou fazendo errado?

flutter

1 respostas

  1. Best Answer

    As propriedades Image do widget devem controlar o tamanho da imagem, mas se o pai ou outras restrições estiverem interferindo, a imagem pode não aparecer como esperado.widthheightContainer

    Então, em vez de dar o tamanho à imagem, dê-o ao pai Containere garanta que ela Containertenha um tamanho quadrado .

    Em vez de dar a um valor Containerfixo para torná-lo circular, passe para o do , você pode usar a propriedade no para controlar o ajuste da imagem noBorderRadiusBorderRadius.circular(300)shape: BoxShape.circle,decorationContainerfitAssetImage fit: BoxFit.containContainer

      Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Container(
        width: FbSizes.iconMd,
        height: FbSizes.iconMd,
        decoration: const BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.grey,
        ),
        child: Image(
          image: AssetImage(dark ? FbImages.googleDark : FbImages.googleLight),
          fit: BoxFit.contain,
        ),
      ),
      const SizedBox(width: FbSizes.spaceBtwnItems),
      Container(
        width: FbSizes.iconMd,
        height: FbSizes.iconMd,
        decoration: const BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.grey,
        ),
        child: Image.asset(
          image: AssetImage(dark ? FbImages.appleDark : FbImages.appleLight),
          fit: BoxFit.contain,
        ),
      ),
    ],
  )

    Melhor solução:

    Você pode usar o CircleAvatarWidget e controlar o tamanho da imagem alterando o valor da radius propriedade

      Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      CircleAvatar(
        radius: 40,
        backgroundColor: Colors.grey,
        child: Image(
          image: AssetImage(dark ? FbImages.googleDark : FbImages.googleLight),
          fit: BoxFit.contain,
        ),
      ),
      const SizedBox(width: FbSizes.spaceBtwnItems),
      CircleAvatar(
        radius: 40,
        backgroundColor: Colors.grey,
        child: Image(
          image: AssetImage(dark ? FbImages.appleDark : FbImages.appleLight),
          fit: BoxFit.contain,
        ),
      ),
    ],
  )
    • 1

relate perguntas