orient_ui 0.5.2

Theming and components for Flutter. Works with Material, Cupertino, or on its own.

Orient UI

Theming and components for Flutter. Works with Material, Cupertino, or on its own.

Live Demo • See in Production • Pub.dev

🧩 What is Orient UI?

Orient UI gives you two things:

1. Style is a simple, Material-independent theming system. Colors, typography, radii, durations, breakpoints. All in one file you own. No ThemeExtension, no boilerplate.
2. Components are neutral widgets (buttons, toggles, popovers, navigation, and more) that work on mobile, web, and desktop.

Use both, or just the theming. Your call.

🪩 Why Orient UI?

• Nothing to replace. Keep your MaterialApp, your Scaffold, your existing widgets. Orient UI sits alongside them.
• You own the code. Every file lives in your project. Change anything you want. No package lock-in.
• Cross-platform. Responsive layouts, hover states, keyboard navigation. Mobile, web, and desktop.
• Zero dependencies. Nothing added to your pubspec.

🏁 Getting Started

1. Install the CLI

dart pub global activate orient_ui

2. Add theming

orient_ui init

This creates lib/style.dart with light/dark colors, typography, radii, durations, and breakpoints. You own this file. Move it, rename it, extend it.

Use it anywhere:

final ColorTokens colors = context.style.colors;
final TextStyle heading = context.typography.heading;

That's it. If all you need is theming, you're done.

3. Add components (optional)

orient_ui add button

This creates lib/button.dart. Update the style import to match where you placed style.dart:

import 'package:your_app/style.dart'; // adjust to your path

Button(
  label: 'Click me',
  onPressed: () {},
)

Dark Mode

Widgets follow system brightness by default. To control it manually:

Style(
  brightness: Brightness.dark,
  child: MaterialApp(
    home: MyHomePage(),
  ),
)

🧬 Customizing

Open style.dart and make it yours. Add color tokens, change typography scales, adjust breakpoints.

final ColorTokens _colorsLight = ColorTokens(
  background: Color(0xFFFFFFFF),
  foreground: Color(0xFF2A2A2A),
  accent: Color(0xFF18181B),
  // ... change these to match your brand
);

🗺️ Roadmap

Available Now

• ✅ Button (6 variants)
• ✅ Spinner
• ✅ NavBar (Navigation Rail + Bottom Bar)
• ✅ Toast
• ✅ EmptyState
• ✅ CopyButton
• ✅ Popup
• ✅ AlertPopup
• ✅ ConfirmationPopup
• ✅ SearchField
• ✅ CardBox (Card)
• ✅ Tile (ListTile)
• ✅ Toggle
• ✅ ToggleTile (SwitchListTile)
• ✅ SingleChoice (Radio)
• ✅ SingleChoiceTile (RadioListTile)
• ✅ MultiChoice (Checkbox)
• ✅ MultiChoiceTile (CheckboxListTile)
• ✅ Typography
• ✅ Picker (Dropdown)
• ✅ InfoBanner (MaterialBanner)
• ✅ PopoverMenu (PopupMenuButton)
• ✅ TappableIcon (IconButton)

Coming Soon

• ❌ TextField
• ❌ Tabs
• ❌ InlineTabs
• ❌ Label
• ❌ PickerPopup
• ❌ VerticalTile
• ❌ SocialButton
• ❌ AdaptivePageTransition
• ❌ DashedBorder

Try them at the interactive demo.

🧪 Quality

All components are tested.

License

MIT

---

Built by UserOrient