Skip to main content

​
Quick Start

This guide will help you create a complete working application with Chromia UI, demonstrating theme setup, component usage, and basic navigation.

​
Your First Chromia UI App

1

Set up the theme provider

Wrap your MaterialApp with ChromiaTheme to provide the design system throughout your widget tree:
main.dart
import 'package:flutter/material.dart';
import 'package:chromia_ui/chromia_ui.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return ChromiaTheme(
      data: ChromiaThemeData.light(),
      child: MaterialApp(
        title: 'My App',
        theme: ChromiaTheme.of(context).toMaterialTheme(),
        home: const HomePage(),
      ),
    );
  }
}
Use ChromiaThemeData.light() for light theme or ChromiaThemeData.dark() for dark theme.
2

Build your home page

Create a home page that demonstrates several Chromia UI components:
home_page.dart
import 'package:flutter/material.dart';
import 'package:chromia_ui/chromia_ui.dart';

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool _isDarkMode = false;
  bool _notificationsEnabled = true;
  double _volume = 0.5;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: ChromiaAppBar(
        title: 'Chromia UI Demo',
      ),
      body: ListView(
        padding: context.chromiaSpacing.allMedium,
        children: [
          // Welcome card
          ChromiaCard(
            child: Padding(
              padding: context.chromiaSpacing.allMedium,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  ChromiaText(
                    'Welcome to Chromia UI',
                    style: ChromiaTextStyle.headlineLarge,
                  ),
                  SizedBox(height: context.chromiaSpacing.small),
                  ChromiaText(
                    'A modern Flutter design system with comprehensive components.',
                    style: ChromiaTextStyle.bodyMedium,
                  ),
                ],
              ),
            ),
          ),
          
          SizedBox(height: context.chromiaSpacing.medium),
          
          // Action buttons
          Row(
            children: [
              Expanded(
                child: ChromiaButton(
                  label: 'Primary Action',
                  onPressed: () => _showDialog(context),
                  variant: ChromiaButtonVariant.filled,
                  size: ChromiaButtonSize.medium,
                ),
              ),
              SizedBox(width: context.chromiaSpacing.small),
              Expanded(
                child: ChromiaButton(
                  label: 'Secondary',
                  onPressed: () {},
                  variant: ChromiaButtonVariant.outlined,
                  size: ChromiaButtonSize.medium,
                ),
              ),
            ],
          ),
          
          SizedBox(height: context.chromiaSpacing.large),
          
          // Settings
          ChromiaText(
            'Settings',
            style: ChromiaTextStyle.headlineSmall,
          ),
          SizedBox(height: context.chromiaSpacing.small),
          
          ChromiaListTileToggleButton(
            title: 'Dark Mode',
            subtitle: 'Enable dark theme',
            value: _isDarkMode,
            onChanged: (value) {
              setState(() => _isDarkMode = value);
            },
          ),
          
          ChromiaListTileToggleButton(
            title: 'Notifications',
            subtitle: 'Receive app notifications',
            value: _notificationsEnabled,
            onChanged: (value) {
              setState(() => _notificationsEnabled = value);
            },
          ),
          
          SizedBox(height: context.chromiaSpacing.medium),
          
          // Volume slider
          ChromiaListTileSlider(
            title: 'Volume',
            subtitle: '${(_volume * 100).round()}%',
            value: _volume,
            onChanged: (value) {
              setState(() => _volume = value);
            },
          ),
        ],
      ),
    );
  }

  void _showDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (_) => ChromiaDialog(
        title: 'Hello!',
        content: const ChromiaText(
          'This is a Chromia UI dialog. Dialogs are great for confirmations and alerts.',
          style: ChromiaTextStyle.bodyMedium,
        ),
        actions: [
          ChromiaButton(
            label: 'Cancel',
            onPressed: () => Navigator.pop(context),
            variant: ChromiaButtonVariant.outlined,
          ),
          ChromiaButton(
            label: 'Confirm',
            onPressed: () => Navigator.pop(context),
            variant: ChromiaButtonVariant.filled,
          ),
        ],
      ),
    );
  }
}
3

Run your app

