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?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
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?
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:
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.