The Flutter Kit logoThe Flutter Kit
HomeDocumentation

Documentation

Everything you need to go from clone to the App Store and Google Play. Follow the quick start to ship your first build in under 5 minutes.

Quick Start

Get your first build running in under 5 minutes. The Flutter Kit is designed to work out of the box — clone, configure a few values, and hit run.

5-minute setup. Most developers ship their first build in a single coffee break.

Prerequisites

Flutter 3.24+

Latest stable recommended

Dart SDK 3.4+

Ships with Flutter 3.24

Firebase CLI

Plus flutterfire CLI

Setup Steps

1

Clone the repository

Clone the repo and install dependencies with flutter pub get.

Terminalbash
git clone https://github.com/your-username/the-flutter-kit.git
cd the-flutter-kit
flutter pub get
2

Copy environment files

Duplicate the sample env files for both the Flutter app and the optional Flask backend.

Terminalbash
cp .env.sample .env
cp backend/flask/.env.sample backend/flask/.env
3

Configure Firebase

Run the FlutterFire CLI to generate platform-specific config files for your Firebase project.

Terminalbash
flutterfire configure --project your-project-id
4

Add your API keys

Open .env and paste your keys. You only need Firebase credentials to start — everything else is optional.

.envtext
FIREBASE_PROJECT_ID=your-project-id
REVENUECAT_PUBLIC_KEY=appl_...          # optional
OPENAI_API_KEY=sk-...                   # optional
ANALYTICS_KEY=                          # optional
5

Run the app

Select your emulator or connected device and launch the app. It adapts automatically based on which keys you provide — missing services fall back to safe no-op implementations.

Terminalbash
flutter run

Project Structure

The Flutter Kit follows BLoC / Clean Architecture with dependency injection. Every module is self-contained so you can add, remove, or swap features without touching unrelated code.

Folder Layouttext
the_flutter_kit/
├── lib/
│   ├── config/              # AppConfig, Secrets, FeatureFlags
│   ├── core/
│   │   ├── di/              # Dependency injection (get_it)
│   │   ├── router/          # GoRouter with typed routes
│   │   ├── theme/           # Material 3 design tokens
│   │   ├── services/        # PurchasesService, AIService
│   │   ├── analytics/       # AnalyticsService (GA4)
│   │   ├── notifications/   # PushMessagingService, local
│   │   └── utils/           # Extensions, helpers
│   ├── features/
│   │   ├── onboarding/      # 3 onboarding templates
│   │   ├── auth/            # Firebase Auth flows
│   │   ├── profile/         # Profile setup, avatar upload
│   │   ├── paywall/         # RevenueCat paywall UI
│   │   ├── home/            # Home screen
│   │   ├── settings/        # Settings & preferences
│   │   └── ai/              # Chat, image, vision screens
│   └── widgets/             # Reusable UI components
├── backend/
│   └── flask/               # AI proxy server
├── assets/                  # Images, fonts
└── test/                    # Unit & widget tests
config/App-wide settings, API keys, and feature toggles. The single source of truth for branding and behavior.
core/Shared infrastructure: DI container, routing, theming, services, analytics, and utilities.
features/Feature modules (onboarding, auth, paywall, etc.). Each module owns its screens, BLoCs, and repositories.
backend/The optional Flask AI server that proxies OpenAI calls so API keys stay server-side.
assets/Images, custom fonts, and static resources bundled with the app.

Configuration

Three files control your entire app. Change a value, hot-restart, and see the result immediately — no code rewrites required.

app_config.dart

The central configuration hub. Set your app name, backend mode, onboarding style, and feature flags in one place.

lib/config/app_config.dartdart
class AppConfig {
  static const appName = 'MyApp';
  static const backend = Backend.firebase;
  static const onboardingStyle = OnboardingStyle.carousel;

  static const featureFlags = FeatureFlags(
    onboarding: true,
    authentication: true,
    paywall: true,
    notifications: true,
    aiFeatures: false,
  );