Run your application to see Chromia UI in action:
flutter run
You should see a fully styled application with:
  • A custom app bar
  • A welcome card
  • Styled buttons
  • Toggle switches for settings
  • A slider component
  • A dialog when clicking the primary button

​
Accessing Theme Values

Chromia UI provides convenient extension methods to access theme values anywhere in your widget tree: 
// Access colors
final colors = context.chromiaColors;
final primaryColor = colors.brandPrimary;

// Access typography
final typography = context.chromiaTypography;
final headlineStyle = typography.headlineLarge;

// Access spacing
final spacing = context.chromiaSpacing;
final mediumPadding = spacing.medium;

// Use in widgets
Container(
  padding: EdgeInsets.all(context.chromiaSpacing.medium),
  decoration: BoxDecoration(
    color: context.chromiaColors.surfacePrimary,
    borderRadius: BorderRadius.circular(context.chromiaRadius.medium),
  ),
  child: ChromiaText(
    'Styled content',
    style: ChromiaTextStyle.bodyMedium,
  ),
)

​
Theme Variants

Chromia UI supports multiple theme configurations: 
ChromiaTheme(
  data: ChromiaThemeData.light(),
  child: YourApp(),
)

​
Common Components

Here are some of the most commonly used Chromia UI components:

​
Buttons

ChromiaButton(
  label: 'Confirm',
  onPressed: () {},
  variant: ChromiaButtonVariant.filled, // or .outlined
  size: ChromiaButtonSize.medium,
  isLoading: false,
)

​
Text Fields

ChromiaTextField(
  label: 'Email',
  hint: 'Enter your email',
  validator: ChromiaTextFieldValidator.email,
  onChanged: (value) {
    // Handle input
  },
)

​
Cards

ChromiaCard(
  child: Padding(
    padding: context.chromiaSpacing.allMedium,
    child: Column(
      children: [
        ChromiaText('Card Title', style: ChromiaTextStyle.headlineSmall),
        ChromiaText('Card content goes here', style: ChromiaTextStyle.bodyMedium),
      ],
    ),
  ),
)

// Or use a pre-styled list tile card
ChromiaListTileCard(
  title: 'Item Title',
  subtitle: 'Subtitle text',
  leading: Icon(Icons.star),
  onTap: () {},
)

​
Checkboxes and Radio Buttons

// Checkbox
ChromiaListTileCheckbox(
  title: 'Enable notifications',
  value: isChecked,
  onChanged: (val) => setState(() => isChecked = val!),
)

// Radio button group
ChromiaRadioButtonGroup<String>(
  options: ['Option A', 'Option B', 'Option C'],
  groupValue: selectedOption,
  onChanged: (val) => setState(() => selectedOption = val),
)

​
Progress Indicators

// Linear progress
ChromiaLinearProgress(value: 0.6)

// Circular progress
ChromiaCircularProgress(value: 0.6)

// Stepped progress
ChromiaSteppedProgress(steps: 5, currentStep: 2)

​
Dynamic Theme Switching

To implement runtime theme switching, use state management: 
class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isDarkMode = false;

  @override
  Widget build(BuildContext context) {
    return ChromiaTheme(
      data: _isDarkMode 
        ? ChromiaThemeData.dark() 
        : ChromiaThemeData.light(),
      child: MaterialApp(
        title: 'My App',
        theme: ChromiaTheme.of(context).toMaterialTheme(),
        home: HomePage(
          onThemeToggle: () {
            setState(() => _isDarkMode = !_isDarkMode);
          },
        ),
      ),
    );
  }
}
For more complex state management, consider using BLoC, Provider, or Riverpod. Check out the example app in the repository for a BLoC implementation.

​
Next Steps

Now that you have a working Chromia UI app, explore more features:

Components

Explore all UI components

Theming

Customize themes and colors

Design Tokens

Learn about design tokens

Theming

Learn advanced theming and customization

Design Tokens

Understand the design token system

Example App

View the complete example application

​
Need Help?

If you encounter any issues:
  • Check the GitHub repository for examples
  • Open an issue if you find a bug
  • Review the example app for complete implementation patterns

Build docs developers (and LLMs) love

Get started for freeTalk to us