app_theme_kit 0.0.6

A modular Flutter theming kit with light/dark mode, color schemes, text themes, and Material 3 subthemes.

📦 app_theme_kit

A reusable Material 3 theme package for Flutter apps with customizable color schemes, text styles, subthemes, and spacing constants.
Quickly set up a consistent design system across your apps.

---

✨ Features

• 🎨 Predefined light & dark themes (ThemeData)
• 🔤 Custom TextTheme with Google Fonts (Quicksand)
• 📏 Design tokens: spacing, padding, radius, elevation
• 🃏 Subthemes included:
  • CardTheme
  • TabBarTheme
  • NavigationBarTheme
  • BottomAppBarTheme
• 🌗 Material 3 support with system light/dark switching
• 🛠 Example app included to showcase usage

---

🚀 Installation

Add to your pubspec.yaml:

dependencies:
  app_theme_kit: ^0.0.1

Then run:

flutter pub get

---

🛠 Usage

Import the package:

import 'package:app_theme_kit/app_theme_kit.dart';

Wrap your app:

MaterialApp(
  title: 'My App',
  theme: AppTheme.light,
  darkTheme: AppTheme.dark,
  themeMode: ThemeMode.system, // Light, Dark, or System
  home: const HomePage(),
);

---

🖌 Typography Showcase

Text("Display Large", style: Theme.of(context).textTheme.displayLarge),
Text("Title Medium", style: Theme.of(context).textTheme.titleMedium),
Text("Body Small", style: Theme.of(context).textTheme.bodyMedium),

✅ All fonts use Google Fonts Quicksand by default.

---

🧩 Subthemes

• Cards

Card(
  child: Padding(
    padding: const EdgeInsets.all(AppSpacing.md),
    child: Text("Styled by AppCardTheme"),
  ),
);

• TabBar

DefaultTabController(
  length: 2,
  child: Scaffold(
    appBar: AppBar(
      bottom: const TabBar(
        tabs: [Tab(text: "One"), Tab(text: "Two")],
      ),
    ),
  ),
);

• NavigationBar

NavigationBar(
  selectedIndex: 0,
  destinations: const [
    NavigationDestination(icon: Icon(Icons.home), label: "Home"),
    NavigationDestination(icon: Icon(Icons.settings), label: "Settings"),
  ],
);

• BottomAppBar

Scaffold(
  bottomNavigationBar: BottomAppBar(
    child: Padding(
      padding: const EdgeInsets.all(AppSpacing.md),
      child: Text(
        "This BottomAppBar uses AppBottomAppBarTheme",
        textAlign: TextAlign.center,
      ),
    ),
  ),
);

---

📏 Design Tokens (Spacing & Radius)

Padding(
  padding: const EdgeInsets.all(AppSpacing.md),
  child: Container(
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(AppSpacing.radiusMd),
      color: AppColors.cardBg,
    ),
    child: const Text("Consistent spacing & radius"),
  ),
);

✅ Use AppSpacing for padding, margins, radius, and elevation to keep your UI consistent.

---

📲 Example App

An example app is included in the /example folder.

Run it with:

cd example
flutter run

It demonstrates:

• Light/Dark themes
• Typography styles
• Cards, TabBar, NavigationBar, BottomAppBar
• Spacing tokens in action

---

📷 Screenshots

[Typography]
[Home]
[Settings]

---

🤝 Contributing

Contributions are welcome!

• Open issues for bugs/features
• Submit PRs with improvements
• Share ideas in Discussions

---

📄 License

This project is licensed under the MIT License.
See LICENSE for details.