Флаттер и Твинд CSS

Опыт работы с Твинд во Флаттере.

Введение

中文 | English

Как использовать

dependencies:
  flutter_vant_kit: ^0.0.4

Планирование

На данный момент я думаю об этом, а позже буду модифицировать в соответствии с реальной ситуацией.

Пример

Цвета

Интервалы

TwText

«TwText» используется в сочетании с «TwFont». TwText — это эквивалент Text во Флаттере, но с дополнительным параметром «className».

Посмотрите на разницу с «Твинд»

<p class="font-sans text-lg font-medium text-slate-900">
  The quick brown fox jumps over the lazy dog.
</p>

Два способа использования

Первый — через «TwText»:

TwText(
  'The quick brown fox jumps over the lazy dog.', className: [
  /// 文字等宽
  TwFont().sans,
  /// 文字大小 + 行高
  TwFont().text.lg,
  /// 文字颜色
  TwFont().slate.shade900,
  /// 加粗
  TwFont().medium
])

Второй способ — использовать родной «Text» с методом «className» расширения от «TextStyle»:

Text(
  'The quick brown fox jumps over the lazy dog.',
  style: const TextStyle().className([
    TwFont().sans,
    TwFont().text.lg,
    TwFont().medium,
    TwFont().slate.shade900
  ]),
);

Поскольку TwFont — это класс, вам не нужно устанавливать плагины для этого.

Доступные свойства

Демо в проекте