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.
Prerequisites
Flutter 3.24+
Latest stable recommended
Dart SDK 3.4+
Ships with Flutter 3.24
Firebase CLI
Plus flutterfire CLI
Setup Steps
Clone the repository
Clone the repo and install dependencies with flutter pub get.
git clone https://github.com/your-username/the-flutter-kit.git
cd the-flutter-kit
flutter pub getCopy environment files
Duplicate the sample env files for both the Flutter app and the optional Flask backend.
cp .env.sample .env
cp backend/flask/.env.sample backend/flask/.envConfigure Firebase
Run the FlutterFire CLI to generate platform-specific config files for your Firebase project.
flutterfire configure --project your-project-idAdd your API keys
Open .env and paste your keys. You only need Firebase credentials to start — everything else is optional.
FIREBASE_PROJECT_ID=your-project-id
REVENUECAT_PUBLIC_KEY=appl_... # optional
OPENAI_API_KEY=sk-... # optional
ANALYTICS_KEY= # optionalRun 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.
flutter runProject 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.
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 testsconfig/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.
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.
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.
class Secrets {
static const firebaseProjectId = 'your-project-id';
static const revenueCatPublicKey = 'appl_...';
static const openAIKey = 'sk-...';
static const analyticsKey = '';
}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.
// 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:
Enable Google provider in Firebase
Google.Add SHA certificates (Android)
./gradlew signingReport in your android/ directory and add the SHA-1 and SHA-256 fingerprints to your Firebase Android app.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.
// 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 AppOnboarding 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
// Change this one line to switch onboarding:
static const onboardingStyle = OnboardingStyle.highlights;
// Options: .carousel, .highlights, .minimalCustomizing 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.
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
Create products in App Store Connect & Google Play Console
Configure RevenueCat
Add your API key
Paste your RevenueCat public API key in secrets.dart:
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.
// 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.
# 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 }// 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.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.
static const analyticsKey = 'YOUR_GA4_MEASUREMENT_ID';
// That's it. The AnalyticsService initializes automatically
// when Firebase is configured.// 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.
// 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
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,
);
}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.
// 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
# iOS — build a release IPA
flutter build ios
# Android — build a signed App Bundle
flutter build appbundle
# Web — build optimized static files
flutter build webTestFlight Setup (iOS)
Archive your build
flutter build ios, then open Xcode and select Product > Archive. Make sure you are building for Any iOS Device (not a simulator).Upload to App Store Connect
Distribute App and follow the prompts to upload to App Store Connect.Add testers
Google Play Console Setup (Android)
Generate a signed App Bundle
flutter build appbundle. Configure your signing key in android/app/build.gradle if you haven't already.Upload to Google Play Console
.aab file.Add testers or roll out
App Store & Google Play Submission Checklist
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.dartand.envare 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.
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.