Puls Design System #

Дизайн-система «Puls Glass» для Flutter, создающая эффект матового стекла с динамическими анимациями, цветовой семантикой и тактильной обратной связью. Пакет включает готовые компоненты для быстрой сборки интерфейсов в стиле «неоморфизм» с акцентом на глубину, свет и движение.

Установка #

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

dependencies:
  puls_design:
    path: ../path/to/puls_design  # локальный путь

Или используйте версию из pub.flutter-io.cn (если опубликовано):

dependencies:
  puls_design: ^1.0.1

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

flutter pub get

Пакет пока не опубликован на pub.flutter-io.cn, но доступен через Git-репозиторий. Для использования напрямую из Git укажите git: зависимость (см. документацию Flutter).

Импорт #

import 'package:puls_design/puls_design.dart';

Компоненты #

1. PulsTheme #

Центральный узел конфигурации, содержащий цвета, типографику, тени и анимационные константы.

Основные цвета

PulsTheme.bgDeepBlack      // Глубокий OLED‑черный фон
PulsTheme.accentOrange     // Оранжевый акцент (по умолчанию)
PulsTheme.accentGreen      // Зелёный акцент (успех)
PulsTheme.accentRed        // Красный акцент (ошибка)
PulsTheme.glassWhite       // Полупрозрачный белый для стекла
PulsTheme.borderWhite      // Цвет границы

Типографика

PulsTheme.heading          // Заголовок (32pt, жирный)
PulsTheme.body             // Основной текст (16pt)
PulsTheme.bodyText         // Альтернативный основной текст
PulsTheme.labelText        // Метка (14pt, полужирный, широкий кернинг)

Тени и свечение

PulsTheme.glow(Color color, {bool active = false})
// Возвращает список BoxShadow с градиентным свечением.

Анимации

PulsTheme.animationFast    // Duration(milliseconds: 200)
PulsTheme.animationMedium  // Duration(milliseconds: 400)
PulsTheme.mainCurve        // Curves.easeOutCubic

2. PulsGlassCard #

Карточка с эффектом матового стекла, поддерживающая hover‑анимацию (приподнимание, пульсацию) и настраиваемый акцентный цвет.

Параметры

Пример

PulsGlassCard(
  accentColor: PulsTheme.accentOrange,
  pulseOnHover: true,
  child: Text(
    "Это матовое стекло карточки",
    style: PulsTheme.bodyText,
  ),
)

3. PulsSystemInput #

Поле ввода с интеллектуальной цветовой индикацией состояния (нейтральное, фокус, успех, ошибка) и встроенной анимацией свечения.

Параметры

Пример

const PulsSystemInput(
  hint: "Введите системный код",
  isValid: null, // Оранжевый цвет при фокусе
)

4. PulsGlassButton #

Кнопка с тактильной обратной связью (вибрация), анимацией масштаба и многослойным свечением. Меняет интенсивность тени и цвета в зависимости от состояния нажатия.

Параметры

Пример

PulsGlassButton(
  label: "ПОДТВЕРДИТЬ",
  accentColor: PulsTheme.accentGreen,
  onTap: () => print("Action success"),
)

5. PulsStepper #

Горизонтальный степпер с анимированным появлением шагов, настраиваемой длительностью, кривыми анимации и возможностью переключения состояния по тапу.

Класс PulsStep

PulsStep(
  title: "Ядро",
  description: "Загрузка модулей",
  isCompleted: true, // или false, или null (нейтрально)
)

Параметры PulsStepper

Пример

PulsStepper(
  steps: [
    PulsStep(title: "Ядро", description: "Загрузка модулей", isCompleted: true),
    PulsStep(title: "Интерфейс", description: "Рендеринг Puls Glass", isCompleted: null),
    PulsStep(title: "Безопасность", description: "Проверка протоколов", isCompleted: null),
  ],
  onStepTapped: (index) => print("Шаг $index tapped"),
)

6. Дополнительные компоненты (v1.0.0) #

Пакет также включает следующие компоненты, доступные через импорт package:puls_design/puls_design.dart:

