Widget: Positioned


Posicionando widgets na tela. Um widget que controla onde um child de uma pilha está posicionado.

Poder combinar e colocar um widget sobre o outro à vontade é algo simples de fazer no Flutter com o widget Stack.

Mas como posicionar esses widgets com Stack? Há algumas formas de fazer isso. Uma delas é utilizando o widget Positioned. Sabe como é, para posicionar coisas. O nome já diz tudo, na verdade.

Como funciona o Positioned? Primeiro, vamos envolver um widget num Stack com um widget Positioned.

Stack(
children: [
Positioned(
child: FlutterLogo(),
),
]
);

Depois, utilizamos uma combinação dos parâmetros topbottomleftrightheight e width para posicionar o widget no Stack.

Aqui, vemos um widget posicionado a 25 do topo e a 50 da esquerda.

Stack(
  children: [
Positioned(
top: 25,
left: 50,
child: FlutterLogo(),
),
]
);


Aqui, temos um widget posicionado a 25 da direita e a 50 de baixo.

Stack(
  children: [
Positioned(
bottom: 50,
right: 25,
child: FlutterLogo(),
),
]
);


É possível usar a altura e largura para controlar o tamanho do widget Positioned.

Stack(
  children: [
Positioned(
height: 75,
width: 75,
bottom: 50,
right: 25,
child: FlutterLogo(),
),
]
);

Uma última dica: é possível usar Positioned.fill para que o widget preencha o espaço do Stack.

Stack(
  children: [
Positioned.fill(
child: FlutterLogo(),
),
]
);

Em breve mais tutoriais sobre widgets.

 

275 Visualizações
Awesome Flutter