Zoni UI

A comprehensive Flutter design system providing themes, components, and utilities for building consistent Zoni applications.

Features

🎨 Complete Design System: Comprehensive color palette, typography scale, and spacing system
🧩 Ready-to-use Components: Buttons, cards, text fields, loading indicators, and more
🌙 Dark Mode Support: Built-in light and dark theme variants
♿ Accessibility First: All components include proper semantic labels and accessibility support
📱 Material Design 3: Follows the latest Material Design guidelines
🧪 Fully Tested: Comprehensive unit, widget, and golden tests
📚 Well Documented: Extensive documentation and examples

Getting Started

Installation

Add zoni_ui to your pubspec.yaml:

dependencies:
  zoni_ui: ^0.1.0

Then run:

flutter pub get

Basic Setup

Wrap your app with the Zoni theme:

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Zoni App',
      theme: ZoniTheme.light(),
      darkTheme: ZoniTheme.dark(),
      home: MyHomePage(),
    );
  }
}

Usage

Components

Buttons

// Filled button (default)
ZoniButton(
  onPressed: () => print('Pressed!'),
  child: Text('Filled Button'),
)

// Outlined button
ZoniButton(
  onPressed: () => print('Pressed!'),
  variant: ZoniButtonVariant.outlined,
  child: Text('Outlined Button'),
)

// Button with icon
ZoniButton(
  onPressed: () => print('Pressed!'),
  icon: Icon(Icons.star),
  child: Text('Icon Button'),
)

// Loading button
ZoniButton(
  onPressed: () => print('Pressed!'),
  isLoading: true,
  child: Text('Loading...'),
)

Cards

ZoniCard(
  elevation: ZoniCardElevation.medium,
  padding: EdgeInsets.all(16),
  child: Column(
    children: [
      Text('Card Title'),
      Text('Card content goes here'),
    ],
  ),
)

Text Fields

ZoniTextField(
  label: 'Email',
  hintText: 'Enter your email',
  prefixIcon: Icon(Icons.email),
  onChanged: (value) => print('Input: $value'),
)

Loading Indicators

// Circular loading indicator
ZoniLoadingIndicator(
  style: ZoniLoadingStyle.circular,
  size: ZoniLoadingSize.large,
)

// Dots loading indicator
ZoniLoadingIndicator(
  style: ZoniLoadingStyle.dots,
)

Design Tokens

Colors

// Primary colors
ZoniColors.primary
ZoniColors.primaryLight
ZoniColors.primaryDark

// Semantic colors
ZoniColors.success
ZoniColors.warning
ZoniColors.error
ZoniColors.info

// Surface colors
ZoniColors.background
ZoniColors.surface
ZoniColors.surfaceVariant

Typography

// Display styles
ZoniTextStyles.displayLarge
ZoniTextStyles.displayMedium
ZoniTextStyles.displaySmall

// Headline styles
ZoniTextStyles.headlineLarge
ZoniTextStyles.headlineMedium
ZoniTextStyles.headlineSmall

// Body styles
ZoniTextStyles.bodyLarge
ZoniTextStyles.bodyMedium
ZoniTextStyles.bodySmall

Spacing

// Spacing values (following 8pt grid)
ZoniSpacing.xs    // 4px
ZoniSpacing.sm    // 8px
ZoniSpacing.md    // 16px
ZoniSpacing.lg    // 24px
ZoniSpacing.xl    // 32px

Border Radius

ZoniBorderRadius.sm    // 4px
ZoniBorderRadius.md    // 8px
ZoniBorderRadius.lg    // 12px
ZoniBorderRadius.xl    // 16px

Examples

Check out the /example folder for complete examples showing how to use Zoni UI components in real applications.

Contributing

We welcome contributions! Please see our Contributing Guide for details.

License

This project is licensed under the MIT License - see the LICENSE file for details.