Flutter Themes

example.dart

import 'package:design_system/design_system.dart';
import 'package:example/pages/buttons/buttons_example_page.dart';
import 'package:example/pages/feedbacks/feedbacks_example_page.dart';
import 'package:example/pages/inputs/inputs_example_page.dart';
import 'package:example/pages/inputs/liststile_example_page.dart';
import 'package:example/pages/inputs/searchfield_example_page.dart';
import 'package:example/pages/layouts/layouts_example_page.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Design System Demo',
      theme: NoodleTheme(AppColors.fromBrightness(Brightness.light)).light,
      darkTheme: NoodleTheme(AppColors.fromBrightness(Brightness.dark)).dark,
      themeMode: ThemeMode.system,
      home: const MyHomePage(title: 'Noodle Design System'),
    );
  }
}

noodle_theme.dart

import 'dart:ui';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import 'resources/colors/app_colors_light.dart';

class NoodleTheme {
  NoodleTheme(this.appColors);

  final AppColorsLight appColors;
  static const String fontFamily = 'ProximaNova';

  ThemeData get light => ThemeData(
        brightness: Brightness.light,
        scaffoldBackgroundColor: appColors.background,
        colorScheme: ColorScheme.light(
          brightness: Brightness.light,
          primary: appColors.primaryColor,
          secondary: appColors.secondaryColor,
          onPrimary: appColors.white,
          onSurface: appColors.textDefault,
          background: appColors.background,
        ),
        iconTheme: IconThemeData(
          color: appColors.iconsDefault,
        ),
        fontFamily: fontFamily,
        primaryTextTheme: Typography.material2021()
            .black
            ._applyNoodleStyle(appColors: appColors)
            .apply(
              bodyColor: appColors.textDefault,
              displayColor: appColors.textDefault,
              fontFamily: fontFamily,
            ),
        textTheme: Typography.material2021()
            .black
            ._applyNoodleStyle(appColors: appColors)
            .apply(
              bodyColor: appColors.textDefault,
              displayColor: appColors.textDefault,
              fontFamily: fontFamily,
            ),
        appBarTheme: getAppBarTheme(Brightness.light),
        tabBarTheme: tabBarTheme,
        buttonTheme: buttonTheme,
        pageTransitionsTheme: const PageTransitionsTheme(builders: {
          TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
          TargetPlatform.android: ZoomPageTransitionsBuilder(),
        }),
        cupertinoOverrideTheme: getCupertinoThemeData(Brightness.light),
      );

  ThemeData get dark => ThemeData(
        brightness: Brightness.dark,
        scaffoldBackgroundColor: appColors.backgroundLight,
        colorScheme: ColorScheme.light(
          brightness: Brightness.dark,
          primary: appColors.primaryColor,
          secondary: appColors.secondaryColor,
          onPrimary: appColors.white,
          onSurface: appColors.textDefault,
          background: appColors.backgroundLight,
        ),
        iconTheme: IconThemeData(
          color: appColors.iconsDefault,
        ),
        fontFamily: fontFamily,
        textTheme: Typography.material2021()
            .black
            ._applyNoodleStyle(appColors: appColors)
            .apply(
              bodyColor: appColors.textDefault,
              displayColor: appColors.textDefault,
              fontFamily: fontFamily,
            ),
        appBarTheme: getAppBarTheme(Brightness.dark),
        tabBarTheme: tabBarTheme,
        buttonTheme: buttonTheme,
        pageTransitionsTheme: const PageTransitionsTheme(builders: {
          TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
          TargetPlatform.android: ZoomPageTransitionsBuilder(),
        }),
        cupertinoOverrideTheme: getCupertinoThemeData(Brightness.dark),
      );

  TextStyle get _baseTextStyle => TextStyle(
        fontFamily: fontFamily,
        color: appColors.textDefault,
      );

  CupertinoThemeData getCupertinoThemeData(Brightness brightness) =>
      CupertinoThemeData(
        brightness: brightness,
        scaffoldBackgroundColor: appColors.backgroundLight,
        barBackgroundColor: appColors.backgroundLight,
        primaryColor: appColors.primaryColor,
        textTheme: CupertinoTextThemeData(
          primaryColor: appColors.primaryColor,
          navTitleTextStyle: TextStyle(
            fontSize: 16,
            fontFamily: fontFamily,
            fontWeight: FontWeight.bold,
            color: appColors.textDefault,
          ),
          textStyle: _baseTextStyle,
        ),
      );

