Flutter UI package · v1.0.4

Build stunning Flutter apps with a cohesive design system

CaravaggioUI streamlines your UI workflow with theme-aware components, design tokens, and runtime color customization — so you ship polished interfaces faster.

flutter pub add caravaggio_ui
Get started View example app
  • 30+ components
  • Flutter ≥ 3.22
  • Dart ≥ 3.0
  • All platforms

Why CaravaggioUI

Everything you need for production-ready UI

From typography and gradients to complex scaffolds and data views — built with flexibility and consistency at the core.

Runtime theming

Initialize primary and secondary colors once, then update them live with CaravaggioUI.updateColors and CColorsBuilder.

Design tokens

Shared spacing, radius, shadows, and semantic colors via AppSpacing, AppRadius, AppShadow, and AppColors.

Rich form controls

Buttons, text fields, autocomplete, dropdowns, date & time pickers, checkboxes, and radio groups with four visual styles each.

Opinionated views

Gradient scaffolds, pill tabs, popups, bottom sheets, toasts, carousels, and list tiles — ready to drop into your app.

Gradients & typography

Theme-aware CGradient presets and CText factory constructors with chainable style modifiers.

Data & feedback

Tables, circular indicators, progress bars, animated loaders, and loading wrappers for complete user feedback loops.

Component library

Organized by category

Explore the full catalog in the example app or API documentation.

Generics

  • CText
  • CGradient

Form

  • CButton
  • CTextField
  • CAutocomplete
  • CDropdown
  • CDatePicker
  • CTimePicker
  • CCheckbox
  • CRadioGroup

Views

  • CScaffold
  • CTabs
  • CPopup
  • CModalBottomSheet
  • CToast
  • CWrapper
  • CIconBadge
  • CCarousel
  • CTagChip
  • CTile

Indicators & data

  • CTable
  • CCircularIndicator
  • CCircularProgressIndicator
  • CLinearProgressIndicator
  • CLoader

Design tokens

  • AppRadius
  • AppSpacing
  • AppShadow
  • AppColors
  • CColors

Example app

Interactive demos for every component — colors, forms, scaffolds, dialogs, carousels, and more.

Browse demos

Get started

Up and running in minutes

Add the package, initialize the theme, wrap your app with CToast, and start building.

1
Install 
flutter pub add caravaggio_ui
2
Initialize in main.dart 
void main() {
  CaravaggioUI.initialize(
    primaryColor: const Color(0xFF662D8C),
    secondaryColor: const Color(0xFFED1E79),
  );

  runApp(const MainApp());
}
3
Configure MaterialApp 
MaterialApp(
  theme: CUI.themeData,
  builder: (context, child) =>
      CToast(child: child ?? const SizedBox.shrink()),
  home: const HomeScreen(),
);
4
Use components 
CButton.elevated(
  gradient: CGradient.primaryToSecondary,
  onPressed: () {},
  child: CText.label('Press me'),
);

CColorsBuilder(
  builder: (context) => CScaffold(
    title: CText.title('Hello'),
    body: CText.body('Welcome to CaravaggioUI'),
  ),
);

Ready to paint your next Flutter app?

Install from pub.dev, explore the example app, and dive into the documentation.

View on pub.dev Star on GitHub