Виджет Stack в Flutter
Виджет
Stack
рисует потомков в одной плоскости, как стопку
бумаги. Первый элемент списка children
лежит внизу, следующие перекрывают его сверху.
Размер стека по умолчанию подстраивается под
самого крупного потомка без Positioned:
import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp(home: HomePage()));
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Stack(
alignment: Alignment.center,
children: [
Icon(Icons.circle, size: 80, color: Colors.teal),
const Icon(Icons.check, size: 40, color: Colors.white),
],
),
),
);
}
}
Параметр alignment у Stack
задаёт, как потомки без Positioned группируются,
если их несколько и они меньше области.
Для точного прижатия к краям используют
Positioned
- отдельный урок про него:
Stack(
children: [
Image.network(
'https://picsum.photos/200',
width: 200,
height: 120,
fit: BoxFit.cover,
),
const Positioned(
left: 8,
bottom: 8,
child: Text(
'Caption',
style: TextStyle(color: Colors.white),
),
),
],
)
Соберите Stack по центру экрана:
снизу Icon
Icons.lens размером 100 с цветом
Colors.amber, сверху по центру стека
Icon Icons.star размером 36.
Используйте alignment: Alignment.center
у Stack для звезды.