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?
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.