Метка: использование тем

Flutter: использование тем

Flutter

Очень часто в коде тех, кто только начал свой путь в разработке на Flutter встречаются бесконечные однотипные портянки вроде:

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, возможно указать «Тему», как то так:

import 'package:me_flutter/inc/theme.dart' as me_theme;
MaterialApp(
  builder: EasyLoading.init(),
  title: 'Приколись!',
  debugShowCheckedModeBanner: false,
  theme: me_theme.createMeTheme(),
...

И оформим отдельный класс с «Темой»:

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;           // цвет текста в трее вверху
}

И далее во всех вложенных виджетах, автоматически будут применятся данные цвета. Так-же их можно указать принудительно, например так:

color: Theme.of(context).primaryColor
..
color: Theme.of(context).colorScheme.TrayFontColor //своё собственное свойство
Оставить комментарий , ,