Настройка тем в приложении Flutter

Development | Amber | Комментировать запись

Flutter поддерживает пакеты пользовательских интерфейсов (UI), такие как Material и Cupertino. Эти дизайн-системы служат для обеспечения единого и связного эстетического решения всего вашего приложения.

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

В этой статье мы рассмотрим некоторые методы настройки общего вида приложений Flutter с помощью тем.

Требования

• Скачайте и установите Flutter.
• Установите Android Studio или Visual Studio Code.
• Рекомендуется также установить плагины для редактора кода:
  • Для Android Studio – Flutter и Dart.
  • Для Visual Studio Code – Flutter.

Эта статья была протестирована на версиях Flutter v1.22.2, Android SDK v30.0.2 и Android Studio v4.1.

1: Создание тестового приложения

Чтобы выполнять примеры из этого мануала, мы создадим простое тестовое приложение Flutter.

Подготовив среду к работе Flutter, вы можете запустить следующую команду, чтобы создать новое приложение:

flutter create flutter_themes_example

Перейдите в каталог нашего нового проекта:

cd flutter_themes_example

Команда flutter create создаст демо-приложение, которое будет отображать количество нажатий кнопки.

Теперь, когда у нас есть рабочее приложение Flutter, использующее компоненты пользовательского интерфейса Material Design, мы можем начать пользовательскую настройку темы.

2: Использование тем по умолчанию

Разработанный в Google пакет Material включает в себя две встроенные темы – светлую версию (используется по умолчанию) и темную.

Чтобы установить стили для всего приложения, нужно задать тему методу ThemeData в виджете MaterialApp (в нашем случае доступны значения light() или dark()).

Откройте файл main.dart в редакторе кода и измените значение theme на ThemeData.dark():

// ...

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.dark(),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

// ...

Скомпилируйте свой код и запустите его в эмуляторе. Вы увидите на экране страницу Flutter Demo Home Page со счетчиком нажатия кнопки. Страница будет использовать стандартную темную тему.

Теперь мы можем попробовать расширенные настройки тем.

3: Глобальные темы

Также параметры в ThemeData можно передавать напрямую. В официальной документации вы найдете все доступные свойства, включая primaryColor, fontFamily и cursorColor.

Некоторые свойства в ThemeData имеют можно использовать с суффиксом Brightness. К примеру, если параметр accentColor изменяет только кнопку, то accentColorBrightness изменит текст или значок на кнопке. Параметры Brightness поддерживают значения light или dark.

Откройте main.dart в редакторе кода и отредактируйте ThemeData, чтобы внести пользовательские параметры primaryColor, accentColor и accentColorBrightness:

// ...

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primaryColor: Colors.purple[800],
        accentColor: Colors.amber,
        accentColorBrightness: Brightness.dark
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

// ...

Затем скомпилируйте код и запустите его в эмуляторе. Вы увидите ту же страницу Flutter Demo Home Page со счетчиком. Однако теперь панель приложения будет пурпурного цвета с белым текстом, а кнопка – желтого цвета с темными символами.

Давайте попробуем расширить наши темы.

4: Адаптация тем

Также можно взять существующую тему за основу и изменить в ней только определенные свойства. Чтобы расширить тему и передать ей пользовательский стиль, вы можете использовать метод copyWith.

Откройте файл main.dart в редакторе кода и при помощи метода ThemeData попробуйте расширить тему dark:

// ...

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.dark().copyWith(
        primaryColor: Colors.purple[800],
        accentColor: Colors.amber,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

// ...

Скомпилируйте свой код и запустите его в эмуляторе. После этого уже знакомая нам страница останется темной со светлым текстом, однако панель будет не черная (как в стандартной теме из раздела 2), а пурпурная. И кнопка теперь не бирюзовая, а желтая. По сути мы наложили глобальную тему из предыдущего разделана стандартную тему dark.

5: Темы в пользовательских виджетах

В предыдущих примерах мы использовали виджеты Material. Эти виджеты разработаны для метода ThemeData. Если бы мы создавали новый пользовательский виджет, нам нужно было бы убедиться, что он поддерживает свойства тем. Для доступа ко всем свойствам ThemeData можно использовать Theme.of().

Посмотрим на следующий пример файла lib/main.dart, в котором существующая кнопка настраивается для поддержки свойств темы из ThemeData:

// ...

class _MyHomePageState extends State<MyHomePage> {
  // ...

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // ...

      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        backgroundColor: Theme.of(context).primaryColor,
        foregroundColor: Theme.of(context).primaryColorLight,
        child: Icon(Icons.add),
      ),
    );
  }
}

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

Заключение

В этой статье вы узнали, как использовать, настраивать и расширять темы во Flutter. Темы позволяют придавать приложениям единый и целостный внешний вид.

За дополнительной информацией обращайтесь к официальной документации.

Читайте также: Как создать свое первое приложение Flutter