Привет, это Роза, Flutter Dev Friflex! 👋  

В Flutter существует огромное количество виджетов для управления размерами. Давайте сделаем быстрый дайджест и пройдемся по некоторым из них. Поехали!

🔴FittedBox
— Автоматически подстраивает дочерний виджет под доступное пространство, сохраняя пропорции.  
— Если контент слишком большой, уменьшает его, чтобы всё поместилось.  

🔴OverflowBox
— Позволяет дочернему элементу выходить за пределы родительского контейнера.  
— Игнорирует ограничения родителя, давая больше свободы.  

🔴ConstrainedBox
— Задаёт минимальные или максимальные размеры для дочернего элемента.  
— Накладывает ограничения, даже если содержимое больше или меньше заданных параметров.  

🔴LimitedBox
— Ограничивает размеры элемента, но только если они не заданы явно.  
— Устанавливает максимальный размер, если дочерний элемент не ограничен другими условиями.  

🔴AspectRatio
— Сохраняет определённое соотношение сторон (например, 16:9).  
– Автоматически подстраивает размеры элемента, сохраняя пропорции.   

🔴UnconstrainedBox
— Убирает все ограничения по размеру для дочернего элемента.  
— Позволяет дочернему виджету занимать столько места, сколько ему нужно.  

🔴IntrinsicWidth / IntrinsicHeight
— Позволяет элементу занимать минимально возможное пространство.  
— Вычисляет минимальный размер, необходимый для отображения дочернего элемента.  

🔴Flex, Expanded и Flexible
— Адаптивно распределяет пространство в Row или Column.  
— Expanded — заполняет всё доступное пространство.  
— Flexible — занимает пространство по возможности, но не жёстко.  

🔴Align
— Позволяет расположить элемент внутри родителя (например, по центру или в углу).  
— Задает позицию элемента относительно родительского контейнера.  

🔴LayoutBuilder  
— Динамически определяет доступный размер и позволяет перестроить UI.  
— Полезно для адаптации интерфейса под разные размеры экранов.   

❗️Важно
Используйте эти виджеты с умом. Некоторые из них могут повлиять на производительность и рендеринг. Тестируйте каждый случай!

💬 Делитесь в комментариях, какие виджеты используете чаще всего. Там же бонусом полезная табличка.

Привет, с вами Роза, Flutter Dev Friflex!

Когда только начинаешь разрабатывать на Flutter, многие возможности языка остаются незамеченными. А с опытом начинаешь глубже разбираться в деталях и повышать свою экспертность. С модификаторами классов у меня было так же: изначально в моем арсенале был лишь abstract... и все, наверное. А со временем я узнала и про sealed, и про base. Делюсь этим и с вами!

Зачем нужны модификаторы?

Модификаторы в Dart помогают управлять наследованием и доступностью классов. Они задают ограничения, предотвращают нежелательное расширение или, наоборот, определяют четкие правила для будущих реализаций.

Основные модификаторы:

🔸abstract
Если вам не нужна реализация всех методов, а вы хотите создать класс-шаблон, используйте abstract.
🔴Запрещает создавать экземпляры этого класса напрямую (new AbstractClass() не сработает).
🔴Часто используется как базовый класс, определяющий интерфейс и частичное поведение для наследников.

🔸base
Разрешает наследование (extends) и реализацию (implements), но только в пределах текущего пакета.
🔴За пределами пакета base-класс нельзя реализовать (implements).
🔴Полезно, если нужно предотвратить реализацию, но оставить возможность наследования.

🔸interface
Принуждает использовать класс только через implements, запрещая наследование (extends).

Полезно, если хотите создать чистый контракт, без возможности переиспользовать реализацию.

🔸final
Запрещает любое наследование (extends) или реализацию (implements) класса за пределами текущей библиотеки. 

Гарантирует, что класс — конечная точка в иерархии. Его нельзя расширить или изменить поведение через подклассы вне вашего контроля.

🔸mixin
Позволяет переиспользовать код без наследования.
🔴Класс с mixin можно добавлять к другим классам через with.
🔴Миксины не могут иметь конструкторов и не могут быть инстанцированы напрямую.

🔸sealed
Позволяет создавать закрытый набор подтипов.
🔴Все подклассы должны быть в той же библиотеке, что и sealed-класс.
🔴Полезно для switch, так как компилятор проверяет, что все случаи учтены (exhaustiveness).
🔴Отлично подходит для описания состояний (Loading, Success, Error), событий и других строго определенных иерархий.

Как использовать модификаторы?
Добавьте перед классом нужное ключевое слово. Например:

sealed class GameState {
  // ...
}

🔖Важно! Модификаторы можно комбинировать (abstract base class), создавая тонкие правила для классов. Подробнее — в таблице в комментариях.

📎 Официальная документация по модификаторам

А какие модификаторы используете чаще всего? Делитесь в комментариях! 👀

