Когда я начал разрабатывать во Flutter, изучать и делать приложения, я понял, как и многие другие, что при проектировании экранов в нем много повторений кода. Во время учебы я познакомился с концепцией Flutter ThemeData и тем, как она была связана в основном, а ее характеристики были распространены на другой файл.
Итак, нуждаясь в очистке своего кода, я пошел, чтобы узнать больше об этой концепции, и, просматривая Интернет, я не нашел много того, что показывало бы мне, как создать этот файл, соединив все темы приложения. Я не знал, как это сделать, я просто знал, что этот файл будет содержать всю информацию ThemeData.
Этот файл похож на любой другой: он может содержать класс или только методы или даже переменные, и все они вызывают ThemeData()
, и это виджет, который содержит все о дизайне, цветах и стилях Flutter.
Как это сделать?
Создайте папку темы в своем проекте. Внутри этой папки создайте тему. дартс-файл
Внутри этого файла вы отвечаете: если вы предпочитаете класс, мы можем сделать это следующим образом со статическими переменными:
Эти переменные могут называться как угодно, но дайте им осмысленное имя, чтобы упростить разработку. И всегда будет основной цвет, который является не чем иным, как доминирующим цветом в вашем проекте:
Пример:
class AppTheme{ static const Color colorMainText = Color.fromARGB(255, 10, 10, 10); static const Color subtextcolor = Color.fromARGB(255, 142, 142, 142); // Inside this class we can create a static ThemeData type function, assigning the name of a theme and // assigning the ThemeData itself with the proper specifications:
Эта функция - не что иное, как четкая тема ваших приложений, когда ваша сотовая телефонная система включена, какой цвет будет у приложения? а источник?
В строке x находится textSelectionTheme, которая является Темой текста вашего приложения, и в ней мы делаем "selectionColor: primaryColor"
Это означает, что тексты вашего приложения будут иметь цвет, ранее определенный как primaryColor
, который мы указали выше.
static ThemeData get lightTheme => ThemeData( useMaterial3: true, brightness: Brightness. light, colorScheme: const ColorScheme.light(), fontFamily: 'NotoSans', textTheme: textTheme, textSelectionTheme: const TextSelectionThemeData( cursorColor: primaryColor, selectionHandleColor: primaryColor, selectionColor: primaryColor), );
Объяснение: размещая функцию типа ThemeData, мы получаем доступ ко всем доступным значениям в самом виджете для манипулирования, поэтому мы можем назначить то, что лучше всего подходит для нашего проекта.
И таким же образом мы можем создать темную тему приложения, используя те же свойства:
static ThemeData get dark theme => ThemeData( useMaterial3: true, brightness: Brightness. dark, colorScheme: const ColorScheme.dark(), fontFamily: 'NotoSans', textTheme: textTheme, textSelectionTheme: const TextSelectionThemeData( cursorColor: primaryColor, selectionHandleColor: primaryColor, selectionColor: primaryColor), );
Таким образом, чтобы активировать ваши данные темы, вы поместите их в main: строка x имеет свойство «тема», и в ней мы помещаем наше имя, и, поскольку наши методы являются статическими, мы просто вызываем их позже. В этом приложении начальная тема по умолчанию — светлая.
Widget build(BuildContext context) { return GetMaterialApp( title: 'Flutter Demo', debugShowCheckedModeBanner: false, theme: AppTheme.lightTheme, themeMode: ThemeMode.system, home: SignInScreen(), ); }
Чтобы назначить его любому файлу, просто поставьте его так же, как мы поставили его в файле main. Например:
CheckboxListTile( controlAffinity: ListTileControlAffinity.leading, contentPadding: const EdgeInsets.all(0), activeColor: SicolTheme.primaryColor, visualDensity: const VisualDensity( horizontal: VisualDensity.minimumDensity), ), }
В строке x у нас есть «activeColor
», и в ней мы назначаем primaryColor
, который был определен там в теме. dart в папке с нашей темой. Таким образом, нам не нужно искать значение нужного цвета, просто назначьте его один раз, а затем вызовите в нужных местах.