Untitled

Dot Dart File and Material Import

• The dot dart file is designed to import material.dart. This is essential for utilizing Flutter's material design components efficiently.

Creating a Curling App Colors

• Constants are defined to establish the color palette used during the app's execution, impacting the app's appearance dynamically.

  • App Bar Background Color: This can adjust depending on the theme applied (light/dark).

  • Light Background: Defined as follows:

  • LightDrawerBackground = Colors.white

Theme Color Definition

• The theme color is crucial as it represents the application's body background.

  • Constants Defined:

  • static const Color lightTextColor = Colors.black

  • static const Color lightCardColor = Colors.white

  • static const Color lightButtonTextColor = Color(0x1C1816)

Drawer Background Color

• Dark Theme Background Color:

  • DarkTextColor = Colors.white

  • DarkButtonTextColor = Colors.white

Theme Data Definition

• Create a new Dart file (themes.dart) and import material.dart.

  • Static Constants for Theme:

  • static const lightTheme = ThemeData(...)

    • Initializes a theme with an empty object approach. The brightness for this theme is set as follows:

    • Brightness.light

Fill Button Theme

• Button Styling: Defined under the theme data with attributes for:

  • Fill Button Theme:

  • buttonTheme: ButtonThemeData(...) specifying brandColor and buttonsForegroundColor. It utilizes appColors.lightButtonTextColor.

  • Card Background Color: Uses appColors.lightCardColor for the card theme.

Text Styles Definition

• Specific text styles are defined for headings and body text to create a cohesive textual user experience.

  • Text Sizes:

  • Headings and body sizes are as follows:

    • Body Text Styles:

    • Body Large: Font size = 18, Font weight = 500, Color = appColors.lightTextColor

    • Body Medium: Font size = 16

    • Body Small: Font size = 14

  • Headline Text Styles:

  • Headline Large: Font size = 21, Font weight = 700, Color = appColors.lightTextColor

  • Headline Medium: Font size = 18, Font weight = (unspecified)

  • Headline Small: Font size = 16

Light and Dark Themes

• Both themes can be defined and applied in the app, notably through the textTheme, adjusting dynamically based on user preferences.

  • Brightness attributes can also be swapped:

  • Brightness Variations: Brightness.dark vs Brightness.light

Dimensions Class Definition

• Introduction of a dimension class to standardize padding and margins throughout the application:

  • Padding Values:

  • Padding Small = 8.0

  • Padding Medium = 16.0

  • Padding Large = 24.0

  • Margin Values:

  • Margin Small = 8.0

  • Margin Medium = 16.0

  • Margin Large = 24.0

Border Radius and Spacing

• Definition of constant border radius and spacing for consistency in UI design:

  • Border Radius Values:

  • Card Border Radius: 8.0

  • Medium = 16.0, Large = 24.0

  • Spacing Values:

  • Spacing Small, Medium for UI components setup

Asset Management

• Managing assets for images and fonts plays a critical role in app aesthetics and is done as follows:

  • Folder Structure:

  • Create a directory for assets

  • Add product images or any other required assets here.

  • Home Page Dart File:

  • home_page.dart, setup using stateful widgets for dynamic content handling.

    • Define static strings for assets (icons, etc.) within this page:

    • E.g., static const String drawMenuIcon = 'assets/images/menu-two-line.png'

    • Setup Icon using Image.asset('images/drawer_menu_icon')

Text Styles Recap

• Six text styles are defined encompassing body styles (small, medium) and heading styles (small, medium, large).

  • This facilitates the application to use these defined styles dynamically across widgets, containers, buttons, and other UI elements for better visual cohesion and clarity.

1. Material Library Import

Every file interacting with Flutter's UI components must begin with the material import:

import 'package:flutter/material.dart';

2. Standardized App Colors

Define a centralized class to manage the application's color palette for both light and dark modes.

class AppColors {
  // Light Theme Constants
  static const Color lightDrawerBackground = Colors.white;
  static const Color lightTextColor = Colors.black;
  static const Color lightCardColor = Colors.white;
  static const Color lightButtonTextColor = Color(0xFF1C1816); // Hex: $0xFF1C1816$

  // Dark Theme Constants
  static const Color darkTextColor = Colors.white;
  static const Color darkButtonTextColor = Colors.white;
}

3. Layout Dimensions and Spacing

Use a dimension class to avoid hardcoding values and ensure responsiveness.

class AppDimensions {
  // Padding and Margins
  static const double small = $8.0$;
  static const double medium = $16.0$;
  static const double large = $24.0$;

  // Border Radius
  static const double borderRadiusCard = $8.0$;
  static const double borderRadiusMedium = $16.0$;
  static const double borderRadiusLarge = $24.0$;

  // Spacing
  static const double spaceSmall = $8.0$;
  static const double spaceMedium = $16.0$;
}

4. Application Theme Registry

This class defines the ThemeData objects for the MaterialApp widget, specifically handling TextTheme and ButtonTheme.

