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_lintsis 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_proThen 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 deviceThe 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)),
);| Token | Values |
|---|---|
DukSpacing | xxs 2 · xs 4 · sm 8 · md 12 · lg 16 · xl 24 · xxl 32 · xxxl 48 |
DukRadius | sm 6 · md 10 · lg 16 · xl 24 · pill |
DukBreakpoints | compact < 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
| Screen | Class | Key parameters |
|---|---|---|
| Onboarding | DukOnboardingScreen | onFinished, custom pages |
| Sign in | DukSignInScreen | onSignIn(email, password), onForgotPassword, onCreateAccount, onSocialSignIn(provider) |
| Sign up | DukSignUpScreen | onSignUp(name, email, password), onSignIn |
| Forgot password | DukForgotPasswordScreen | onSendResetLink(email), onBackToSignIn |
| OTP verification | DukOtpVerificationScreen | onVerify(code), onResend, length, resendSeconds |
| Dashboard | DukDashboardScreen | onCreateProject, onOpenNotifications, projects |
| Analytics | DukAnalyticsScreen | onExport |
| Projects | DukProjectsScreen | projects, onProjectTap, onCreateProject |
| Task board | DukTaskBoardScreen | tasks, onTaskMoved(task, status), onAddTask(status) |
| Messages | DukMessagesScreen | conversations, initialMessages, onSend(text) |
| Notifications | DukNotificationsScreen | notifications |
| Pricing | DukPricingScreen | plans, currencySymbol, onPlanSelected(plan, yearly) |
| Profile | DukProfileScreen | profile fields, onEditProfile |
| Settings | DukSettingsScreen | themeMode, 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.mdentry. 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 runflutter pub get,flutter analyzeandflutter test. Breaking changes only happen in a new major version.