Привет, это Анна, Flutter Team Lead Friflex!

Рано или поздно в жизни каждого Flutter-разработчика появляется необходимость работать с потоками Stream. Официальная документация достаточно просто и доступно объясняет весь базовый функционал стримов. Но бывают кейсы, в которых его может быть не достаточно.

Например, вам нужно подключить подписчика StreamSubscription к широковещательному потоку и получить доступ к последнему событию, сгенерированному до момента подключения. Базовый функционал потоков в Dart не дает такой возможности, так как события не кэшируются, и подписчики получают доступ только к тем из них, которые были сгенерированы потоком после подписки.

Здесь на помощь придет библиотека rxdart. Разберемся с ее возможностями.

Подключение к проекту у библиотеки стандартное — достаточно добавить зависимость в pubspec.yaml.

1. Классы потоков
rxdart дает доступ к множеству дополнительных Stream-классов. Вот некоторые из них:
▫️TimerStream — выдает заданное значение только по окончании заданного промежутка времени

TimerStream('событие', Duration(minutes: 1))
    .listen((i) => print(i)); // выводит 'событие' через 1 минуту

▫️MergeStream — объединяет события нескольких потоков в один

MergeStream([
  TimerStream(1, Duration(days: 10)),
  Stream.fromIterable([2])
])
.listen(print); // выводит 2, 1

▫️RangeStream — возвращает поток int-значений по указанному диапазону

RangeStream(1, 3).listen((i) => print(i)); // выводит 1, 2, 3

2. Расширения
Кроме классов библиотека дает возможность использовать у стандартных экземпляров Stream дополнительные функции с помощью расширений:

▫️delay() — делает задержку выдачи событий на заданный период Duration

Stream.fromIterable([1, 2, 3, 4])
  .delay(Duration(seconds: 1))
  .listen(print); // [через секунду] выводит 1, 2, 3, 4 одномоментно

▫️debounce() — при отсутствии заданного Duration паузы между событиями игнорирует их, дает доступ только к собятиям с паузами

Stream.fromIterable([1, 2, 3, 4])
  .debounce((_) => TimerStream(true, Duration(seconds: 1)))
  .listen(print); // выводит 4

▫️mapTo() — выдает константное значение каждый раз, когда поступает событие

Stream.fromIterable([1, 2, 3, 4])
  .mapTo(true)
  .listen(print); // выводит true, true, true, true

▫️takeLast() — пропускает только те события, которые были сгенерированы после получения какого-то конкретного значения

Stream.fromIterable([1, 2, 3, 4, 5])
  .takeLast(3)
  .listen(print); // выводит 3, 4, 5

3. Объекты Subjects
Subjects в rxdart — это те же стандартные объекты StreamController, но с дополнительными функциями. Всего их два:

▫️BehaviorSubject — контроллер, который кэширует последнее полученное значение. В момент подписки на поток, управляемый этим контроллером, подписчик получает первым то событие, которое было сгенерировано последним перед его подключением. Этот объект как раз прекрасно позволяет решить кейс, описанный в начале поста.

▫️ReplaySubject — тоже кеширует события, как и BehaviorSubject. Если вам необходимо сохранять не только последнее событие, а еще и другие, этот объект прекрасно справится с этой задачей.

4. Объект Observable
Observable — аналог Stream, в большинстве случаев работает идентично стандартным Stream. Но команда fluttercommunity.dev предупреждает, что в некоторых ситуациях поведение может сильно отличаться. С этими отличиями перед использованием стоит ознакомится в документации.

Делитесь в комментариях своим опытом использования rxdart и работы с потоками во Flutter-приложениях💬

В копилку лайфхаков по VSCode: теперь в терминале можно включить автодополнение а-ля IntelliSense

Как включить:
• Открываешь Settings → ищешь "terminal integrated suggest"
• Врубаешь чекбокс

Пользуемся 😇

➡️ @FrontendPortal | #vscode

Hola, Amigos! На связи Павел Гершевич, Mobile Team Lead в Amiga. Сегодня обсудим максимально полезный инструмент для командной работы — Git Hooks.

При совместной разработке кода часто возникают различия в стилях: кто-то забывает переносы строк, кто-то — запятые. Конечно, можно поручить форматирование CI/CD, но это займет больше времени. Git Hooks выполняются на рабочей станции разработчика и легко настраиваются.

Для чего могут быть полезны Git Hooks:

⚙️ Форматирование кода — dart format
⚙️ Статический анализ кода — dart analyze
⚙️ Запуск тестов

Все это можно запускать в определенные моменты:

⚙️ Перед и после git commit
⚙️ Перед и после git push
⚙️ Перед и после других команд гита

Давайте рассмотрим на примере добавления команды на форматирование кода перед тем, как разработчик сделает коммит.

Пример: добавим команду форматирования кода перед коммитом. Сначала укажем папку для Git Hooks:

git config core.hooksPath .githooks/

Далее создадим эту папку и в ней файл pre-commit. Посмотрим на его наполнение:

#!/usr/bin/env bash

#dart format
printf "\e[33;1m%s\e[0m\n" 'Running dart format'

result=$(dart format .)
result_lines=$(echo "$result" | wc -l)

if [ "$result_lines" -gt 1 ]; then
  echo "$result"
  printf "\e[31;1m%s\e[0m\n" 'Dart format applied changes, please recommit'
  exit 1
fi

echo "$result"
printf "\e[32;1m%s\e[0m\n" 'Finished running dart format'

Тут мы не просто не вызываем наш метод, но и смотрим на его результат. Если он ничего не поменял, то выведем, что все хорошо, в обратном случае попросим пользователя сделать коммит еще раз.

Во второй части мы перенесем этот скрипт на Dart.

Делитесь в чате: используете ли вы Git Hooks в своих проектах? Какие команды запускаете?

Привет! Это Роза, Flutter Dev Friflex! 👋

Когда я только начинала работать, почти не пользовалась горячими клавишами. У меня была мышка. И этого вроде бы хватало, но со временем мне захотелось ускорить свою работу, поэтому я целенаправленно начала внедрять шорткаты в свою разработку. И это было лучшим решением!
Хочу поделиться и с вами самыми полезными из них — вдруг пригодятся.

🔴Начнем с навигации и поиска:
⌘ + P — открыть файл по имени
⌘ + Shift + F — поиск по всему проекту
⌘ + G — перейти к строке
⌘ + Shift + O — перейти к функции или символу в файле

🔴Редактирование кода:
Control + Space — автодополнение
⌘ + / — закомментировать или раскомментировать строку
Option + ↑/↓ — переместить строку вверх или вниз
Shift + Option + ↑/↓ — скопировать строку вверх или вниз
⌘ + Shift + K — удалить строку
Shift + Option + F — отформатировать документ
Option + Click — добавить множественный курсор
⌘ + Shift + L — выделить все вхождения слова
⌘ + F, затем ⌘ + Option + Enter — быстрая замена

🔴Мультикурсор и выделения:
Option + Click — добавить курсор в точку клика
⌥⌘ + ↑/↓ — вставить курсор выше / ниже
⌘ + U — отменить последнее действие с курсором
⇧⌥ + I — вставить курсор в конец каждой выбранной строки
⌘ + L — выделить текущую строку
⇧⌘ + L — выделить все вхождения текущего выделения
⌘ + F2 — выделить все вхождения текущего слова
Control + ⇧⌘ + →/← — расширить/уменьшить выделение
    
🔴Блочное выделение:
⇧⌥ + drag — выделение прямоугольником (box selection)
⇧⌥⌘ + ↑/↓/←/→ — выделение вверх/вниз/влево/вправо
⇧⌥⌘ + PgUp/PgDn — постраничное вертикальное выделение

💡Конечно, вы можете настроить сочетания клавиш под себя и увидеть весь их список:  
Code → Settings → Keyboard Shortcuts или нажмите ⌘ + K, затем ⌘ + S.

✏️Также полный список есть тут: PDF от VSCode.

Наткнулся на полезняшку для тех, кто не любит тащить весь репозиторий ради пары файлов — GitZip

Расширение для браузера, которое позволяет скачивать отдельные файлы или папки из любого GitHub-репо

Доступно в Chrome, Edge и Firefox

➡️ @FrontendPortal | #resourse

🤯 По нераскрытой причине команда Flutter задеприкейтила библиотеку flutter_markdown

Вероятно просто не хватает рук на поддержку либы

Я использовал эту тулзу для редеринга Markdown в своих проектах и естественно начал искать чем заменить

1️⃣ flutter_markdown_plus
Кто не так давно в нашей Flutter тусовочке, вы возможно ещё не знаете семантику этой приписки plus. Короче если популярная библиотека больше не поддерживается - ищите её на pubdev с припиской _plus на конце

Так повелось, когда авторы забрасывают развитие своих библиотек, их форкают и продолжают развивать под новым названием

Так и в нашем случае ответственность за разработку взяла сторонняя студия

2️⃣ gpt_markdown
Я без малейшего понятия зачем там gpt в названии. Как я понял задумка в том чтобы использовать это для вывода ответов от gpt моделек. Но по-сути обычный виджет для рендера MD, поддерживает все необходимые теги

3️⃣ markdown_widget
Ещё одна библиотека, которая реализует работу с markdown. По функционалу вроде все хорошо, но вот колиечство незакрытых issues (много) и кол-во загрузок на pubdev (мало) слегка смущает. Плюс к этому очень редко обновляется

💬 Вы как, редерите что-то в Markdown в приложениях? Или может быть в html ?