This guide helps you migrate between different versions of Chromia UI.
Current Version: 0.3.0
Chromia UI is currently in active development. The latest stable version is 0.3.0.
The API may change before version 1.0.0. Always check the changelog when upgrading.
Version 0.3.0 (Current)
Released: February 13, 2026
New Features
Initial Component Library
Version 0.3.0 introduces the initial set of 34 production-ready components:Form Components:
ChromiaButton - Filled and outlined button variantsChromiaTextField - Text input with validation supportChromiaCheckbox - Standard and tri-state checkboxesChromiaCheckboxTile - List-style checkbox layoutsChromiaRadio - Single selection radio buttonsChromiaRadioTile - List-style radio layoutsChromiaRadioGroup - Automatic radio button groupingChromiaSwitch - Animated toggle switches (3 sizes)ChromiaSwitchTile - List-style switch layouts
Layout Components:
ChromiaCard - Cards with header, footer, and image supportChromiaListCard - Specialized card for list itemsChromiaAppBar - Application bar with navigationChromiaDrawer - Full navigation drawerChromiaMiniDrawer - Icon-only compact drawer
Display Components:
ChromiaBadge - Notification badgesChromiaLabel - Text labelsChromiaStatusBadge - Status indicatorsChromiaAvatar - User avatars with images or initialsChromiaChip - Compact elements with optional delete actionChromiaTooltip - Contextual help messages
Feedback Components:
ChromiaDialog - Modal dialogsChromiaLinearProgress - Linear progress indicatorsChromiaCircularProgress - Circular progress indicatorsChromiaSteppedProgress - Multi-step progress indicators
Typography:
ChromiaText - Text component with design system styles
Complete Theme System
A comprehensive theming system was introduced:// Light theme
ChromiaTheme(
data: ChromiaThemeData.light(),
child: YourApp(),
)
// Dark theme
ChromiaTheme(
data: ChromiaThemeData.dark(),
child: YourApp(),
)
// Brand-specific theme
ChromiaTheme(
data: ChromiaThemeData.fromBrand(
BrandConfig(
name: 'MyBrand',
primaryColor: Color(0xFF6200EE),
secondaryColor: Color(0xFF03DAC6),
fontFamily: 'Poppins',
),
),
child: YourApp(),
)
Design Token System
Complete design token system for consistent styling:
- Color Tokens - Semantic color roles
- Typography Tokens - Text style scale (display → label)
- Spacing Tokens - Consistent spacing values
- Radius Tokens - Border radius scale
- Shadow Tokens - Elevation definitions
- Animation Tokens - Duration and curve standards
- Breakpoint Tokens - Responsive layout breakpoints
Access tokens via context extensions:final colors = context.chromiaColors;
final typography = context.chromiaTypography;
final spacing = context.chromiaSpacing;
Responsive Design System
Built-in responsive utilities:// Check breakpoint
if (context.isMobile) {
return MobileLayout();
}
// Responsive builder
ResponsiveBuilder(
mobile: MobileLayout(),
tablet: TabletLayout(),
desktop: DesktopLayout(),
)
Multi-Brand Support
Brand management system for multi-brand applications:BrandConfig(
name: 'MyBrand',
primaryColor: Color(0xFF6200EE),
secondaryColor: Color(0xFF03DAC6),
fontFamily: 'Poppins',
monospaceFontFamily: 'Source Code Pro',
)
Comprehensive Example App
The package includes a full-featured example app demonstrating:
- All 34 components with interactive examples
- BLoC integration for theme management
- GoRouter navigation
- Responsive layouts
- Dark mode support
- Multi-brand switching
Run the example: Getting Started with 0.3.0
Update Dependencies
Add Chromia UI to your pubspec.yaml:dependencies:
chromia_ui: ^0.3.0
Verify Requirements
Ensure your project meets the minimum requirements:
- Dart
>=3.10.0 <4.0.0
- Flutter
>=3.38.0
Import the Package
Import Chromia UI in your Dart files:import 'package:chromia_ui/chromia_ui.dart';
Wrap Your App
Wrap your app with ChromiaTheme: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(),
),
);
}
}
Start Using Components
Begin using Chromia UI components:ChromiaButton(
label: 'Get Started',
onPressed: () {},
variant: ChromiaButtonVariant.filled,
)
Breaking Changes
As this is the initial release (0.3.0), there are no breaking changes from previous versions.
Future Migrations
When upgrading to future versions:
Read the Changelog
Always check the CHANGELOG.md for breaking changes and new features. Update Dependencies
Update the version in your pubspec.yaml:dependencies:
chromia_ui: ^0.x.0 # Update to the latest version
flutter pub upgrade chromia_ui
Test Your App
Thoroughly test all features that use Chromia UI components after upgrading.
Common Migration Patterns
Migrating from Material Components
If you’re migrating from Flutter’s Material components to Chromia UI:
ElevatedButton(
onPressed: () {},
child: Text('Click Me'),
)
TextField(
decoration: InputDecoration(
labelText: 'Email',
hintText: 'Enter your email',
),
)
Checkbox(
value: isChecked,
onChanged: (value) {
setState(() => isChecked = value!);
},
)
Adopting the Theme System
MaterialApp(
theme: ThemeData(
primaryColor: Colors.blue,
brightness: Brightness.light,
),
home: HomePage(),
)
Using Design Tokens
Padding(
padding: EdgeInsets.all(16.0),
child: Text(
'Hello World',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
)
Getting Help
If you encounter issues during migration:
GitHub Issues
Report bugs or ask questions
Example App
See working implementations
Documentation
Browse the full documentation
Changelog
View all version changes
Staying Updated
Version Status
- Current: 0.3.0
- Status: Under active development
- Stability: API may change before 1.0.0
As the project approaches version 1.0.0, the API will stabilize, and breaking changes will be minimized. 