One UI Kit #

Современная и комплексная библиотека UI компонентов для Flutter, разработанная для проекта 1APP. One UI Kit предоставляет готовые к использованию компоненты, иконки и утилиты для создания консистентного и профессионального пользовательского интерфейса.

✨ Особенности #

🎨 Богатая коллекция иконок - 1000+ SVG иконок, организованных по категориям
🧩 Готовые компоненты - Кнопки, карточки, поля ввода, бейджи и многое другое
🎯 Адаптивный дизайн - Поддержка мобильных, планшетных и десктопных устройств
🌙 Темная тема - Полная поддержка светлой и темной темы
�� Material Design 3 - Современный дизайн-система
🔧 Утилиты и расширения - Вспомогательные методы для типичных задач
�� Обработка ошибок - Встроенные виджеты для отображения ошибок
🔔 Уведомления - Простая система SnackBar уведомлений

📦 Установка #

Добавьте зависимость в ваш pubspec.yaml:

dependencies:
  one_uikit: ^0.0.7

Затем выполните:

flutter pub get

�� Быстрый старт #

Импорт библиотеки #

import 'package:one_uikit/one_uikit.dart';

Базовое использование #

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'One UI Kit Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

🧩 Доступные компоненты #

Кнопки (OneButton) #

OneButton(
  viewModel: OneButtonViewModel(
    text: 'Нажми меня',
    onTap: () => print('Кнопка нажата!'),
    hierarchy: OneButtonHierarchy.primary,
    size: OneButtonSize.md,
  ),
)

Иерархии:

primary - Основная кнопка
secondary - Вторичная кнопка
tertiary - Третичная кнопка
destructive - Деструктивная кнопка

Размеры:

sm - Маленькая
md - Средняя
lg - Большая

Карточки (OneCard) #

OneCard(
  withShadow: true,
  onTap: () => print('Карточка нажата'),
  child: Column(
    children: [
      Text('Заголовок карточки'),
      Text('Содержимое карточки'),
    ],
  ),
)

Бейджи (OneBadge) #

OneBadge(
  viewModel: BadgeViewModel(
    text: 'Новый',
    color: BadgeColor.success,
    size: BadgeSize.md,
    icon: BadgeIcon.iconLeading,
    iconData: OneIconsEnum.check,
  ),
)

Поля ввода (OneTextField) #

OneTextField(
  decoration: InputDecoration(
    labelText: 'Email',
    hintText: 'Введите ваш email',
  ),
  keyboardType: TextInputType.emailAddress,
  validator: (value) {
    if (value?.isEmpty ?? true) {
      return 'Поле обязательно для заполнения';
    }
    return null;
  },
)

Пустые состояния (OneEmpty) #

OneEmpty(
  viewModel: EmptyViewModel(
    icon: OneIconsEnum.inbox,
    title: 'Нет данных',
    subtitle: 'Попробуйте обновить страницу или создать новый элемент',
    buttons: [
      OneButtonViewModel(
        text: 'Обновить',
        onTap: () => refreshData(),
        hierarchy: OneButtonHierarchy.primary,
      ),
    ],
  ),
)

Избранные иконки (OneFeaturedIcon) #

OneFeaturedIcon(
  viewModel: OneFeaturedIconViewModel(
    icon: OneIconsEnum.star,
    type: OneFeaturedIconType.modern,
    size: OneFeaturedIconSize.lg,
    color: OneFeaturedIconColor.brand,
  ),
)

🎨 Дизайн-система #

Цвета #

Библиотека предоставляет полную систему цветов с поддержкой светлой и темной темы:

// Основные цвета
context.color.background(BackgroundColorType.primary)
context.color.text(TextColorType.primary)
context.color.border(BorderColorType.primary)

// Семантические цвета
context.color.semantic(SemanticColorType.success)
context.color.semantic(SemanticColorType.error)
context.color.semantic(SemanticColorType.warning)
context.color.semantic(SemanticColorType.info)

Типографика #

// Заголовки
context.typography.display2xlBold
context.typography.displayXlSemibold
context.typography.displayLgMedium

// Текст
context.typography.textXlRegular
context.typography.textLgMedium
context.typography.textMdSemibold

Отступы и сетка #

// Отступы
gapH(OneSpace.s16)  // Горизонтальный отступ
gapV(OneSpace.s24)  // Вертикальный отступ

// Радиусы
BorderRadius.circular(OneRadius.xl)
BorderRadius.circular(OneRadius.lg)

🔔 Уведомления #

SnackBar уведомления #

// Успешное уведомление
context.showSnackBar(message: 'Операция выполнена успешно!');

// Ошибка
context.showSnackBar(
  message: 'Что-то пошло не так!', 
  isError: true
);

�� Обработка ошибок #

Виджет ошибки #

OneError(
  error: exception,
  stackTrace: stackTrace,
);

🖼️ Иконки #

Библиотека включает более 1000 SVG иконок, организованных по категориям:

Категории иконок #

🚨 Alerts - Иконки ошибок, предупреждений и уведомлений
➡️ Arrows - Направленные и навигационные иконки
📊 Charts - Иконки для визуализации данных
💬 Communication - Иконки сообщений и телефона
💻 Development - Иконки кода и технические
✏️ Editor - Иконки редактирования текста
🎓 Education - Иконки обучения и академические
�� Files - Иконки документов и управления файлами
�� Finance - Иконки банкинга и финансов
🌐 General - Общие и утилитарные иконки
��️ Images - Иконки фото и медиа
📐 Layout - Иконки дизайна и макета
��️ Maps - Иконки местоположения и транспорта
�� Media - Иконки аудио и видео
🔒 Security - Иконки аутентификации и безопасности
🔷 Shapes - Геометрические и дизайнерские иконки
🌍 Social - Иконки социальных сетей
⏰ Time - Иконки часов и расписания
�� Users - Иконки пользователей и профилей
🌤️ Weather - Иконки погоды и климата

Использование иконок #

// Через OneIcons
OneIcons.get(
  OneIconsEnum.activity,
  color: Colors.blue,
  size: 24,
)

// Напрямую через SVG
SvgPicture.asset('packages/one_uikit/assets/icons/general/activity.svg')

📱 Адаптивность #

Библиотека поддерживает адаптивный дизайн для различных устройств:

OneAdaptive(
  desktop: (context) => DesktopLayout(),
  tablet: (context) => TabletLayout(),
  mobile: (context) => MobileLayout(),
)

🖼️ Изображения #

OneImage виджет #

OneImage(
  imageUrl: 'https://example.com/image.jpg',
  placeholder: 'packages/one_uikit/assets/images/image_placeholder.png',
  errorWidget: Icon(Icons.error),
)

📋 Примеры использования #

Полные примеры использования всех компонентов доступны в папке example/.

�� Вклад в проект #

Мы приветствуем вклад в развитие проекта! Пожалуйста, ознакомьтесь с нашими правилами контрибьюции.

📄 Лицензия #

Этот проект лицензирован под MIT License - см. файл LICENSE для подробностей.

�� Ссылки #

GitHub: https://github.com/sapar-io/one_uikit
Issues: https://github.com/sapar-io/one_uikit/issues
Документация: https://github.com/sapar-io/one_uikit#readme

One UI Kit - Создавайте красивые и функциональные интерфейсы с легкостью! ��

one_uikit 0.1.5 one_uikit: ^0.1.5 copied to clipboard

Metadata