Реализовать темы Flutter с помощью Provider

Целевая аудитория: Новичок

Рецепт: Переключайте темы Flutter с одного типа на другой с помощью внедрения зависимостей от провайдера и пакета управления состоянием.

Виджет фокуса: Плагин провайдера

Цель: Реализация тем с помощью плагина Provider. Реализуйте простой пользовательский интерфейс с изображением, текстом и кнопкой для переключения тем. Тема страницы по умолчанию — светлая. Нажатие на кнопку «Переключить тему» ​​применит к странице темную тему и наоборот.

Светлая тема:

Темная тема:

Посмотреть сопутствующее видео здесь

Что такое провайдер

Провайдер — это плагин/пакет, который предоставляет решение для внедрения зависимостей и управления состоянием для приложения Flutter. Он построен с использованием надежных и масштабируемых виджетов Flutter.

Шаг 1. pubspec.yaml

Добавьте зависимость пакета в pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter

  #Dependency for Provider plugin
  provider: ^3.1.0 #ChangeNotifier, Consumer, Providers

Шаг 2. Реализовать тему ChangeNotifier

Я буду использовать две темы: светлую и темную. Давайте использовать enum объявить эти две темы:

enum MyThemes { light, dark }

Теперь мне нужен ChangeNotifier это уведомит мое приложение об изменении, произошедшем в настройках темы.

class ThemesNotifier with ChangeNotifier {}

Далее идет определение ThemeData за light а также dark темы:

static final List<ThemeData> themeData = [
  ThemeData(
      brightness: Brightness.light,
      primaryColor: Colors.blue,
      accentColor: Colors.lightBlueAccent),
  ThemeData(
      brightness: Brightness.dark,
      primaryColor: Colors.orange,
      accentColor: Colors.yellowAccent)
];

Давайте инициализируем по умолчанию MyThemes а также ThemeData:

MyThemes _currentTheme = MyThemes.light;
ThemeData _currentThemeData = themeData[0];

Наконец, сеттеры и геттеры для обновления и доступа MyThemes а также ThemeData:

void switchTheme() => currentTheme == MyThemes.light
    ? currentTheme = MyThemes.dark
    : currentTheme = MyThemes.light;

set currentTheme(MyThemes theme) {
  if (theme != null) {
    _currentTheme = theme;
    _currentThemeData =
        currentTheme == MyThemes.light ? themeData[0] : themeData[1];

    //Notifies the theme change to app    
    notifyListeners();
  }
}

get currentTheme => _currentTheme;
get currentThemeData => _currentThemeData;

Шаг 3. Уведомление об изменении темы в приложении

Пример приложения «Демонстрация тем» build(...) метод использует theme атрибут для назначения ThemeData в приложение, как показано ниже. Provider.of<ThemesNotifier>(context).currentThemeData получает уведомление о смене темы, произошедшей в ThemesNotifierх switchTheme() метод.

@override
Widget build(BuildContext context) {
  return MaterialApp(
      theme: Provider.of<ThemesNotifier>(context).currentThemeData,
      home: Scaffold(
        appBar: AppBar(
          title: Text("Themes Demo"),
        ),
        body: body(),
      ));
}

Смена темы запрашивается у Switch Theme кнопка :

RaisedButton(
  child: Text("Switch Theme"),
  onPressed: () {
    Provider.of<ThemesNotifier>(context).switchTheme();
  },
),

Это все !

Запуск на Flutter Web

Примечание. Настройка веб-проекта Flutter была изменена с момента выпуска Flutter 1.9.

Пожалуйста, следуйте инструкциям по настройке веб-проекта Flutter. здесь.

Репозиторий исходного кода: Исходный код рецепта доступен здесь

Использованная литература:

1. Пакет провайдера
2. Флаттер веб
3. Открытая проблема о слиянии Flutter-Web Flutter

Удачной готовки с Flutter

Понравилась статья? Не нашли интересующую вас тему? Пожалуйста, оставьте комментарии или напишите мне о темах, которые вы хотели бы, чтобы я написал

Следуй за мной в твиттер