Flutter: использование тем
Очень часто в коде тех, кто только начал свой путь в разработке на Flutter встречаются бесконечные однотипные портянки вроде:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
child: Text( FilteredListAutoes[index]["cars"][index2]["name"], style: TextStyle(fontFamily: 'Poppins', color: Colors.black, fontSize: 14.sp,) .... .... final ButtonStyle raisedButtonStyleSuccess = ElevatedButton.styleFrom( onPrimary: Colors.black87, primary: Colors.orangeAccent, minimumSize: Size(120, 36), padding: EdgeInsets.symmetric(horizontal: 16), shape: const RoundedRectangleBorder( borderRadius: BorderRadius.all(Radius.circular(10)), ), ); |
т.е. повторяющиеся во всём проекте прямые указания цвета, шрифта и т.п. А что если далее необходимо будет поменять эти самые шрифты и цвета? Менять руками всё довольно утомительно. К счастью в Flutter есть встроенный механизм, который помогает решить эту задачу: в виджете MaterialApp, возможно указать «Тему», как то так:
|
1 2 3 4 5 6 7 |
import 'package:me_flutter/inc/theme.dart' as me_theme; MaterialApp( builder: EasyLoading.<em>init</em>(), title: 'Приколись!', debugShowCheckedModeBanner: false, theme: me_theme.createMeTheme(), ... |
И оформим отдельный класс с «Темой»:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
library me_flutter.theme; import 'package:flutter/material.dart'; ThemeData createMeTheme() { return ThemeData( brightness: Brightness.light, //scaffoldBackgroundColor: Colors.grey[100], bottomAppBarColor : Colors.grey[100], // цвет фона панельки нижнего меню fontFamily : "Robotic", // основной шрифт primaryColor: Colors.black, // основной цвет текста appBarTheme : AppBarTheme( backgroundColor: Colors.white // фон панели сверху (Надпись Приколись! или название страницы) ), ); } // зададим собственные названия свойств extension CustomColorScheme on ColorScheme { Color get success => const Color(0xFF28a745); Color get info => const Color(0xFF17a2b8); Color get warning => const Color(0xFFffc107); Color get danger => const Color(0xFFdc3545); Color get TrayBackground => Colors.blue.shade900; // полоска трея вверху Color get TrayFontColor => Colors.white; // цвет текста в трее вверху } |
И далее во всех вложенных виджетах, автоматически будут применятся данные цвета. Так-же их можно указать принудительно, например так:
|
1 2 3 4 |
color: Theme.of(context).primaryColor .. color: Theme.of(context).colorScheme.TrayFontColor //своё собственное свойство |