  static const legal = LegalConfig(
    privacyURL: 'https://yourapp.com/privacy',
    termsURL: 'https://yourapp.com/terms',
  );
}

FeatureFlags

Toggle entire modules on or off. Disabled features are completely excluded from the app flow — no leftover screens or broken navigation.

Just flip a boolean. Set paywall: false and the paywall screen disappears from the entire app flow. No other changes needed.

secrets.dart

Your API keys live here. This file is gitignored by default — duplicate from secrets.sample.dart and fill in your values.

lib/config/secrets.dartdart
class Secrets {
  static const firebaseProjectId = 'your-project-id';
  static const revenueCatPublicKey = 'appl_...';
  static const openAIKey = 'sk-...';
  static const analyticsKey = '';
}
Missing keys are handled gracefully. The DI container automatically falls back to no-op service implementations, so the app never crashes from a missing API key.

Authentication

Pre-built authentication powered by Firebase with email/password, Google Sign-In, Apple Sign-In, and anonymous login. Session management, profile setup, and avatar uploads are all included.

Email / Password with Firebase

Auth is handled through the AuthRepository interface. The DI container selects the Firebase implementation when AppConfig.backend == Backend.firebase.

lib/features/auth/data/firebase_auth_repository.dartdart
// Sign up and sign in are one-liners:
final credential = await FirebaseAuth.instance
    .createUserWithEmailAndPassword(
  email: email,
  password: password,
);

// Session is persisted automatically.
// Profile setup screen appears after first sign-in.

Google Sign-In

Google Sign-In is pre-wired and ready to enable. Follow these steps:

1

Enable Google provider in Firebase

In the Firebase Console, go to Authentication > Sign-in method and enable Google.
2

Add SHA certificates (Android)

Run ./gradlew signingReport in your android/ directory and add the SHA-1 and SHA-256 fingerprints to your Firebase Android app.
3

Configure iOS URL scheme

Add the reversed client ID from GoogleService-Info.plist as a URL scheme in your iOS Info.plist.

Apple Sign-In

Apple Sign-In is included for iOS builds. Enable the Sign in with Apple capability in Xcode under Signing & Capabilities, then enable Apple as a provider in the Firebase Console.

Customizing the Auth Flow

The auth flow is driven by feature flags. If authentication: false, the sign-in screen is skipped entirely and the app launches directly into the main experience.

lib/core/router/app_router.dartdart
// Auth flow is automatic:
// 1. Onboarding (if enabled & not completed)
// 2. Sign In (if enabled & not authenticated)
// 3. Profile Setup (if profile is incomplete)
// 4. Main App

Onboarding Templates

Three production-ready onboarding styles. Switch between them with a single config change.

Carousel

OnboardingStyle.carousel

Swipeable pages with smooth transitions. Best for visual storytelling.

Highlights

OnboardingStyle.highlights

Feature-focused cards with bold typography. Great for listing key benefits.

Minimal

OnboardingStyle.minimal

Single-screen with a CTA. Fastest path to your app for returning users.

Switching Styles

lib/config/app_config.dartdart
// Change this one line to switch onboarding:
static const onboardingStyle = OnboardingStyle.highlights;
// Options: .carousel, .highlights, .minimal

Customizing Content

Edit the onboarding pages in lib/features/onboarding/data/onboarding_data.dart. The {{appName}} token is automatically replaced with your app name at runtime.

lib/features/onboarding/data/onboarding_data.dartdart
static final defaultPages = [
  OnboardingPage(
    title: 'Welcome to {{appName}}',
    subtitle: 'Your personal AI assistant',
    icon: Icons.auto_awesome,
  ),
  OnboardingPage(
    title: 'Smart & Private',
    subtitle: 'Your data stays on your device',
    icon: Icons.lock_outline,
  ),
  OnboardingPage(
    title: 'Ready to Go',
    subtitle: 'Set up in seconds',
    icon: Icons.rocket_launch,
  ),
];

