Skip to content

Decennium Sprint — quick start

Fastest path to using khflutterlib in your own sprint app. If you hit something this doesn't cover, see the full Getting started guide instead — this page is deliberately the short version.

1. Add the dependency

khflutterlib isn't on pub.dev — it's a private monorepo, so you pull packages in via git dependency. Pin every package to the same release tag, never a branch, so you don't get surprised by in-progress changes mid-sprint (mixing tags makes flutter pub get fail):

dependencies:
  flutter:
    sdk: flutter
  kh_core:
    git:
      url: https://github.com/msflib/flutter.git
      path: packages/kh_core
      ref: khflutterlib-v0.4.3
  kh_theme:
    git:
      url: https://github.com/msflib/flutter.git
      path: packages/kh_theme
      ref: khflutterlib-v0.4.3
  kh_ui:
    git:
      url: https://github.com/msflib/flutter.git
      path: packages/kh_ui
      ref: khflutterlib-v0.4.3
  kh_screens:
    git:
      url: https://github.com/msflib/flutter.git
      path: packages/kh_screens
      ref: khflutterlib-v0.4.3
  kh_utils:
    git:
      url: https://github.com/msflib/flutter.git
      path: packages/kh_utils
      ref: khflutterlib-v0.4.3

Only add the packages you actually use — kh_core/kh_theme/kh_ui cover most needs; kh_screens adds ready-made splash/onboarding/login screens; kh_utils adds form validators, date/currency formatters, and a leveled logger — genuinely useful in almost any app, worth adding by default. To upgrade later, change every ref to the newer release tag together; the release train page lists the releases.

Then run:

flutter pub get

2. One thing that's easy to miss

Add this to your own app's pubspec.yaml (under flutter:):

flutter:
  uses-material-design: true

Skip this and every default icon (KhButton, KhTextField, KhBadge, KhEmptyState/KhErrorState) renders as a garbled glyph — kh_ui declaring it doesn't bundle the font for your app, only your own declaration does, and Flutter only warns instead of failing loudly.

3. Minimal app

import 'package:flutter/material.dart';
import 'package:kh_theme/kh_theme.dart';
import 'package:kh_ui/kh_ui.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: KhTheme.light(),
      darkTheme: KhTheme.dark(),
      home: Scaffold(
        appBar: AppBar(title: const Text('My sprint app')),
        // Builder gives the button a context *below* MaterialApp, which
        // KhSnackbar.show needs to find a ScaffoldMessenger. The build
        // method's own context sits above MaterialApp and would throw.
        body: Builder(
          builder: (context) => Center(
            child: KhButton.primary(
              onPressed: () =>
                  KhSnackbar.show(context, content: const Text('Hi!')),
              child: const Text('Say hi'),
            ),
          ),
        ),
      ),
    );
  }
}

4. What's in the box

kh_core, kh_theme, kh_ui, kh_screens, and kh_utils are built; everything else in the root README.md's package table is still planned — don't depend on packages that aren't listed above, they don't exist yet.

Each package page lists exactly what it exports:

  • kh_ui: buttons, text fields, cards, dialogs, chips/badges, dropdowns, date pickers, bottom sheets, snackbars, bottom nav, nav drawer, and more.
  • kh_screens: splash screen, onboarding flow, login form.
  • kh_utils: KhValidators (form validation), KhFormatters (date/currency/number/phone formatting), KhPhoneRegion (country-aware phone numbers), KhLogger (leveled logging).

Prefer to start from a working app? The starter app has the theme, a splash and both navigation shells already wired up.

Or run the component gallery yourself to see everything live (needs a clone of this repo, not just the git dependency):

git clone https://github.com/msflib/flutter.git khflutterlib
cd khflutterlib && melos bootstrap
cd packages/example && flutter run

Stuck?

Full contributor-facing guide, troubleshooting, and the "why" behind all of this: Getting started.