sub_zero_design_system 1.1.0

Sub Zero 2.0 is a comprehensive Flutter design system package providing responsive components, themes, tokens, and styles for building beautiful, consistent, and accessible user interfaces.

example/lib/main.dart

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

void main() {
  runApp(const SubZeroExampleApp());
}

/// Example app demonstrating Sub Zero 2.0 Design System
class SubZeroExampleApp extends StatelessWidget {
  const SubZeroExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sub Zero Example',
      debugShowCheckedModeBanner: false,
      theme: SubZeroTheme.lightTheme,
      home: const ExampleHomePage(),
    );
  }
}

/// Home page showcasing various Sub Zero components
class ExampleHomePage extends StatefulWidget {
  const ExampleHomePage({super.key});

  @override
  State<ExampleHomePage> createState() => _ExampleHomePageState();
}

class _ExampleHomePageState extends State<ExampleHomePage> {
  bool _switchValue = false;
  bool _checkboxValue = false;
  double _sliderValue = 50;
  String _selectedRadio = 'option1';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Sub Zero 2.0 Example'),
        backgroundColor: SubZeroColors.primary,
        foregroundColor: Colors.white,
      ),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(SubZeroSpacing.md),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Section Title
            Text(
              'Design System Components',
              style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
                color: SubZeroColors.textPrimary,
              ),
            ),
            SizedBox(height: SubZeroSpacing.sm),
            Text(
              'A showcase of Sub Zero UI components',
              style: TextStyle(
                fontSize: 16,
                color: SubZeroColors.textSecondary,
              ),
            ),
            SizedBox(height: SubZeroSpacing.lg),

            // Buttons Section
            _buildSection(
              title: 'Buttons',
              children: [
                Wrap(
                  spacing: SubZeroSpacing.sm,
                  runSpacing: SubZeroSpacing.sm,
                  children: [
                    SubZeroButton(
                      label: 'Primary',
                      variant: SubZeroButtonVariant.primary,
                      onPressed: () => _showToast(context, 'Primary pressed'),
                    ),
                    SubZeroButton(
                      label: 'Secondary',
                      variant: SubZeroButtonVariant.secondary,
                      onPressed: () => _showToast(context, 'Secondary pressed'),
                    ),
                    SubZeroButton(
                      label: 'Tertiary',
                      variant: SubZeroButtonVariant.tertiary,
                      onPressed: () => _showToast(context, 'Tertiary pressed'),
                    ),
                    SubZeroButton(
                      label: 'Disabled',
                      variant: SubZeroButtonVariant.primary,
                      onPressed: null,
                    ),
                  ],
                ),
              ],
            ),

            // Badges Section
            _buildSection(
              title: 'Badges',
              children: [
                Wrap(
                  spacing: SubZeroSpacing.sm,
                  runSpacing: SubZeroSpacing.sm,
                  children: [
                    SubZeroBadge(count: 5),
                    SubZeroBadge(count: 99, style: SubZeroBadgeStyle.outlined),
                    SubZeroBadge(variant: SubZeroBadgeVariant.dot),
                    SubZeroBadge(count: 10, style: SubZeroBadgeStyle.muted),
                  ],
                ),
              ],
            ),

            // Tags Section
            _buildSection(
              title: 'Tags',
              children: [
                Wrap(
                  spacing: SubZeroSpacing.sm,
                  runSpacing: SubZeroSpacing.sm,
                  children: [
                    SubZeroTag(label: 'Flutter'),
                    SubZeroTag(
                        label: 'Dart', variant: SubZeroTagVariant.filled),
                    SubZeroTag(
                      label: 'Success',
                      status: SubZeroTagStatus.success,
                    ),
                    SubZeroTag(
                      label: 'Warning',
                      status: SubZeroTagStatus.warning,
                    ),
                    SubZeroTag(label: 'Error', status: SubZeroTagStatus.error),
                    SubZeroTag(label: 'Info', status: SubZeroTagStatus.info),
                  ],
                ),
              ],
            ),

            // Avatars Section
            _buildSection(
              title: 'Avatars',
              children: [
                Row(
                  children: [
                    SubZeroAvatar(initials: 'JD', size: SubZeroAvatarSize.s),
                    SizedBox(width: SubZeroSpacing.sm),
                    SubZeroAvatar(initials: 'JS', size: SubZeroAvatarSize.m),
                    SizedBox(width: SubZeroSpacing.sm),
                    SubZeroAvatar(initials: 'BW', size: SubZeroAvatarSize.l),
                    SizedBox(width: SubZeroSpacing.sm),
                    SubZeroAvatar(initials: 'AB', size: SubZeroAvatarSize.xl),
                  ],
                ),
              ],
            ),

            // Form Controls Section
            _buildSection(
              title: 'Form Controls',
              children: [
                Row(
                  children: [
                    Text('Toggle Switch: ', style: TextStyle(color: SubZeroColors.textPrimary)),
                    SubZeroSwitch(
                      value: _switchValue,
                      onChanged: (value) => setState(() => _switchValue = value),
                    ),
                  ],
                ),
                SizedBox(height: SubZeroSpacing.md),
                SubZeroCheckbox(
                  value: _checkboxValue,
                  label: 'Checkbox Option',
                  onChanged: (value) =>
                      setState(() => _checkboxValue = value ?? false),
                ),
                SizedBox(height: SubZeroSpacing.md),
                SubZeroRadio<String>(
                  value: 'option1',
                  groupValue: _selectedRadio,
                  label: 'Radio Option 1',
                  onChanged: (value) =>
                      setState(() => _selectedRadio = value ?? 'option1'),
                ),
                SubZeroRadio<String>(
                  value: 'option2',
                  groupValue: _selectedRadio,
                  label: 'Radio Option 2',
                  onChanged: (value) =>
                      setState(() => _selectedRadio = value ?? 'option1'),
                ),
                SizedBox(height: SubZeroSpacing.md),
                Row(
                  children: [
                    Text('Slider: ${_sliderValue.toInt()}', 
                      style: TextStyle(color: SubZeroColors.textPrimary)),
                    SizedBox(width: SubZeroSpacing.sm),
                    Expanded(
                      child: SubZeroSlider(
                        value: _sliderValue,
                        min: 0,
                        max: 100,
                        onChanged: (value) => setState(() => _sliderValue = value),
                      ),
                    ),
                  ],
                ),
              ],
            ),

            // Search Section
            _buildSection(
              title: 'Search',
              children: [
                SubZeroSearchField(
                  hintText: 'Search for anything...',
                  onChanged: (value) {},
                ),
              ],
            ),

            // Card Section
            _buildSection(
              title: 'Cards',
              children: [
                SubZeroCard(
                  header: SubZeroCardHeader(title: 'Card Title'),
                  body: Padding(
                    padding: EdgeInsets.all(SubZeroSpacing.md),
                    child: Text(
                      'This is a Sub Zero card component with elevation and rounded corners.',
                      style: Theme.of(context).textTheme.bodyMedium,
                    ),
                  ),
                ),
              ],
            ),

            // Divider Section
            _buildSection(
              title: 'Dividers',
              children: [
                const SubZeroDivider(),
                SizedBox(height: SubZeroSpacing.sm),
                SubZeroDivider(variant: SubZeroDividerVariant.section),
              ],
            ),

            // Dialog Button
            _buildSection(
              title: 'Dialog',
              children: [
                SubZeroButton(
                  label: 'Show Dialog',
                  variant: SubZeroButtonVariant.secondary,
                  onPressed: () => _showDialog(context),
                ),
              ],
            ),

            SizedBox(height: SubZeroSpacing.xxl),
          ],
        ),
      ),
    );
  }

  Widget _buildSection({
    required String title,
    required List<Widget> children,
  }) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          title,
          style: TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.w600,
            color: SubZeroColors.textPrimary,
          ),
        ),
        SizedBox(height: SubZeroSpacing.sm),
        ...children,
        SizedBox(height: SubZeroSpacing.lg),
        const SubZeroDivider(),
        SizedBox(height: SubZeroSpacing.lg),
      ],
    );
  }

  void _showToast(BuildContext context, String message) {
    SubZeroToast.show(
      context,
      message: message,
      type: SubZeroToastType.info,
    );
  }

  void _showDialog(BuildContext context) {
    showSubZeroDialog(
      context: context,
      title: 'Example Dialog',
      body: 'This is a Sub Zero dialog component with customizable actions.',
      actions: SubZeroDialogActions(
        primaryLabel: 'Confirm',
        onPrimary: () {
          Navigator.of(context).pop();
          _showToast(context, 'Confirmed!');
        },
        secondaryLabel: 'Cancel',
        onSecondary: () => Navigator.of(context).pop(),
      ),
    );
  }
}