Estou trabalhando em um layout do Flutter onde tenho uma lista de modos de transporte (como caminhada, carro, ônibus, trem) e estou colocando um avatar de perfil no topo usando um Stackwidget Positioned.
Aqui, o avatar do perfil não está dentro da 1ª linha.
Esta é a IU de amostra.
Stack(
children: [
Container(
color: Colors.grey[300],
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text("Walk"),
Text("Car"),
Text("Bus"),
Text("Train"),
],
),
),
Positioned(
top: 0,
right: 0,
child: CircleAvatar(
radius: 24,
child: Icon(Icons.person),
),
),
],
)
Tudo funciona bem até que o texto fique muito longo , como neste caso.
Se o texto for muito longo, é assim que ele pinta a interface do usuário problemática.
Tentei ajustar manualmente o texto em "sizedbox" com uma largura fixa para evitar sobreposições.
Mas isso não funciona em todos os casos.
Stack(
children: [
Container(
color: Colors.grey[300],
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Row(
children: [
Icon(Icons.directions_walk),
SizedBox(width: 8),
// Manually restrict text width to avoid overlap
SizedBox(
width: 80, // <-- hardcoded width
child: Text("Walk Walk Walk"),
),
],
),
Row(
children: [
Icon(Icons.directions_car),
SizedBox(width: 8),
Text("Car"),
],
),
Row(
children: [
Icon(Icons.directions_bus),
SizedBox(width: 8),
Text("Bus"),
],
),
Row(
children: [
Icon(Icons.train),
SizedBox(width: 8),
Text("Train"),
],
),
],
),
),
Positioned(
top: 0,
right: 0,
child: CircleAvatar(
radius: 24,
child: Icon(Icons.person),
),
),
],
)
Existe uma maneira melhor de organizar isso para que o Positionedwidget não interfira no layout do texto abaixo — sem codificar as larguras