class AppThemes {
  static final ThemeData lightTheme = ThemeData(
    brightness: Brightness.light,
    scaffoldBackgroundColor: AppColors.lightDrawerBackground,
    cardTheme: CardTheme(
      color: AppColors.lightCardColor,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(AppDimensions.borderRadiusCard),
      ),
    ),
    buttonTheme: const ButtonThemeData(
      buttonColor: AppColors.lightButtonTextColor,
      textTheme: ButtonTextTheme.primary,
    ),
    textTheme: const TextTheme(
      // Headline Styles
      headlineLarge: TextStyle(
        fontSize: $21.0$,
        fontWeight: FontWeight.w700,
        color: AppColors.lightTextColor,
      ),
      headlineMedium: TextStyle(
        fontSize: $18.0$,
        fontWeight: FontWeight.w600,
        color: AppColors.lightTextColor,
      ),
      headlineSmall: TextStyle(
        fontSize: $16.0$,
        color: AppColors.lightTextColor,
      ),
      // Body Styles
      bodyLarge: TextStyle(
        fontSize: $18.0$,
        fontWeight: FontWeight.w500,
        color: AppColors.lightTextColor,
      ),
      bodyMedium: TextStyle(
        fontSize: $16.0$,
        color: AppColors.lightTextColor,
      ),
      bodySmall: TextStyle(
        fontSize: $14.0$,
        color: AppColors.lightTextColor,
      ),
    ),
  );

  static final ThemeData darkTheme = ThemeData(
    brightness: Brightness.dark,
    // Mirror lightTheme configuration using dark variables
  );
}

5. Home Page and Asset Management

The HomePage implements the defined themes and assets using a StatefulWidget for dynamic layout.

```dart
class HomePage extends StatefulWidget {
const HomePage({super.key});

@override
State createState() => _HomePageState();
}

class _HomePageState extends State {
// Static path for local assets
static const String drawMenuIcon = 'assets/images/menu-two-line.png';

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
leading: Padding(
padding: const EdgeInsets.all(AppDimensions.small),
child: Image.asset(drawMenuIcon),
),
title: Text(
'Curling App',
style: Theme.of(context).textTheme.headlineLarge,
),
),
body: Container(
padding: const EdgeInsets.all(AppDimensions.medium),
child: Column(
children: [
Text(
'Main Content',
style: Theme.of(context).textTheme.bodyLarge,

Material Design Library Integration

Applications built with Flutter must import the Material library to leverage pre-built UI components and styling protocols. This is done at the top of the dart file:

import 'package:flutter/material.dart';

Centralized Color Palette (AppColors)

To ensure a consistent visual identity, colors are defined as static constants within a central class. This allows for dynamic theme switching and easier maintenance.

class AppColors {
  // Light Theme Palette
  static const Color lightDrawerBackground = Colors.white;
  static const Color lightTextColor = Colors.black;
  static const Color lightCardColor = Colors.white;
  static const Color lightButtonTextColor = Color(0xFF1C1816); // Hex: $0xFF1C1816$

  // Dark Theme Palette
  static const Color darkTextColor = Colors.white;
  static const Color darkButtonTextColor = Colors.white;
}

Layout Dimensions and Spacing (AppDimensions)

A dimension class standardizes UI spacing, preventing the use of hardcoded magic numbers.

class AppDimensions {
  // Fixed Pacing and Margins
  static const double small = $8.0$;
  static const double medium = $16.0$;
  static const double large = $24.0$;

  // Border Radius Constants
  static const double borderRadiusCard = $8.0$;
  static const double borderRadiusMedium = $16.0$;
  static const double borderRadiusLarge = $24.0$;

  // UI Spacing
  static const double spaceSmall = $8.0$;
  static const double spaceMedium = $16.0$;
}

Application Theme Registry (AppThemes)

The AppThemes class encapsulates ThemeData objects, defining how text, buttons, and cards appear across the app.

class AppThemes {
  static final ThemeData lightTheme = ThemeData(
    brightness: Brightness.light,
    scaffoldBackgroundColor: AppColors.lightDrawerBackground,
    cardTheme: CardTheme(
      color: AppColors.lightCardColor,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(AppDimensions.borderRadiusCard),
      ),
    ),
    buttonTheme: const ButtonThemeData(
      buttonColor: AppColors.lightButtonTextColor,
      textTheme: ButtonTextTheme.primary,
    ),
    textTheme: const TextTheme(
      // Headline Typography
      headlineLarge: TextStyle(
        fontSize: $21.0$,
        fontWeight: FontWeight.w700,
        color: AppColors.lightTextColor,
      ),
      headlineMedium: TextStyle(
        fontSize: $18.0$,
        fontWeight: FontWeight.w600,
        color: AppColors.lightTextColor,
      ),
      headlineSmall: TextStyle(
        fontSize: $16.0$,
        color: AppColors.lightTextColor,
      ),
      // Body Typography
      bodyLarge: TextStyle(
        fontSize: $18.0$,
        fontWeight: FontWeight.w500,
        color: AppColors.lightTextColor,
      ),
      bodyMedium: TextStyle(
        fontSize: $16.0$,
        color: AppColors.lightTextColor,
      ),
      bodySmall: TextStyle(
        fontSize: $14.0$,
        color: AppColors.lightTextColor,
      ),
    ),
  );

  static final ThemeData darkTheme = ThemeData(
    brightness: Brightness.dark,
    // Mirroring configuration using dark color variables
  );
}

Asset Management and Home Page Implementation

Assets are managed via a dedicated folder structure (e.g., assets/images/) and referenced as static strings to maintain clean code within StatefulWidget classes.

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // Static path for local assets
  static const String drawMenuIcon = 'assets/images/menu-two-line.png';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).scaffoldBackgroundColor,
        leading: Padding(
          padding: const EdgeInsets.all(AppDimensions.small),
          child: Image.asset(drawMenuIcon),
        ),
        title: Text(
          'Curling App',
          style: Theme.of(context).textTheme.headlineLarge,
        ),
      ),
      body: Container(
        padding: const EdgeInsets.all(AppDimensions.medium),
        child: Column(
          children: [
             Text(
               'Main Content Area',
               style: Theme.of(context).textTheme.bodyLarge,
             ),
          ],
        ),
      ),
    );
  }
}