create-flutterinit 0.1.0

package/templates/base/lib/src/theme/color_schemes.dart.hbs

@@ -0,0 +1,126 @@
+import 'package:flutter/material.dart';
+
+/// App-specific colors that aren't part of the standard [ColorScheme].
+/// Access via `context.appColors` (defined in `context_extension.dart`).
+class AppColorsExtension extends ThemeExtension<AppColorsExtension> {
+  const AppColorsExtension({
+    required this.success,
+    required this.onSuccess,
+    required this.warning,
+    required this.onWarning,
+    required this.info,
+    required this.onInfo,
+    this.successContainer,
+    this.onSuccessContainer,
+    this.warningContainer,
+    this.onWarningContainer,
+    this.infoContainer,
+    this.onInfoContainer,
+  });
+
+  final Color success;
+  final Color onSuccess;
+  final Color warning;
+  final Color onWarning;
+  final Color info;
+  final Color onInfo;
+  final Color? successContainer;
+  final Color? onSuccessContainer;
+  final Color? warningContainer;
+  final Color? onWarningContainer;
+  final Color? infoContainer;
+  final Color? onInfoContainer;
+
+  @override
+  ThemeExtension<AppColorsExtension> copyWith({
+    Color? success,
+    Color? onSuccess,
+    Color? warning,
+    Color? onWarning,
+    Color? info,
+    Color? onInfo,
+    Color? successContainer,
+    Color? onSuccessContainer,
+    Color? warningContainer,
+    Color? onWarningContainer,
+    Color? infoContainer,
+    Color? onInfoContainer,
+  }) {
+    return AppColorsExtension(
+      success: success ?? this.success,
+      onSuccess: onSuccess ?? this.onSuccess,
+      warning: warning ?? this.warning,
+      onWarning: onWarning ?? this.onWarning,
+      info: info ?? this.info,
+      onInfo: onInfo ?? this.onInfo,
+      successContainer: successContainer ?? this.successContainer,
+      onSuccessContainer: onSuccessContainer ?? this.onSuccessContainer,
+      warningContainer: warningContainer ?? this.warningContainer,
+      onWarningContainer: onWarningContainer ?? this.onWarningContainer,
+      infoContainer: infoContainer ?? this.infoContainer,
+      onInfoContainer: onInfoContainer ?? this.onInfoContainer,
+    );
+  }
+
+  @override
+  ThemeExtension<AppColorsExtension> lerp(
+    covariant ThemeExtension<AppColorsExtension>? other,
+    double t,
+  ) {
+    if (other is! AppColorsExtension) {
+      return this;
+    }
+    return AppColorsExtension(
+      success: Color.lerp(success, other.success, t)!,
+      onSuccess: Color.lerp(onSuccess, other.onSuccess, t)!,
+      warning: Color.lerp(warning, other.warning, t)!,
+      onWarning: Color.lerp(onWarning, other.onWarning, t)!,
+      info: Color.lerp(info, other.info, t)!,
+      onInfo: Color.lerp(onInfo, other.onInfo, t)!,
+      successContainer: Color.lerp(successContainer, other.successContainer, t),
+      onSuccessContainer: Color.lerp(onSuccessContainer, other.onSuccessContainer, t),
+      warningContainer: Color.lerp(warningContainer, other.warningContainer, t),
+      onWarningContainer: Color.lerp(onWarningContainer, other.onWarningContainer, t),
+      infoContainer: Color.lerp(infoContainer, other.infoContainer, t),
+      onInfoContainer: Color.lerp(onInfoContainer, other.onInfoContainer, t),
+    );
+  }
+}
+
+/// Helper class to define the actual color palettes
+class AppPalettes {
+  AppPalettes._();
+
+  static const light = AppColorsExtension(
+    success: Color(0xFF2E7D32),
+    onSuccess: Colors.white,
+    successContainer: Color(0xFFA5D6A7),
+    onSuccessContainer: Color(0xFF1B5E20),
+    warning: Color(0xFFED6C02),
+    onWarning: Colors.white,
+    warningContainer: Color(0xFFFFCC80),
+    onWarningContainer: Color(0xFFE65100),
+    info: Color(0xFF0288D1),
+    onInfo: Colors.white,
+    infoContainer: Color(0xFF81D4FA),
+    onInfoContainer: Color(0xFF01579B),
+  );
+
+  static const dark = AppColorsExtension(
+    success: Color(0xFF81C784),
+    onSuccess: Color(0xFF003300),
+    successContainer: Color(0xFF1B5E20),
+    onSuccessContainer: Color(0xFFA5D6A7),
+    warning: Color(0xFFFFB74D),
+    onWarning: Color(0xFF5D4037),
+    warningContainer: Color(0xFFE65100),
+    onWarningContainer: Color(0xFFFFCC80),
+    info: Color(0xFF4FC3F7),
+    onInfo: Color(0xFF01579B),
+    infoContainer: Color(0xFF0277BD),
+    onInfoContainer: Color(0xFFE1F5FE),
+  );
+}
+
+/// Access semantic colors via `context.appColors` from `context_extension.dart`.
+/// Example: `context.appColors.success`

package/templates/base/lib/src/theme/text_theme.dart.hbs

