Flutter. Много: “Hola, Amigos! Сегодня мы хотим рассказать про один из редко используем…”

Hola, Amigos! Сегодня мы хотим рассказать про один из редко используемых, но очень полезных виджетов - OverflowBar.

Представьте, что вы делаете сложную верстку, где несколько кнопок с текстом должны быть расставлены горизонтально и занимать максимально доступную ширину. Если текста больше, чем нужно, а это может быть при увеличенном шрифте, то одну кнопку мы переносим на следующую строку.

Сначала кажется верным использовать Row или Wrap. Но тут мы встречаемся с проблемой - при использовании первого, мы не можем перенести дочерние виджеты, а со вторым не можем растянуть их. Третий вариант - использовать LayoutBuilder и вычислять размеры самим, но это сложно. Вот тут то нам и приходит на помощь виджет OverflowBar.

И вместо


Row(
 mainAxisAlignment: MainAxisAlignment.end,
 spacing: 8,
 children: [
   TextButton(onPressed: () {}, child: Text("Cancel")),
   TextButton(onPressed: () {}, child: Text("Save")),
   ElevatedButton(onPressed: () {}, child: Text("Delete")),
 ],
)

Мы можем сделать так:


OverflowBar(
 alignment: MainAxisAlignment.end,
 spacing: 8,
 overflowSpacing: 8,
 children: [
   TextButton(onPressed: () {}, child: Text("Cancel")),
   TextButton(onPressed: () {}, child: Text("Save")),
   ElevatedButton(onPressed: () {}, child: Text("Delete")),
 ],
)

Как мы видим, этот виджет больше похож на Wrap, но он работает как смесь Wrap и Row.

Делитесь в комментариях, использовали ли данный виджет на своих проектах?