Обновляйте карту мгновенно, когда пользователь переключает тему устройства! (iOS / Android)
В настоящее время распространено использование приложений, которые обрабатывают темный режим на любых устройствах (например, Facebook, WhatsApp, нативные приложения…). Поскольку он был запущен с iOS 13 и Android 10, темный режим было бы довольно сложно реализовать в старом проекте, если бы никто не позаботился об этом до вас. Вот почему вы должны постараться сделать это как можно скорее, начиная новый проект!
Во Flutter мы можем легко изменить тему нашего приложения, изменив тему устройства, это можно сделать, добавив theme и darkTheme в параметры вашего MaterialApp, например :
Таким образом ваше приложение будет перестраивать виджеты Flutter всякий раз, когда пользователь меняет тему устройства. Вы можете протестировать его в симуляторе iOS, выбрав Features = ›Toggle Appearance. Если вы хотите настроить свои темы, используйте пользовательские ThemeData вместо ThemeData.light () / dark ().
Отлично, теперь мы знаем, как управлять темой виджетов Flutter в нашем приложении, теперь давайте создадим новый виджет, отображающий базовые карты Google.
Вы можете видеть, что если вы попытаетесь переключить тему устройства, с картой ничего не произойдет, потому что виджет Google Maps не является встроенным компонентом Flutter, и нам нужно управлять им самостоятельно.
То, что мы собираемся сделать, довольно просто:
- Найдите стиль Google Maps и загрузите его как актив в приложение.
- Обрабатывать, когда пользователь просит изменить тему.
- Адаптируйте стиль карты в зависимости от измененной темы.
1. Загрузите стиль JSON Google Maps.
Сначала посетите веб-сайт https://mapstyle.withgoogle.com/, чтобы выбрать темную и светлую тему, которую вы хотите использовать. Нажмите Готово, чтобы сгенерировать два загружаемых файла json.
Примечание. Если вы выберете базовую светлую тему, будет создан файл JSON с пустым массивом в виде содержимого «[]», это нормально, не обращайте на это внимания!
Теперь импортируйте этот файл как актив в свой проект Flutter. Я рекомендую вам изолировать этот файл в новой папке и добавить его в файл pubspec.yaml, назовем его map_styles /.
assets: - assets/ - assets/map_styles/
Затем добавьте свои файлы JSON в эту папку, в этом примере я назову их dark.json и light.json.
Наконец, в вашем _MapState добавьте метод для загрузки этих файлов в виде строк, чтобы позже загрузить JSON на карту:
В initState () вызовите функцию _loadMapStyles (), которая загрузит файлы json в виде строк с помощью rootBundle из services.dart. Эти строки будут использоваться в части 3.
2. Обработайте переключение темы
Во-первых, нам нужно указать виджету наблюдать за событиями с устройства. Давайте воспользуемся миксином WidgetsBindingObserver, чтобы реализовать функцию, которая управляет изменением темы.
- WidgetsBinding.instance.addObserver (this): разрешить этому виджету получать уведомления, когда пользователь меняет тему.
- didChangePlatformBrightness (): вызывается при изменении темы.
- dispose (): вызывается, когда виджет удаляется из дерева (важно!).
3. Адаптируйте стиль !!
Осталось только обновить карту, добавив в нее файлы json, которые мы создали ранее.
WidgetsBinding.instance.window.platformBrightness предоставляет текущую тему устройства, чтобы мы могли легко установить правильный стиль на основе яркости.
Затем используйте setState () при использовании _setMapStyle (), чтобы перестроить виджет и обновить пользовательский интерфейс.
Мы сделали ! ✅
Спасибо, что прочитали эту статью, и я надеюсь, что она поможет разработчикам понять, как управлять темами с помощью Google Maps!
Примечание: полный код этой демонстрации доступен здесь.
