Hola, Amigos! С наступающим Новым годом🎄

2024 год подходит к концу — быстрый, шумный и полный интересных задач и открытий! Мы вместе с вами писали тысячи строк кода и учились новому. А сейчас отличное время, чтобы сделать паузу и набраться сил для будущих свершений🥂

Желаем, чтобы в 2025 у вас все легко складывалось: код работал стабильно, проекты вдохновляли, а идеи приходили сами собой❤️

Не забывайте находить баланс, отдыхать и наполняться энергией, и до встречи в Новом году!

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

Начнем с того, как понять, открыта ли клавиатура. Тут есть несколько методов — через MediaQuery, через WidgetBindings и через библиотеки.

MediaQuery

final bottomInset = MediaQuery.of(context).viewInsets.bottom;
if (bottomInset == 0) {
// клавиатура закрыта
} else {
// клавиатура открыта
}

У этого способа есть большой минус — он не работает на комплексной верстке, а наши приложения чаще всего такие.

WidgetBindings

Второй способ сложнее, но надежнее. Сначала мы должны добавить к нашему классу WidgetBindingsObserver.

class _MyWidgetState extends State<MyWidget> with WidgetBindingsObserver {
...
}

Далее подключаем все:

@override
void initState() {
super.initState();
WidgetBindings.addObserver(this);
}

@override
void dispose() {
WidgetBindings.removeObserver(this);
super.dispose();
}

@override
didChangeMetrics() {
super.didChangeMetrics();
final isKeyboardOpen = WidgetsBinding.instance.window.viewInsets.bottom > 0;
}

Но и этот метод не идеален, так как не сможем получить высоту клавиатуры, если это необходимо.

Библиотеки

Тут достаточно большой выбор таких библиотек. Но наш совет — выбирать те, у которых много скачиваний, они чаще работают.

Во второй части мы расскажем, зачем это нужно и какие библиотеки выбрали мы. Делитесь в чате, были ли у вас случаи, когда нужно было отслеживать клавиатуру?

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

Случаи, когда нам нужно отслеживать

1. Если мы работаем с виджетом, который плохо складывается. Например, платформенные виджеты. В одном из наших кейсов на WebView располагалось текстовое поле, которое на Android начало уходить под клавиатуру. В этом случае мы использовали отслеживание для добавления отступов, что помогло справиться с проблемой.

2. Чтобы выводить дополнительные виджеты сразу над клавиатурой, если она открыта. Например, список emoji или что-то подобное. А также менять что-либо на экране, если нам нужно.

3. Это может быть одним из способов отслеживания, пишет ли пользователь что-то в чат. Все же видели надписи «печатает…» в мессенджерах.

Как мы получили высоту клавиатуры

Так как у нас не получилось сжимать WebView автоматически, мы решили прибегнуть к отслеживанию. Попробовав способы из первой части, мы поняли, что они нам не подходят. Поэтому долго выбирали библиотеку, которая подойдет. Вот несколько:

keyboard_height_plugin — позволяет отслеживать не только, открыта ли клавиатура, но и ее высоту. Именно эту библиотеку мы выбрали в итоге.

flutter_keyboard_visibility — самая популярная библиотека, но достаточно сложная в подключении.

Именно эти 2 пакета мы можем порекомендовать к использованию в своих проектах.

Теперь давайте посмотрим, как мы организовали отслеживание. Наш виджет уже и так был Stateful, поэтому работ проводилось немного. Сначала мы добавили объект из библиотеки и создали переменную под размер самой клавиатуры:

final _keyboardHeightPlugin = KeyboardHeightPlugin();
double _keyboardHeight = 0;

И в методе initState подписались на изменения через callback:

_keyboardHeightPlugin.onKeyboardHeightChanged((double height) {
setState(() {
_keyboardHeight = height;
});
});

Не забываем, что сам объект нужно разрушить вместе с виджетом, поэтому добавляем в dispose вот такой вызов:

_keyboardHeightPlugin.dispose();

Теперь можно применить новую переменную для отступа.

Делитесь в чате, были ли у вас похожие случаи?

Hola, Amigos! На связи Михаил Чернецов, Flutter Dev в Amiga. Сегодня расскажем, как работать с файлами cookie в WebView на Flutter. Мы рассмотрим два популярных пакета для работы — webview_flutter и flutter_inappwebview, которые предоставляют схожий функционал. Рассмотрим работу с куки в webview_flutter:

final cookieManager = WebViewCookieManager();

// устанавливаем cookie с именем test и значением тест на наш хост.
cookieManager.setCookie(
  WebViewCookie(
    name: “test”, 
    value: “test”,
    domain: “https://example.com”,
  ),
);

Для использование cookie в flutter_inappwebview используется похожая схема работы с куками:

final cookieManager = CookieManager.instance();
cookieManager.setCookie(
  url: WebUrl(“https://example.com”)
  name: “test”, 
  value: “test”,
),

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

List<Cookie> cookies = await cookieManager.getCookies(url: WebUrl(“https://example.com”));

Делитесь в чате кейсами работы с Cookies на своих проектах!