Skip to content
Orsaku

Documentation · v1.0.0

From unzip to first screen.

A summary of the documentation that ships with the kit (docs/ inside the download). The full API reference lives in the source as doc comments.

Requirements

  • Flutter 3.47 or newer (Dart 3.13 or newer). Dart 3.13 first shipped with Flutter 3.47.0, so older Flutter releases cannot resolve the package.
  • Developed and tested on Flutter 3.47.6 stable · Dart 3.13.5.
  • No runtime dependencies besides the Flutter SDK. flutter_lints is used for development only.
  • Plain Flutter code, no plugins. Release builds of the showcase app were verified for web and macOS.

Installation

The kit is delivered as source code, not through pub.dev. Copy the developer_ui_kit_pro folder into your project (for example packages/developer_ui_kit_pro) and add a path dependency:

# my_app/pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  developer_ui_kit_pro:
    path: packages/developer_ui_kit_pro

Then run flutter pub get. You can also host the folder in a private Git repository that only your licensed developers can access and use a git: dependency. Never publish it to pub.dev or a public repository.

Apply the theme

import 'package:developer_ui_kit_pro/developer_ui_kit_pro.dart';

MaterialApp(
  theme: DukTheme.light(),
  darkTheme: DukTheme.dark(),
  themeMode: ThemeMode.system,
  home: const HomePage(),
);

Use a screen

Workspace screens (dashboard, analytics, projects, task board, messages, notifications, profile, settings, pricing) have no Scaffold, so they fit inside your own shell such as DukResponsiveScaffold. Auth screens and onboarding include their own Scaffold and are pushed as full pages:

DukSignInScreen(
  onSignIn: (email, password) async {
    await myAuth.signIn(email, password); // throw to show an error banner
  },
  onForgotPassword: () => Navigator.of(context).pushNamed('/forgot'),
);

Replace the sample data

Screens accept data through constructor parameters (projects:, tasks:, conversations:, notifications:, plans: …) and default to DukSampleData, which is fictional. Map your API models to the lightweight Duk* models, or copy a screen into your app and edit it directly.

Run the showcase

# run the showcase app
cd developer_ui_kit_pro/example
flutter pub get
flutter run -d chrome   # or -d macos, or a connected device

The demo has no backend. Any well-formed email and non-empty password signs in; the verification code 000000 is rejected so you can see the error state. Run the checks with flutter analyze and flutter test.

Themes

DukTheme.light() and DukTheme.dark() are Material 3 themes. Pass a seed color to re-brand; in dark mode the kit uses a lighter primary tuned for contrast.

// Re-brand with one color
MaterialApp(
  theme: DukTheme.light(seed: const Color(0xFF0F766E)),
  darkTheme: DukTheme.dark(seed: const Color(0xFF0F766E)),
);
TokenValues
DukSpacingxxs 2 · xs 4 · sm 8 · md 12 · lg 16 · xl 24 · xxl 32 · xxxl 48
DukRadiussm 6 · md 10 · lg 16 · xl 24 · pill
DukBreakpointscompact < 600 ≤ medium < 1024 ≤ expanded

Semantic colors (success, warning, info, subtleText, border, chartPalette …) live in the DukTokens theme extension. The kit bundles no fonts; pass your own with fontFamily:. Default themes are tested for WCAG AA contrast (4.5:1) for body text and text on the primary color — re-check after changing colors.

Screens

ScreenClassKey parameters
OnboardingDukOnboardingScreenonFinished, custom pages
Sign inDukSignInScreenonSignIn(email, password), onForgotPassword, onCreateAccount, onSocialSignIn(provider)
Sign upDukSignUpScreenonSignUp(name, email, password), onSignIn
Forgot passwordDukForgotPasswordScreenonSendResetLink(email), onBackToSignIn
OTP verificationDukOtpVerificationScreenonVerify(code), onResend, length, resendSeconds
DashboardDukDashboardScreenonCreateProject, onOpenNotifications, projects
AnalyticsDukAnalyticsScreenonExport
ProjectsDukProjectsScreenprojects, onProjectTap, onCreateProject
Task boardDukTaskBoardScreentasks, onTaskMoved(task, status), onAddTask(status)
MessagesDukMessagesScreenconversations, initialMessages, onSend(text)
NotificationsDukNotificationsScreennotifications
PricingDukPricingScreenplans, currencySymbol, onPlanSelected(plan, yearly)
ProfileDukProfileScreenprofile fields, onEditProfile
SettingsDukSettingsScreenthemeMode, onThemeModeChanged, onSignOut, onDeleteAccount

The UI contains no networking, persistence or authentication logic. Async callbacks on auth screens show a loading state; throw an exception to display its message in an error banner.

Components

  • Actions: DukButton (primary, secondary, outline, ghost, danger; small 36, medium 44, large 52; loading state), DukIconButton.
  • Inputs: DukTextField, DukPasswordField, DukSearchField, DukOtpField (auto-advance, paste spreading), DukSwitchTile, DukSegmentedControl, DukValidators.
  • Display: DukCard, DukStatCard, DukBadge, DukTag, DukAvatar, DukAvatarStack, DukSectionHeader, DukDividerWithLabel, DukEmptyState, DukTimeline, DukStepIndicator, DukPricingCard.
  • Feedback: DukAlertBanner, showDukToast, DukProgressBar, DukProgressRing, DukSkeleton.
  • Charts (CustomPainter, no chart library): DukSparkline, DukLineChart, DukBarChart, DukDonutChart, DukChartLegend. Charts expose a semantic label summarising their data.
  • Layout: DukResponsiveScaffold (bottom bar < 600 px, rail 600–1023 px, sidebar ≥ 1024 px), DukResponsiveGrid, DukPageHeader, DukPageBody, DukAuthLayout, DukLogoMark.

License

Each purchase includes a license certificate stating your number of developer seats and your update period. You may use the kit in unlimited end products, modify it, and ship it compiled in your apps. You may not exceed your seats, redistribute or resell the kit, or publish its source. Every version you receive stays licensed to you permanently. Read the full license.

Updates

  • A release is included if it comes out no later than your purchase date plus your update period (3, 6 or 12 months). Fully refunded or charged-back purchases are not eligible.
  • New versions use semantic versioning with a CHANGELOG.md entry. The seller emails eligible buyers, based on Gumroad's purchase records. You can also request any version released during your update period at mohamedeladnani0@gmail.com.
  • To upgrade, replace your developer_ui_kit_pro/ folder (merge if you modified it), then run flutter pub get, flutter analyze and flutter test. Breaking changes only happen in a new major version.