Skip to main content

​
Installation

Get started with Chromia UI by adding it to your Flutter project. This guide will walk you through the installation process and verify your setup.

​
Prerequisites

Before installing Chromia UI, ensure your environment meets the following requirements:
  • Dart: >=3.10.0 <4.0.0
  • Flutter: >=3.38.0
You can check your current versions by running: 
flutter --version

​
Add Chromia UI to Your Project

1

Add the dependency

Open your project’s pubspec.yaml file and add chromia_ui to your dependencies:
pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  chromia_ui: ^0.1.0
Always use the latest version available on pub.dev.
2

Install the package

Run the following command in your terminal to install the package:
flutter pub get
This will download Chromia UI and all its dependencies to your project.
3

Import Chromia UI

In your Dart files, import the Chromia UI library:
import 'package:chromia_ui/chromia_ui.dart';
This single import gives you access to all components, themes, and utilities.

​
Verify Installation

To verify that Chromia UI has been installed correctly, create a simple test widget:
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: 'Chromia UI Test',
        home: Scaffold(
          body: Center(
            child: ChromiaButton(
              onPressed: () {},
              child: Text('Hello Chromia UI!'),
            ),
          ),
        ),
      ),
    );
  }
}
Run your app: 
flutter run
If you see a styled button in the center of your screen, congratulations! Chromia UI is successfully installed.

​
Complete Configuration

For a production-ready setup, you’ll want to properly configure the theme system. Here’s a more complete example:
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',
        // Convert Chromia theme to Material theme
        theme: ChromiaTheme.of(context).toMaterialTheme(),
        home: const HomePage(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: ChromiaAppBar(
        title: 'Welcome to Chromia UI',
      ),
      body: Center(
        child: ChromiaButton(
          onPressed: () {},
          variant: ChromiaButtonVariant.filled,
          child: Text('Get Started'),
        ),
      ),
    );
  }
}

​
Additional Dependencies

Chromia UI includes the following dependencies automatically:
  • flutter_syntax_view: ^4.1.7 - For code syntax highlighting
  • intl: ^0.20.2 - For internationalization support
You don’t need to add these manually; they’re included with Chromia UI.

​
Troubleshooting

If you see a “package not found” error, ensure:
  • Your pubspec.yaml syntax is correct (proper indentation)
  • You’ve run flutter pub get after adding the dependency
  • Your internet connection is stable
  • You’re using a compatible Flutter version (>=3.38.0)
If you encounter version conflicts:
  • Check that your Flutter SDK version meets the minimum requirement
  • Run flutter pub upgrade to update compatible dependencies
  • Review the error message for specific conflicting packages
If imports aren’t resolving:
  • Ensure you’ve run flutter pub get
  • Restart your IDE or run flutter clean followed by flutter pub get
  • Check that the import path is correct: package:chromia_ui/chromia_ui.dart

​
Next Steps

Now that you have Chromia UI installed, you’re ready to start building:

Quick Start Guide

Build your first app with Chromia UI components

Theme Configuration

Learn how to customize themes and colors

Components Overview

Explore all available components

Design Tokens

Understand the design token system

Build docs developers (and LLMs) love

Get started for freeTalk to us