  AppBarTheme getAppBarTheme(Brightness brightness) => AppBarTheme(
        color: Colors.transparent,
        systemOverlayStyle: SystemUiOverlayStyle(
          statusBarColor: Colors.transparent,
          systemStatusBarContrastEnforced: false,
          statusBarBrightness: brightness,
          statusBarIconBrightness: brightness == Brightness.dark
              ? Brightness.light
              : Brightness.dark,
        ),
        elevation: 0,
        centerTitle: true,
        titleTextStyle: TextStyle(
          color: appColors.textDefault,
          fontFamily: fontFamily,
          fontWeight: FontWeight.w600,
          fontSize: 16,
        ),
        toolbarTextStyle: TextStyle(
          color: appColors.textDefault,
          fontFamily: fontFamily,
          fontWeight: FontWeight.w600,
          fontSize: 16,
        ),
        iconTheme: IconThemeData(color: appColors.iconsDefault),
      );

  TabBarTheme get tabBarTheme => TabBarTheme(
        labelColor: appColors.textDefault,
        unselectedLabelColor: appColors.textLight,
        indicatorSize: TabBarIndicatorSize.tab,
        indicator: BoxDecoration(
          border: Border(
            bottom: BorderSide(
              width: 2,
              color: appColors.primaryColor,
            ),
          ),
        ),
        unselectedLabelStyle: TextStyle(
          color: appColors.textLight,
          fontFamily: fontFamily,
          fontWeight: FontWeight.w700,
          fontSize: 18,
        ),
        labelStyle: TextStyle(
          color: appColors.textDefault,
          fontFamily: fontFamily,
          fontWeight: FontWeight.w700,
          fontSize: 18,
        ),
      );

  ButtonThemeData get buttonTheme => ButtonThemeData(
        buttonColor: appColors.primaryColor,
        disabledColor: appColors.textLight,
        textTheme: ButtonTextTheme.primary,
      );
}

extension NoodleTextStyle on TextStyle {
  TextStyle _applyNoodleStyle({
    Color? color,
    String? fontFamily = NoodleTheme.fontFamily,
  }) {
    return apply(
      color: color,
      fontFamily: fontFamily ?? this.fontFamily,
    );
  }
}

extension NoodleTextTheme on TextTheme {
  TextTheme _applyNoodleStyle({
    String fontFamily = NoodleTheme.fontFamily,
    required AppColorsLight appColors,
  }) {
    return TextTheme(
      headlineLarge: headlineLarge?._applyNoodleStyle(
        fontFamily: fontFamily,
        color: appColors.textDefault,
      ),
      labelMedium: headlineLarge?._applyNoodleStyle(
        fontFamily: fontFamily,
        color: appColors.textDefault,
      ),
      displayLarge: displayLarge?._applyNoodleStyle(
        fontFamily: fontFamily,
        color: appColors.textDefault,
      ),
      displayMedium: displayMedium?._applyNoodleStyle(
        fontFamily: fontFamily,
        color: appColors.textDefault,
      ),
      displaySmall: displaySmall?._applyNoodleStyle(
        fontFamily: fontFamily,
        color: appColors.textDefault,
      ),
      headlineMedium: headlineMedium?._applyNoodleStyle(
        fontFamily: fontFamily,
        color: appColors.textDefault,
      ),
      headlineSmall: headlineSmall?._applyNoodleStyle(
        fontFamily: fontFamily,
        color: appColors.textDefault,
      ),
      titleLarge: titleLarge?._applyNoodleStyle(
        fontFamily: fontFamily,
        color: appColors.textDefault,
      ),
      titleMedium: titleMedium?._applyNoodleStyle(
        fontFamily: fontFamily,
        color: appColors.textDefault,
      ),
      titleSmall: titleSmall?._applyNoodleStyle(
        fontFamily: fontFamily,
        color: appColors.textDefault,
      ),
      bodyLarge: bodyLarge?._applyNoodleStyle(
        fontFamily: fontFamily,
        color: appColors.textDefault,
      ),
      bodyMedium: bodyMedium?._applyNoodleStyle(
        fontFamily: fontFamily,
        color: appColors.textDefault,
      ),
      bodySmall: bodySmall?._applyNoodleStyle(
        fontFamily: fontFamily,
        color: appColors.textDefault,
      ),
      labelLarge: labelLarge?._applyNoodleStyle(
        fontFamily: fontFamily,
        color: appColors.textDefault,
      ),
      labelSmall: labelSmall?._applyNoodleStyle(
        fontFamily: fontFamily,
        color: appColors.textDefault,
      ),
    );
  }
}