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

Здесь мы узнаем, как разработать приложение, которое может динамически менять темы.

В этом проекте мы будем использовать два пакета Providerи SharedPreferences.

  • Provider: это один из известных пакетов, который используется для внедрения зависимостей и управления состоянием.
  • SharedPreferences: общие настройки позволяют нам хранить минимальное количество примитивных данных в виде пар ключ/значение в файле на устройстве. Здесь мы используем его для хранения текущей темы, чтобы пользователь получал то же самое после закрытия и возвращения обратно в приложение.

Мы можем добиться этого двумя способами: один, добавив пользовательскую опцию, а другой, автоматически переключая тему на основе настроек системы.

Во Flutter мы можем изменить тему во всем приложении с помощью ThemeData в конструкторе MaterialApp. Тема по умолчанию будет использоваться во всем приложении, если тема не предоставлена.

MaterialApp(
   theme: ThemeData( ... ), // to declare the theme to throughout the application
);

ThemeDataиспользуется для настройки внешнего вида всего приложения. Он состоит из большого количества свойств для объявления темы в нашем приложении.

ThemeData.dark() отвечает за предоставление темы dart во всем приложении.

MaterialApp(
   theme: ThemeData.dark(),  // default dark the theme 
);

ThemeData.light() дает светло-голубую тему, которая является темой по умолчанию для каждого флаттер-приложения.

Мы также можем изменить основной цветтемы. Мы можем получить следующим образом:

MaterialApp(
   theme: ThemeData(
           brightness: Brightness.light,
           primaryColor: Colors.green,
           primarySwatch: Colors.green
),);

Давайте копать

1. Добавьте пакет в файл pubsec.yaml.

dependencies:
   provider: ^6.0.3
   shared_preferences: ^2.0.15

2. Создайте класс для Общих настроек.

Создайте файл с именем mytheme_preference.dart. Здесь мы создаем два метода: getTheme() и setTheme()для получение темы и сохранение темы соответственно.

3. Создайте провайдер для состояния темы

Создайте файл с именем model_theme.dart. Здесь мы изменяем состояние темы и сохраняем ее в наших общих настройках.

  • _isDark — логическое значение, указывающее статус темы.
  • _preferences — это экземпляр переменной для MyThemePreferences.
  • Метод notifyListeners() для обновления значения переменной _isDark и перестройки пользовательского интерфейса.
  • Метод getPreference() загружает статус темы из общих настроек и устанавливает для него значение _isDark.

4. Добавьте провайдера в MaterialApp

5. Домашняя страница

Здесь мы добавляем Consumer для прослушивания и обновления пользовательского интерфейса.

Мы можем изменить тему на основе системных настроек, указав светлый ThemeData для параметра theme и темный ThemeData для темного Theme параметр.

theme: ThemeData.light(), // Provide light theme.
  darkTheme: ThemeData.dark(), // Provide dark theme.
  themeMode: ThemeMode.system, //to follow the system theme

Давайте подключимся

Мы можем быть друзьями. Найдите на Facebook, Linkedin, Github, Youtube, BuyMeACoffee и Instagram.

Посещение: Flatter Junction

Добавить:КупиКофе

Заключение

Я надеюсь, что эта статья была вам полезна, и вы узнали много нового. В этой статье я использовал различные вещи, которые могут быть новыми для некоторых из вас.

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

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

Кроме того, подпишитесь, чтобы быть в курсе интересных статей и проектов.

Обучение путем обмена оказывает большое влияние на процесс обучения и делает сообщество все больше и больше.

Совместное использование — это магнит, который притягивает к вам других энтузиастов.

Поэтому давайте сделаем небольшой шаг к тому, чтобы сделать наше учебное сообщество больше.

Поделитесь этой статьей с друзьями или твитните о статье, если она вам понравилась.

Получить полный в:



GitHub — nbnD/theme_switcher: приложение Flutter для динамического изменения темы приложения.
Новый проект Flutter. Этот проект является отправной точкой для приложения Flutter. Несколько ресурсов для начала…github.com



Повышение уровня кодирования

Спасибо, что являетесь частью нашего сообщества! Больше контента в публикации Level Up Coding.
Подписывайтесь: Twitter, LinkedIn, Информационный бюллетень
Level Up меняет рекрутинг в сфере технологий ➡️ Присоединяйтесь к нашему коллективу талантов