VooUI Core

A comprehensive Flutter UI component library providing Material 3 design system components with enhanced features and customization options.

pub package style: flutter_lints

Features

  • Material 3 Design System: Full Material 3 (Material You) design implementation
  • Customizable Design Tokens: Flexible spacing, radius, and animation systems
  • Rich Input Components: Text fields, buttons, checkboxes, switches, sliders, and more
  • Responsive Design: Built-in responsive utilities and breakpoint system
  • Theme Integration: Seamless integration with Flutter's theme system
  • Accessibility: WCAG compliant components with proper semantics

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  voo_ui_core: ^0.1.0

Then run:

flutter pub get

Usage

Basic Setup

Wrap your app with the VooDesignSystem to provide design tokens throughout your widget tree:

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

void main() {
  runApp(
    VooDesignSystem(
      data: VooDesignSystemData.defaultSystem,
      child: MyApp(),
    ),
  );
}

Components

Buttons

VooButton(
  onPressed: () {},
  child: const Text('Click Me'),
)

VooButton(
  variant: VooButtonVariant.outlined,
  icon: Icons.add,
  onPressed: () {},
  child: const Text('Add Item'),
)

Text Fields

VooTextField(
  label: 'Email',
  hint: 'Enter your email',
  onChanged: (value) {
    // Handle change
  },
)

Checkboxes

VooCheckbox(
  value: isChecked,
  onChanged: (value) {
    setState(() {
      isChecked = value ?? false;
    });
  },
)

// With label
VooCheckboxListTile(
  title: const Text('Accept terms'),
  value: isAccepted,
  onChanged: (value) {
    setState(() {
      isAccepted = value ?? false;
    });
  },
)

Switches

VooSwitch(
  value: isEnabled,
  onChanged: (value) {
    setState(() {
      isEnabled = value;
    });
  },
)

// With label
VooSwitchListTile(
  title: const Text('Enable notifications'),
  value: notificationsEnabled,
  onChanged: (value) {
    setState(() {
      notificationsEnabled = value;
    });
  },
)

Sliders

VooSlider(
  value: sliderValue,
  min: 0,
  max: 100,
  divisions: 10,
  label: sliderValue.toStringAsFixed(0),
  onChanged: (value) {
    setState(() {
      sliderValue = value;
    });
  },
)

Date & Time Pickers

VooDateTimePicker(
  value: selectedDate,
  label: 'Select Date',
  onChanged: (date) {
    setState(() {
      selectedDate = date;
    });
  },
)

// With time
VooDateTimePicker(
  value: selectedDateTime,
  label: 'Select Date & Time',
  showTime: true,
  onChanged: (dateTime) {
    setState(() {
      selectedDateTime = dateTime;
    });
  },
)

// Date range
VooDateRangePicker(
  value: dateRange,
  label: 'Select Range',
  onChanged: (range) {
    setState(() {
      dateRange = range;
    });
  },
)

Radio Groups

VooRadioGroup<String>(
  items: ['Option 1', 'Option 2', 'Option 3'],
  value: selectedOption,
  labelBuilder: (item) => item,
  onChanged: (value) {
    setState(() {
      selectedOption = value;
    });
  },
)

Segmented Buttons

VooSegmentedButton<String>(
  segments: [
    VooButtonSegment(
      value: 'day',
      label: const Text('Day'),
    ),
    VooButtonSegment(
      value: 'week',
      label: const Text('Week'),
    ),
    VooButtonSegment(
      value: 'month',
      label: const Text('Month'),
    ),
  ],
  selected: selectedView,
  onSelectionChanged: (value) {
    setState(() {
      selectedView = value;
    });
  },
)

Design System Customization

Create custom design systems for different themes or screen sizes:

// Compact design for mobile
VooDesignSystem(
  data: VooDesignSystemData.compact,
  child: MyCompactView(),
)

// Comfortable design with more spacing
VooDesignSystem(
  data: VooDesignSystemData.comfortable,
  child: MyComfortableView(),
)

// Custom design tokens
VooDesignSystem(
  data: const VooDesignSystemData(
    spacingUnit: 10.0,
    radiusUnit: 6.0,
    borderWidth: 2.0,
    animationDuration: Duration(milliseconds: 250),
    inputHeight: 56.0,
    buttonHeight: 48.0,
  ),
  child: MyCustomView(),
)

Responsive Design

Use the responsive utilities to create adaptive layouts:

class MyResponsiveWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final breakpoint = context.vooBreakpoint;
    
    if (breakpoint.isMobile) {
      return MobileLayout();
    } else if (breakpoint.isTablet) {
      return TabletLayout();
    } else {
      return DesktopLayout();
    }
  }
}

Components Reference

Input Components

  • VooButton - Material 3 button with variants (elevated, outlined, text, tonal)
  • VooTextField - Enhanced text input field with validation
  • VooCheckbox - Checkbox with Material 3 styling
  • VooCheckboxListTile - Checkbox with integrated label
  • VooCheckboxGroup - Multiple checkbox selection
  • VooSwitch - Toggle switch component
  • VooSwitchListTile - Switch with integrated label
  • VooSwitchGroup - Multiple switch controls
  • VooSlider - Slider for numeric input
  • VooRadio - Radio button control
  • VooRadioGroup - Radio button group for single selection
  • VooSegmentedButton - Segmented button control
  • VooDateTimePicker - Date and time picker
  • VooDateRangePicker - Date range selector

Display Components

  • VooCard - Material 3 card container
  • VooChip - Chip widget for tags and filters
  • VooListTile - Enhanced list tile
  • VooTimestampText - Formatted timestamp display

Layout Components

  • VooContainer - Container with design system spacing
  • VooPageHeader - Page header with title and actions
  • VooResponsiveBuilder - Responsive layout builder
  • VooBreakpoint - Breakpoint utilities
  • VooAppBar - Customized app bar

Feedback Components

  • VooEmptyState - Empty state placeholder
  • VooProgressIndicator - Loading indicators
  • VooStatusBadge - Status badges and indicators

Foundation

  • VooDesignSystem - Design token provider
  • VooDesignSystemData - Design token configuration
  • VooColors - Color palette
  • VooTypography - Typography system
  • VooSpacing - Spacing system
  • VooTheme - Theme configuration

Accessing Design Tokens

// Access design tokens from context
final design = context.vooDesign;

// Use spacing
Container(
  padding: EdgeInsets.all(design.spacingMd),
  margin: EdgeInsets.symmetric(horizontal: design.spacingLg),
)

// Use radius
Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(design.radiusMd),
  ),
)

// Use animation
AnimatedContainer(
  duration: design.animationDuration,
  curve: design.animationCurve,
)

Migration Guide

If you're migrating from the monolithic voo_ui package:

  1. Update your pubspec.yaml:
dependencies:
  voo_ui_core: ^0.1.0
  # Add these if needed:
  voo_data_grid: ^0.1.0
  voo_calendar: ^0.1.0
  1. Update imports:
// Old
import 'package:voo_ui/voo_ui.dart';

// New
import 'package:voo_ui_core/voo_ui_core.dart';
  1. The API remains the same, just the package structure has changed.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License - see the LICENSE file for details

Libraries

voo_ui_core