Paywalls & Subscriptions

RevenueCat-powered subscriptions with a beautiful paywall template. Works on both iOS (StoreKit 2) and Android (Google Play Billing) out of the box.

RevenueCat Setup

1

Create products in App Store Connect & Google Play Console

Set up your subscription products in both stores. Add them to a subscription group (iOS) or a subscription (Android).
2

Configure RevenueCat

Create products and offerings in the RevenueCat dashboard. Align package identifiers to your App Store and Google Play products.
3

Add your API key

Paste your RevenueCat public API key in secrets.dart:

lib/config/secrets.dartdart
static const revenueCatPublicKey = 'appl_YourKeyHere';

Paywall Customization

The paywall UI lives in lib/features/paywall/presentation/paywall_page.dart. Modify the layout, copy, and styling to match your brand. The subscription logic is completely separate in PurchasesService.

lib/features/paywall/presentation/paywall_page.dartdart
// The paywall shows automatically when no active entitlement
// is detected. Customize the UI here — the business logic
// is handled by PurchasesService.

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          // Hero section
          // Package options (monthly, yearly)
          // Purchase button
          // Restore purchases link
        ],
      ),
    );
  }
}

Subscription Management

The Settings screen includes restore purchases, manage subscriptions (deep links to App Store and Google Play), and displays the current plan and expiry date. All powered by RevenueCat's customer info.


AI Features

Three AI capabilities are built in: text chat, image generation, and vision analysis. All powered by a lightweight Flask backend that proxies OpenAI.

Chat

Conversational AI with streaming responses. Uses GPT-4 via your backend.

Image Generation

Generate images from text prompts using DALL-E. Results displayed inline.

Vision

Analyze images with GPT-4 Vision. Upload or capture photos for AI analysis.

Backend Setup (Flask)

The Flutter app communicates with a Python Flask server that wraps the OpenAI API. This keeps your API key off the device.

Terminalbash
# Install dependencies
cd backend/flask
pip install -r requirements.txt

# Set your OpenAI key
export OPENAI_API_KEY="sk-..."

# Start the server
python main.py

# Verify it's running
curl http://127.0.0.1:5001/health
# => { "ok": true }
lib/config/secrets.dartdart
// Point the Flutter app to your backend:
static const aiBackendBaseURL = 'http://127.0.0.1:5001';

// For production, use an HTTPS URL.
// During development, localhost is allowed by default on Android
// emulators and iOS simulators.
The AI features are fully optional. If aiBackendBaseURL is empty or unreachable, the AI tabs gracefully show an unavailable state.

Analytics & Notifications

Firebase Analytics (GA4) Setup

Analytics are powered by Firebase Analytics (Google Analytics 4). Events are tracked automatically once your Firebase project is configured.

lib/config/secrets.dartdart
static const analyticsKey = 'YOUR_GA4_MEASUREMENT_ID';

// That's it. The AnalyticsService initializes automatically
// when Firebase is configured.
lib/core/analytics/analytics_service.dartdart
// Track custom events anywhere in your app:
AnalyticsService.instance.track(
  'subscription_started',
  parameters: {
    'plan': 'yearly',
    'source': 'paywall',
  },
);

Push Notifications (FCM)

Request permissions, register for remote notifications via Firebase Cloud Messaging, and schedule local notifications — all pre-wired through PushMessagingService.

lib/core/notifications/push_messaging_service.dartdart
// Request push notification permissions:
await PushMessagingService.instance.requestPermission();

// Schedule a local notification:
await PushMessagingService.instance.scheduleLocal(
  title: 'Time to check in!',
  body: 'Open the app to see what\'s new.',
  delay: const Duration(hours: 1),
);

Debug View

The notifications debug screen gives you a test harness for permissions, local scheduling, remote registration, and viewing your FCM token — all accessible in debug builds.


