2
respostas

Dificuldade em sobrepor retângulos

Estou com dificuldade para criar o código da imagem abaixo. Não consegui sobrepor nessa defasagem os retângulos laranja com o cinza, conseguem me ajudar?

2 respostas

Para sobrepor, use o Widget Stack, para posicionar cada widget sobreposto você pode usar os widgets Align ou Positioned. Segue um exemplo de sobreposição entre dois containers usando Align:

Stack(
        children: [
          Align(
            alignment: AlignmentDirectional.topStart,
            child: Container(
              margin: const EdgeInsets.all(25),
              width: 300,
              height: 100,
              color: Colors.grey[300],
            ),
          ),
          Align(
            alignment: AlignmentDirectional.topStart,
            child: Container(
              margin: const EdgeInsets.only(left: 50),
              width: 200,
              height: 50,
              color: Colors.orange[600],
            ),
          ),
        ],
      ),

Resultado: Exemplo de sobreposição de containers usando Stack e Align

No exemplo acima o deslocamento é feito através do parâmetro margin de cada container. Mas o mesmo efeito poderia ser reproduzido com auxilio de paddin ou do widget Positioned.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software