• PulsGlassListView – стеклянный список навигации с анимированным выбором.
• PulsGlassTabs – стеклянные вкладки (горизонтальные и вертикальные).
• PulsGlassSheet – стеклянные шторки (bottom sheet) с эффектом размытия.
• PulsVoiceButton – кнопка голосового ввода с пульсирующей анимацией.
• PulsNotification – универсальные уведомления (push и snackbar) в стиле Puls Glass.
• PulsSearchBar – стеклянная строка поиска с поддержкой голосового ввода.
• PulsGlassSpinner – спиннер загрузки с градиентным свечением.
• PulsScanProgress – прогресс‑бар с бегущим лучом.

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

Полный пример приложения #

В пакете включена полная интерактивная галерея (lib/main.dart), демонстрирующая все компоненты с цветовыми вариантами. Ниже приведён сокращённый пример, использующий несколько ключевых компонентов:

import 'package:flutter/material.dart';
import 'package:puls_design/puls_design.dart';

void main() => runApp(const PulsApp());

class PulsApp extends StatelessWidget {
  const PulsApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        scaffoldBackgroundColor: PulsTheme.bgDeepBlack,
        brightness: Brightness.dark,
      ),
      home: const DemoScreen(),
    );
  }
}

class DemoScreen extends StatefulWidget {
  const DemoScreen({super.key});

  @override
  State<DemoScreen> createState() => _DemoScreenState();
}

class _DemoScreenState extends State<DemoScreen> {
  bool _isListening = false;

  void _toggleListening() => setState(() => _isListening = !_isListening);

  void _showNotification(bool isWarning) {
    PulsNotification.push(
      context,
      title: isWarning ? "ВНИМАНИЕ" : "УСПЕХ",
      message: isWarning
          ? "Обнаружена критическая ошибка."
          : "Операция выполнена успешно.",
      isWarning: isWarning,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          padding: const EdgeInsets.all(30),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text("Puls Design System v1.0.0", style: PulsTheme.heading),
              const SizedBox(height: 10),
              Text("Демонстрация ключевых компонентов", style: PulsTheme.bodyText),

              const SizedBox(height: 40),
              // Карточка
              PulsGlassCard(
                accentColor: PulsTheme.accentOrange,
                pulseOnHover: true,
                child: Text("Карточка с эффектом стекла", style: PulsTheme.bodyText),
              ),

              const SizedBox(height: 25),
              // Поле ввода
              const PulsSystemInput(hint: "Введите запрос", isValid: null),

              const SizedBox(height: 25),
              // Поисковая строка
              PulsSearchBar(
                hint: "ПОИСК...",
                onChanged: (value) => print(value),
                onVoiceClick: _toggleListening,
              ),

              const SizedBox(height: 25),
              // Кнопки
              Wrap(
                spacing: 15,
                children: [
                  PulsGlassButton(
                    label: "УСПЕШНОЕ УВЕДОМЛЕНИЕ",
                    accentColor: PulsTheme.accentGreen,
                    onTap: () => _showNotification(false),
                  ),
                  PulsGlassButton(
                    label: "ОШИБКА",
                    accentColor: PulsTheme.accentRed,
                    onTap: () => _showNotification(true),
                  ),
                ],
              ),

              const SizedBox(height: 25),
              // Кнопка голосового ввода
              PulsVoiceButton(
                accentColor: PulsTheme.accentOrange,
                onTap: _toggleListening,
                isListening: _isListening,
                size: 100,
              ),

              const SizedBox(height: 25),
              // Индикаторы загрузки
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  PulsGlassSpinner(color: PulsTheme.accentOrange, size: 50),
                  PulsScanProgress(color: PulsTheme.accentGreen),
                ],
              ),

              const SizedBox(height: 40),
              // Степпер
              PulsStepper(
                steps: [
                  PulsStep(title: "Шаг 1", description: "Инициализация", isCompleted: true),
                  PulsStep(title: "Шаг 2", description: "Загрузка данных", isCompleted: null),
                  PulsStep(title: "Шаг 3", description: "Завершение", isCompleted: null),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Полную галерею со всеми компонентами можно найти в файле lib/main.dart внутри пакета.

Поддержка #

Пакет находится в активной разработке. Планируется добавление новых компонентов:

• Навигация с эффектом стекла
• Диалоговые окна
• Индикаторы загрузки
• Адаптивные сетки

Лицензия #

MIT