Theming & Design Tokens

Customize your entire app's look with two hex values. The Material 3 design token system propagates your brand colors to every screen.

Color Customization

lib/core/theme/theme_config.dartdart
class ThemeConfig {
  // Change these two values to re-brand the entire app:
  static const primaryHex = '#2563EB';   // Blue
  static const accentHex  = '#06B6D4';   // Cyan

  static ColorScheme get lightScheme => ColorScheme.fromSeed(
    seedColor: Color(
      int.parse(primaryHex.substring(1), radix: 16) + 0xFF000000,
    ),
  );

  static ColorScheme get darkScheme => ColorScheme.fromSeed(
    seedColor: Color(
      int.parse(primaryHex.substring(1), radix: 16) + 0xFF000000,
    ),
    brightness: Brightness.dark,
  );
}
Two hex values. Change primaryHex and accentHex and the entire app updates — buttons, accents, gradients, tints, everything. Material 3 generates a full tonal palette from your seed color.

Custom Fonts

Add your custom font files to assets/fonts/ and register them in pubspec.yaml. Then reference them in ThemeConfig to apply globally via ThemeData.

Surface Styles

The SurfaceStyle enum lets you switch the visual language of your app between standard Material surfaces and a frosted-glass aesthetic.

lib/core/theme/theme_config.dartdart
// Access the theme anywhere in your widgets:
final theme = Theme.of(context);

// The theme provides consistent styling:
Text(
  'Hello',
  style: theme.textTheme.headlineMedium?.copyWith(
    color: theme.colorScheme.primary,
  ),
);

// Toggle surface style for a frosted-glass look:
static const surfaceStyle = SurfaceStyle.glass;

Deployment

When you're ready to ship, follow this checklist to go from development build to the App Store and Google Play.

Building for Production

Terminalbash
# iOS — build a release IPA
flutter build ios

# Android — build a signed App Bundle
flutter build appbundle

# Web — build optimized static files
flutter build web

TestFlight Setup (iOS)

1

Archive your build

Run flutter build ios, then open Xcode and select Product > Archive. Make sure you are building for Any iOS Device (not a simulator).
2

Upload to App Store Connect

In the Xcode Organizer, click Distribute App and follow the prompts to upload to App Store Connect.
3

Add testers

In App Store Connect, go to your app's TestFlight tab and add internal or external testers.

Google Play Console Setup (Android)

1

Generate a signed App Bundle

Run flutter build appbundle. Configure your signing key in android/app/build.gradle if you haven't already.
2

Upload to Google Play Console

In the Google Play Console, navigate to Release > Production (or an internal/closed track) and upload the .aab file.
3

Add testers or roll out

For internal testing, add testers via email. For production, complete the store listing and submit for review.

App Store & Google Play Submission Checklist

1
Bundle identifier (iOS) and application ID (Android) match your store listings
2
App icons are set for all required sizes on both platforms
3
Privacy Policy and Terms of Service URLs are live
4
Remove or guard debug/test screens (debug views are excluded in release builds by default)
5
RevenueCat products are in "Ready to Submit" status for both stores
6
Push notification entitlements (APNs for iOS, FCM for Android) are configured
7
Screenshots and metadata are uploaded in App Store Connect and Google Play Console

Production Hardening

Before submitting, ensure these production-specific items are handled:

  • Replace placeholder legal URLs with your real Privacy Policy and Terms of Service.
  • Confirm secrets.dart and .env are gitignored and not included in your repository.
  • Switch AI backend URL from localhost to your production HTTPS endpoint.
  • Tighten Firebase Security Rules for Firestore and Cloud Storage in production.
  • Set up CI/CD with secure environment variables for API keys.
From clone to app stores. The Flutter Kit is built to get you from first build to App Store and Google Play submission in days, not months.

That's it — clone, configure, and ship. The Flutter Kit adapts based on the SDKs and keys you provide, so you can start simple and layer on services when you're ready.