Приветствую, флаттер-сообщество! Шрифты играют решающую роль в визуальной согласованности и пользовательском интерфейсе ваших приложений. Они передают информацию, настроение и многое другое. Однако управление этими стилями может оказаться непростой задачей, особенно в крупномасштабных проектах.
В этой статье мы рассмотрим, как реализовать универсальные стили шрифтов во Flutter. Это обеспечит вашему приложению единообразие, привлекательный дизайн и значительно упростит процесс разработки. Мы поделимся нашим опытом создания Xela Design System, нашей уникальной библиотеки, которая содержит множество готовых к использованию компонентов, включая стили шрифтов.
Мы стремимся продемонстрировать, как мы использовали Flutter для создания масштабируемых, универсальных и легко настраиваемых стилей шрифтов в Xela Design System. Оставайтесь с нами, и мы проведем вас через каждый шаг этого путешествия.
Шаг 1. Создание проекта Flutter в Android Studio
Давайте начнем наше путешествие с самого начала — создадим новый проект Flutter. Если вы уже знакомы с Flutter и Android Studio, этот шаг будет для вас довольно простым. Если вы новичок во Flutter, не волнуйтесь, мы рассмотрим все детали.
- Запустите Android Studio: убедитесь, что у вас установлена последняя версия Android Studio и плагин Flutter. Если нет, то вы можете скачать их с официальных сайтов Android Studio и Flutter.
- Создайте новый проект Flutter: перейдите к
File -> New -> New Flutter Project
. - Выберите тип проекта: В открывшемся окне выберите
Flutter Application
и нажмитеNext
. - Настройте проект: заполните все поля, включая название проекта, местоположение проекта и описание. Затем выберите Flutter SDK, который вы хотите использовать (если у вас установлено несколько версий).
- Выберите имя пакета проекта. Следующим шагом будет выбор имени пакета вашего проекта. Обычно это обратный URL-адрес вашего веб-сайта, но вы можете выбрать любое уникальное имя.
- Завершение: нажмите
Finish
, и Android Studio создаст для вас новый проект Flutter.
Теперь у вас есть новый проект Flutter, готовый к дальнейшей настройке и развитию. В следующем блоке мы рассмотрим, как начать работать со стилями шрифтов в вашем новом проекте.
Шаг 2. Создание папки uikit в каталоге lib
Следующий шаг в нашем процессе включает создание структуры каталогов для нашего проекта. Правильная организация файлов и каталогов в проекте является ключом к эффективной и управляемой разработке. Давайте создадим папку с именем uikit
, в которой будут храниться наши пользовательские стили и компоненты пользовательского интерфейса.
- Откройте каталог lib: на левой панели Android Studio вы увидите каталог
lib
. Здесь находится основной код вашего приложения Flutter. - Создайте новый каталог: щелкните правой кнопкой мыши каталог
lib
, затем выберитеNew -> Directory
. Введитеuikit
в качестве имени нового каталога.
Теперь у вас есть каталог uikit
в каталоге lib
вашего проекта. Это будет наш центр стилей и компонентов пользовательского интерфейса. На следующих шагах мы начнем заполнять его нашими стилями шрифтов.
Шаг 3. Создание файла дротика text_style.dart
Теперь, когда у нас есть папка uikit
, давайте создадим файл Dart, который будет содержать наши стили шрифтов. Мы назовем этот файл text_style.dart
.
- Перейдите к папке uikit: нажмите на папку
uikit
, которую мы создали на предыдущем шаге. - Создайте новый файл 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
из нашей системы дизайна. Давайте добавим этот шрифт в наш проект.
- Создайте папку ресурсов: щелкните правой кнопкой мыши корневой каталог вашего проекта и выберите
New -> Directory
. Введитеassets
в качестве имени новой папки. - Создайте папку шрифтов в папке с ресурсами: щелкните правой кнопкой мыши папку
assets
, которую мы только что создали, затем выберитеNew -> Directory
. Введитеfonts
в качестве имени новой папки. - Добавьте файлы шрифтов: скопируйте файлы шрифтов
Nunito Sans
(обычно в формате.ttf
или.otf
) в папкуfonts
. Вы можете сделать это, перетащив файлы в окно Android Studio. - Обновите файл 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. Спасибо за чтение!