@@ -0,0 +1,167 @@
+import 'package:flutter/material.dart';
+
+/// Defines the full Material 3 typescale for the application.
+///
+/// Prefer accessing styles through [BuildContext] extensions:
+/// ```dart
+/// Text('Hello', style: context.textTheme.titleLarge);
+/// ```
+TextTheme buildTextTheme() {
+  const baseTextTheme = TextTheme(
+    // ── Display ──────────────────────────────────────────────────────────────
+    // Use for the largest, most impactful text on a screen.
+    // Typically reserved for hero/marketing sections, splash screens,
+    // or short one-word statements. Never use for body copy.
+
+    /// 57 sp — Largest display text.
+    /// Use for: splash screen titles, giant counters, hero numbers.
+    displayLarge: TextStyle(
+      fontSize: 57,
+      fontWeight: FontWeight.w400,
+      letterSpacing: -0.25,
+    ),
+
+    /// 45 sp — Mid-size display text.
+    /// Use for: prominent feature headlines, onboarding first-screen titles.
+    displayMedium: TextStyle(
+      fontSize: 45,
+      fontWeight: FontWeight.w400,
+      letterSpacing: 0,
+    ),
+
+    /// 36 sp — Smallest display text.
+    /// Use for: section-level hero text, large marketing callouts.
+    displaySmall: TextStyle(
+      fontSize: 36,
+      fontWeight: FontWeight.w400,
+      letterSpacing: 0,
+    ),
+
+    // ── Headline ─────────────────────────────────────────────────────────────
+    // Use for page/screen-level headings. Slightly smaller than Display —
+    // works well as the primary title of a full page or major section.
+
+    /// 32 sp — Large page-level heading.
+    /// Use for: main screen titles (e.g. "My Profile"), large dialog headers.
+    headlineLarge: TextStyle(
+      fontSize: 32,
+      fontWeight: FontWeight.w400,
+      letterSpacing: 0,
+    ),
+
+    /// 28 sp — Standard page-level heading.
+    /// Use for: AppBar titles on content-heavy screens, sheet headers.
+    headlineMedium: TextStyle(
+      fontSize: 28,
+      fontWeight: FontWeight.w400,
+      letterSpacing: 0,
+    ),
+
+    /// 24 sp — Compact page-level heading.
+    /// Use for: section headings within a scrollable page, card group titles.
+    headlineSmall: TextStyle(
+      fontSize: 24,
+      fontWeight: FontWeight.w400,
+      letterSpacing: 0,
+    ),
+
+    // ── Title ─────────────────────────────────────────────────────────────────
+    // Use for component-level titles and prominent labels inside cards,
+    // lists, or dialogs. More emphasis than body, less than headline.
+
+    /// 22 sp — Prominent component title.
+    /// Use for: AppBar titles (standard), large list-section headers,
+    ///          dialog/modal titles.
+    titleLarge: TextStyle(
+      fontSize: 22,
+      fontWeight: FontWeight.w500,
+      letterSpacing: 0,
+    ),
+
+    /// 16 sp — Standard component title.
+    /// Use for: ListTile titles, card headings, tab labels, dropdown labels.
+    titleMedium: TextStyle(
+      fontSize: 16,
+      fontWeight: FontWeight.w500,
+      letterSpacing: 0.15,
+    ),
+
+    /// 14 sp — Compact component title.
+    /// Use for: dense list item titles, chip labels, form field labels,
+    ///          subtitle of a section.
+    titleSmall: TextStyle(
+      fontSize: 14,
+      fontWeight: FontWeight.w500,
+      letterSpacing: 0.1,
+    ),
+
+    // ── Body ──────────────────────────────────────────────────────────────────
+    // Use for reading/content text. Optimised for legibility at comfortable
+    // reading sizes. Default for paragraphs and descriptions.
+
+    /// 16 sp — Primary body text.
+    /// Use for: main paragraph text, message bubbles, article content,
+    ///          default Text() inside cards.
+    bodyLarge: TextStyle(
+      fontSize: 16,
+      fontWeight: FontWeight.w400,
+      letterSpacing: 0.5,
+    ),
+
+    /// 14 sp — Standard body text (most common).
+    /// Use for: secondary descriptions, ListTile subtitles, form helper text,
+    ///          dialog body copy. This is the workhorse style.
+    bodyMedium: TextStyle(
+      fontSize: 14,
+      fontWeight: FontWeight.w400,
+      letterSpacing: 0.25,
+    ),
+
+    /// 12 sp — Small body / caption text.
+    /// Use for: captions under images, timestamps, metadata, fine print,
+    ///          secondary info below a ListTile.
+    bodySmall: TextStyle(
+      fontSize: 12,
+      fontWeight: FontWeight.w400,
+      letterSpacing: 0.4,
+    ),
+
+    // ── Label ─────────────────────────────────────────────────────────────────
+    // Use for UI control labels, buttons, and navigation items.
+    // NOT for body copy — these are designed to label interactive elements.
+
+    /// 14 sp — Button and prominent control label.
+    /// Use for: ElevatedButton / TextButton / OutlinedButton text,
+    ///          navigation bar labels (selected), tab bar labels.
+    labelLarge: TextStyle(
+      fontSize: 14,
+      fontWeight: FontWeight.w500,
+      letterSpacing: 0.1,
+    ),
+
+    /// 12 sp — Standard control label.
+    /// Use for: chip text, badge text, tooltip text, navigation rail labels,
+    ///          input counter text, overline headings.
+    labelMedium: TextStyle(
+      fontSize: 12,
+      fontWeight: FontWeight.w500,
+      letterSpacing: 0.5,
+    ),
+
+    /// 11 sp — Smallest control label.
+    /// Use for: dense navigation labels, very small badges, annotation text,
+    ///          data table column headers. Avoid for reading-heavy content.
+    labelSmall: TextStyle(
+      fontSize: 11,
+      fontWeight: FontWeight.w500,
+      letterSpacing: 0.5,
+    ),
+  );
+
+  {{#if flags.hasCustomFonts}}
+  // Apply the primary custom font family to every text style in the scale.
+  return baseTextTheme.apply(fontFamily: '{{flags.primaryFontFamily}}');
+  {{else}}
+  return baseTextTheme;
+  {{/if}}
+}