Приветствую, флаттер-сообщество! Шрифты играют решающую роль в визуальной согласованности и пользовательском интерфейсе ваших приложений. Они передают информацию, настроение и многое другое. Однако управление этими стилями может оказаться непростой задачей, особенно в крупномасштабных проектах.

В этой статье мы рассмотрим, как реализовать универсальные стили шрифтов во Flutter. Это обеспечит вашему приложению единообразие, привлекательный дизайн и значительно упростит процесс разработки. Мы поделимся нашим опытом создания Xela Design System, нашей уникальной библиотеки, которая содержит множество готовых к использованию компонентов, включая стили шрифтов.

Мы стремимся продемонстрировать, как мы использовали Flutter для создания масштабируемых, универсальных и легко настраиваемых стилей шрифтов в Xela Design System. Оставайтесь с нами, и мы проведем вас через каждый шаг этого путешествия.

Шаг 1. Создание проекта Flutter в Android Studio

Давайте начнем наше путешествие с самого начала — создадим новый проект Flutter. Если вы уже знакомы с Flutter и Android Studio, этот шаг будет для вас довольно простым. Если вы новичок во Flutter, не волнуйтесь, мы рассмотрим все детали.

  1. Запустите Android Studio: убедитесь, что у вас установлена ​​последняя версия Android Studio и плагин Flutter. Если нет, то вы можете скачать их с официальных сайтов Android Studio и Flutter.
  2. Создайте новый проект Flutter: перейдите к File -> New -> New Flutter Project.
  3. Выберите тип проекта: В открывшемся окне выберите Flutter Application и нажмите Next.
  4. Настройте проект: заполните все поля, включая название проекта, местоположение проекта и описание. Затем выберите Flutter SDK, который вы хотите использовать (если у вас установлено несколько версий).
  5. Выберите имя пакета проекта. Следующим шагом будет выбор имени пакета вашего проекта. Обычно это обратный URL-адрес вашего веб-сайта, но вы можете выбрать любое уникальное имя.
  6. Завершение: нажмите Finish, и Android Studio создаст для вас новый проект Flutter.

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

Шаг 2. Создание папки uikit в каталоге lib

Следующий шаг в нашем процессе включает создание структуры каталогов для нашего проекта. Правильная организация файлов и каталогов в проекте является ключом к эффективной и управляемой разработке. Давайте создадим папку с именем uikit, в которой будут храниться наши пользовательские стили и компоненты пользовательского интерфейса.

  1. Откройте каталог lib: на левой панели Android Studio вы увидите каталог lib. Здесь находится основной код вашего приложения Flutter.
  2. Создайте новый каталог: щелкните правой кнопкой мыши каталог lib, затем выберите New -> Directory. Введите uikit в качестве имени нового каталога.

Теперь у вас есть каталог uikit в каталоге lib вашего проекта. Это будет наш центр стилей и компонентов пользовательского интерфейса. На следующих шагах мы начнем заполнять его нашими стилями шрифтов.

Шаг 3. Создание файла дротика text_style.dart

Теперь, когда у нас есть папка uikit, давайте создадим файл Dart, который будет содержать наши стили шрифтов. Мы назовем этот файл text_style.dart.

  1. Перейдите к папке uikit: нажмите на папку uikit, которую мы создали на предыдущем шаге.
  2. Создайте новый файл Dart: щелкните правой кнопкой мыши папку uikit, затем выберите New -> Dart File. Введите text_style в качестве имени нового файла.

Теперь у вас есть файл text_style.dart в папке uikit. Это будет файл, в котором мы определяем наши стили шрифтов. На следующих шагах мы начнем писать код для наших стилей шрифтов.

Шаг 4. Импорт библиотеки материалов Flutter и создание класса XelaTextStyle

Теперь, когда у нас есть файл text_style.dart, давайте начнем писать код. Мы начнем с импорта библиотеки материалов Flutter, которая включает в себя множество полезных виджетов и стилей, и создадим наш класс стилей шрифтов XelaTextStyle.

Вставьте следующий код в text_style.dart:

import 'package:flutter/material.dart';

class XelaTextStyle {
  // Font styles will be defined here
}

Код начинается с импорта библиотеки material.dart, неотъемлемой части Flutter, которая предоставляет множество виджетов и функций для разработки приложений. Затем мы определяем новый класс XelaTextStyle, в котором будут храниться наши стили шрифтов.

На следующем шаге мы начнем определять определенные стили шрифтов в нашем классе XelaTextStyle.

Шаг 5. Добавление конструктора XelaTextStyle._()

Давайте продолжим формировать наш класс XelaTextStyle. Давайте добавим закрытый именованный конструктор XelaTextStyle._(). Это делается для того, чтобы гарантировать, что наш класс не может быть создан или расширен, что фактически делает его «статическим» классом.

Обновите свой код следующим образом:

import 'package:flutter/material.dart';

class XelaTextStyle {
  XelaTextStyle._();  // The added private constructor

  // Font styles will be defined here
}

Как видите, мы добавили XelaTextStyle._(); в наш класс. Это закрытый именованный конструктор, который делает невозможным создание экземпляров нашего класса XelaTextStyle. Это гарантирует «статический» характер класса, где у нас будут только статические члены (в данном случае стили текста), и не будет возможности создать экземпляр класса.

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

Шаг 6. Добавление пользовательского шрифта в проект

В большинстве дизайнерских проектов вы, вероятно, столкнетесь с необходимостью использования пользовательских шрифтов. В нашем случае мы будем использовать шрифт Nunito Sans из нашей системы дизайна. Давайте добавим этот шрифт в наш проект.

  1. Создайте папку ресурсов: щелкните правой кнопкой мыши корневой каталог вашего проекта и выберите New -> Directory. Введите assets в качестве имени новой папки.
  2. Создайте папку шрифтов в папке с ресурсами: щелкните правой кнопкой мыши папку assets, которую мы только что создали, затем выберите New -> Directory. Введите fonts в качестве имени новой папки.
  3. Добавьте файлы шрифтов: скопируйте файлы шрифтов Nunito Sans (обычно в формате .ttf или .otf) в папку fonts. Вы можете сделать это, перетащив файлы в окно Android Studio.
  4. Обновите файл pubspec.yaml: откройте файл pubspec.yaml и добавьте путь к файлам шрифтов в разделе assets. Ваш pubspec.yaml должен выглядеть примерно так:
flutter:
  assets:
    - assets/fonts/

Помните, что после внесения изменений в ваш pubspec.yaml вам нужно будет сохранить файл и запустить команду flutter pub get в терминале, чтобы обновить зависимости вашего проекта.

Теперь у вас есть пользовательский шрифт, доступный для использования в вашем приложении Flutter! На следующем шаге мы применим этот шрифт в стилях текста в классе XelaTextStyle.

Шаг 7. Создание статической константы fontFamily

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

Добавьте следующий код в класс XelaTextStyle:

import 'package:flutter/material.dart';

class XelaTextStyle {
  XelaTextStyle._();  

  // Font family
  static const String fontFamily = "Nunito Sans";

  // Font styles will be defined here
}

Теперь у нас есть статическая константа fontFamily, которая содержит имя нашего шрифта. В следующих шагах мы будем использовать это имя шрифта при определении стилей шрифта. Если вы захотите изменить шрифт своего приложения в будущем, вам нужно будет только обновить это значение, и изменения будут применены ко всем стилям шрифтов, которые используют fontFamily.

Шаг 8. Проверка стилей шрифтов в Xela Design System в Figma

Прежде чем мы начнем определять наши стили шрифтов во Flutter, давайте подробнее рассмотрим, какие стили у нас есть в Xela Design System в Figma. Это поможет нам понять, какие стили нам нужно создать.

Вот стили, которые у нас есть:

  • Заголовок1, Заголовок2, Заголовок3: эти стили обычно используются для заголовков разных уровней в вашем приложении.
  • Заголовок. Этот стиль часто используется для заметных заголовков или выделенных элементов на экране.
  • Подзаголовок. Этот стиль можно использовать для подзаголовков или дополнительного текста под основными заголовками.
  • Body, Body Bold, Body Small, Body Small Bold: эти стили используются для основного текста в вашем приложении. Он включает в себя варианты с нормальным начертанием, полужирным шрифтом и уменьшенным размером шрифта.
  • Подпись. Этот стиль обычно используется для подписей под изображениями или небольших текстовых заметок.
  • Большая кнопка, Средняя кнопка, Маленькая кнопка. Эти стили предназначены для текста на кнопках разного размера.

Имея в виду эти стили, давайте перейдем к следующему шагу и начнем определять эти стили в нашем проекте Flutter.

Шаг 9. Создание стиля Title1

Теперь пришло время применить стили шрифтов из нашей системы дизайна к нашему проекту Flutter. Начнем с Title1.

Добавьте следующий код в класс XelaTextStyle:

import 'package:flutter/material.dart';

class XelaTextStyle {
  XelaTextStyle._();  

  // Font family
  static const String fontFamily = "Nunito Sans";

  // Font styles
  static const TextStyle Title1 = TextStyle(
    fontSize: 60,
    fontWeight: FontWeight.w800,
    fontFamily: fontFamily,
  );
  
  // Other styles will be defined here
}

Теперь у нас есть стиль Title1, который мы можем использовать во всем нашем приложении. Этот стиль устанавливает размер шрифта 60, вес 800 (что соответствует жирному шрифту во Flutter) и использует наш пользовательский шрифт «Nunito Sans».

На следующих шагах мы продолжим определять оставшиеся стили из нашей системы дизайна.

Шаг 10. Добавление оставшихся стилей

Теперь давайте добавим оставшиеся стили шрифта в наш класс XelaTextStyle.

Ваш обновленный класс XelaTextStyle должен выглядеть так:

import 'package:flutter/material.dart';

class XelaTextStyle {
  XelaTextStyle._();  

  // Font family
  static const String fontFamily = "Nunito Sans";

  // Font styles
  static const TextStyle Title1 = TextStyle(
    fontSize: 60,
    fontWeight: FontWeight.w800,
    fontFamily: fontFamily,
  );

  static const TextStyle Title2 = TextStyle(
    fontSize: 48,
    fontWeight: FontWeight.w800,
    fontFamily: fontFamily,
  );

  static const TextStyle Title3 = TextStyle(
    fontSize: 34,
    fontWeight: FontWeight.w900,
    fontFamily: fontFamily,
  );

  static const TextStyle Headline = TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.w800,
    fontFamily: fontFamily,
  );

  static const TextStyle Subheadline = TextStyle(
    fontSize: 18,
    fontWeight: FontWeight.w800,
    fontFamily: fontFamily,
  );

  static const TextStyle Body = TextStyle(
    fontSize: 16,
    fontWeight: FontWeight.normal,
    fontFamily: fontFamily,
  );

  static const TextStyle BodyBold = TextStyle(
    fontSize: 16,
    fontWeight: FontWeight.w800,
    fontFamily: fontFamily,
  );

  static const TextStyle SmallBody = TextStyle(
    fontSize: 14,
    fontWeight: FontWeight.normal,
    fontFamily: fontFamily,
  );

  static const TextStyle SmallBodyBold = TextStyle(
    fontSize: 14,
    fontWeight: FontWeight.w800,
    fontFamily: fontFamily,
  );

  static const TextStyle Caption = TextStyle(
    fontSize: 12,
    fontWeight: FontWeight.w700,
    fontFamily: fontFamily,
  );

  static const TextStyle ButtonLarge = TextStyle(
    fontSize: 16,
    fontWeight: FontWeight.w700,
    fontFamily: fontFamily,
  );

  static const TextStyle ButtonMedium = TextStyle(
    fontSize: 14,
    fontWeight: FontWeight.w800,
    fontFamily: fontFamily,
  );

  static const TextStyle ButtonSmall = TextStyle(
    fontSize: 12,
    fontWeight: FontWeight.w800,
    fontFamily: fontFamily,
  );
}

Теперь у вас есть класс XelaTextStyle, который включает в себя все стили шрифтов, основанные на вашей дизайн-системе. Вы можете использовать эти стили во всем приложении, называя их XelaTextStyle.Title1, XelaTextStyle.Body и т. д.

Обратите внимание, что вес шрифта во Flutter может не совпадать с тем, что вы видите в своей системе дизайна, в зависимости от используемого шрифта. Это связано с тем, что Flutter и некоторые системы дизайна могут по-разному интерпретировать вес шрифта. Если шрифт выглядит не так, как вы ожидали, вам может потребоваться настроить толщину шрифта, чтобы добиться желаемого вида.

Шаг 11. Примеры использования стиля шрифта

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

Использование стилей в текстовом виджете

Виджет Text во Flutter принимает аргумент style, который позволяет вам установить стиль текста. Мы можем передать наши стили из XelaTextStyle прямо в этот аргумент.

Text(
  'Hello, Flutter!',
  style: XelaTextStyle.Headline,
)

Использование стилей в кнопках

Мы также можем использовать наши текстовые стили в других виджетах, таких как кнопки.

ElevatedButton(
  onPressed: () {},
  child: Text(
    'Press me',
    style: XelaTextStyle.ButtonLarge,
  ),
)

Использование стилей в AppBar

AppBar во Flutter также позволяет настраивать стиль текста для своего заголовка.

AppBar(
  title: Text(
    'Hello, Flutter!',
    style: XelaTextStyle.Title1,
  ),
)

Использование стилей в ListTile

ListTile позволяет установить стили текста для начального и заглавного текста.

ListTile(
  leading: Text(
    'Leading Text',
    style: XelaTextStyle.Subheadline,
  ),
  title: Text(
    'Title Text',
    style: XelaTextStyle.Body,
  ),
)

Как видите, наши стили шрифтов можно использовать в различных контекстах в нашем приложении, обеспечивая согласованность и упрощая управление стилем текста.

Заключение

Использование стилей шрифтов в проекте очень важно. Во-первых, он обеспечивает согласованность всего приложения, что повышает удобство работы пользователей. Во-вторых, это упрощает управление стилями шрифтов, поскольку все они централизованы и при необходимости могут быть легко обновлены. Наконец, это повышает эффективность и производительность разработки, особенно для более крупных и сложных проектов.

Если вы хотите еще больше упростить процесс разработки пользовательского интерфейса Flutter, мы приглашаем вас посетить наш веб-сайт по адресу xelaui.com. Здесь вы можете найти нашу готовую к использованию библиотеку Flutter с многочисленными заранее разработанными компонентами для ваших проектов. Используя промокод 4EOJFLM, вы получите скидку 25 %.

Чтобы поближе познакомиться с нашей библиотекой, вы можете посмотреть демонстрацию нашей библиотеки в полностью разработанном проекте. Эта демонстрация также включает раздел о стилях шрифтов, которые мы обсуждали в этой статье.

Мы надеемся, что информация в этой статье поможет вам в создании более привлекательных и профессиональных приложений Flutter. Спасибо за чтение!