TGViewer
Flutter & Dart | Мобильный трудоголик Flutter & Dart | Мобильный трудоголик @hardworkerflutter · 405 subscribers
Post #77 680
👣 Создаем виджеты для Android и iOS во Flutter-приложении

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


Что такое виджеты:

Виджеты - это компонент интерфейса на главном экране устройства. Он показывает информацию или предоставляет доступ к действиям без запуска приложения.

Виджеты бывают разных типов:

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

🔵Виджеты коллекций отображают несколько элементов одного типа - например, последние статьи из новостного приложения или фотографии из галереи.

🔵Виджеты управления предоставляют быстрый доступ к часто используемым действиям - запуск поиска, создание заметки, управление плеером.

🔵Гибридные виджеты комбинируют функции разных типов. Например, музыкальный виджет одновременно показывает текущий трек (информационная часть) и предоставляет кнопки управления (управляющая часть).


Нативные инструменты:

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

На Android виджеты можно создавать двумя способами: через XML или с помощью Jetpack Glance. Glance - более современное решение на основе Compose. Оно позволяет писать декларативный код, не заморачиваясь с XML-макетами и управлением состояниями. Glance поддерживает большинство компонентов Compose: текст, кнопки, контейнеры.

На iOS виджеты реализуются через WidgetKit, доступный с iOS 14. Они создаются на SwiftUI и хорошо интегрируются в экосистему Apple. WidgetKit работает с TimelineProvider, который отвечает за данные и расписание обновлений и Entry - моделью данных для виджета.


Библиотека home_widget:

Для связи Flutter-приложения с нативными виджетами используется библиотека home_widget. Она предоставляет удобные методы для сохранения данных и обновления виджетов.

Основные методы:

🔵saveWidgetData - сохраняет данные в хранилище виджета.

🔵updateWidget - обновляет виджет на экране.

🔵getWidgetData - читает данные из виджета обратно в Flutter.

Пример использования:


Future<void> _sendAndUpdate(int? value) async {
await HomeWidget.saveWidgetData(_countKey, value);
await HomeWidget.updateWidget(
androidName: 'CounterGlanceWidgetReceiver',
iOSName: 'CounterWidget'
);
}


Сначала данные сохраняются через saveWidgetData, затем вызывается updateWidget с указанием имени виджета для каждой платформы.


🔗 Читать подробнее


💡 Вывод:

Виджеты - это полезный способ повысить вовлеченность пользователей. Во Flutter нет встроенной поддержки виджетов, но есть надежный путь через нативные инструменты. На Android - Glance (или классические XML-виджеты). На iOS - WidgetKit.

Библиотека home_widget связывает Flutter-код с нативной реализацией, позволяя сохранять данные и обновлять виджеты из Dart. Это не самый простой путь, но он рабочий и хорошо документированный.

Если вы хотите добавить виджеты в свое Flutter-приложение, начните с изучения Glance для Android и WidgetKit для iOS. А библиотека home_widget поможет соединить все воедино.


Подписаться на канал:
➡️ Flutter & Dart | Мобильный трудоголик
  • 👍 4
  • ❤ 2
  • 🔥 1
More from @hardworkerflutter
  1. Sep 29, 2026👣 Как встроить Unity игру во Flutter приложение Flutter отлично справляется с интерфейсом…
  2. Sep 25, 2026👨‍💻 Гонка за самую мощную ИИ-модель подходит к концу? Последние несколько лет за развити…
  3. Sep 22, 2026👣 Как async* упрощает работу с потоками в Dart В Dart есть инструмент, который многие нед…
  4. Sep 15, 2026👣 Влияет ли выбор state management на производительность Flutter? Можно ли ускорить Flutt…
  5. Sep 11, 2026👣 Плагин Flutter для VS Code обновился до версии 3.142.0 Вышло обновление плагина Flutter…
  6. Sep 8, 2026👣 Архитекторы, тестировщики и кодеры. Создаем мультиагентную команду Разработка с ИИ-аген…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →