Skip to main content

​
Overview

Trackmart’s theming system allows you to customize the app’s visual appearance through color schemes and UI constants. The theme is configured using Flutter’s ThemeData and centralized UI constants.

​
Theme Configuration

​
Primary Theme Setup

The app’s main theme is defined in main.dart:12-16 using Flutter’s ThemeData:
lib/main.dart
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: new ThemeData(
        primaryColor: const Color(0xff004d40),
        primaryColorDark: const Color(0xff003e33),
        accentColor: const Color(0xff005B9A),
      ),
      home: RootPage(),
      debugShowCheckedModeBanner: false,
    );
  }
}
The theme uses a teal and blue color scheme with:
  • Primary Color: #004d40 (Dark Teal)
  • Primary Color Dark: #003e33 (Darker Teal)
  • Accent Color: #005B9A (Blue)

​
HomePage Theme

The HomePage widget also defines its own theme in home_page.dart:34-38:
lib/home_page.dart
Widget build(BuildContext context) {
  return new MaterialApp(
    theme: new ThemeData(
      primaryColor: const Color(0xff004d40),
      primaryColorDark: const Color(0xff005B9A),
      accentColor: const Color(0xff005B9A),
    ),
    title: "Trackmart",
    home: new TabbedGuy(
      onSignedout: this.onSignedout,
      currentUserId: this.currentUserId,
    ),
  );
}
Note that HomePage has a slightly different theme configuration where primaryColorDark is set to the same value as accentColor (#005B9A).

​
Customizing Colors

​
Step-by-Step Color Customization

1

Choose Your Color Palette

Select your primary, primary dark, and accent colors. Use a color picker or design tool to find the hex values.
2

Update main.dart

Open lib/main.dart and modify the ThemeData in the MyApp widget:
theme: new ThemeData(
  primaryColor: const Color(0xffYOURCOLOR),
  primaryColorDark: const Color(0xffYOURCOLOR),
  accentColor: const Color(0xffYOURCOLOR),
),
3

Update home_page.dart

Open lib/home_page.dart and update the theme in the HomePage widget’s build method to match your color scheme.
4

Test Your Changes

Hot reload or restart your app to see the new colors applied throughout the interface.

​
UI Constants (uidata.dart)

The uidata.dart:1-90 file contains centralized UI constants for consistent styling across the app.

​
Available Constants

static const String homeRoute = "/home";
static const String profileOneRoute = "/View Profile";
static const String settingsOneRoute = "/Device Settings";
static const String loginOneRoute = "/Login With OTP";
// ... more routes

static const String quickFont = "Quicksand";
static const String ralewayFont = "Raleway";
static const String quickBoldFont = "Quicksand_Bold.otf";
static const String quickNormalFont = "Quicksand_Book.otf";
static const String quickLightFont = "Quicksand_Light.otf";

static const String imageDir = "assets/images";
static const String pkImage = "$imageDir/pk.jpg";
static const String profileImage = "$imageDir/profile.jpg";
static const String blankImage = "$imageDir/blank.jpg";
// ... more image paths

static List<Color> kitGradients = [
  Colors.blueGrey.shade800,
  Colors.black87,
];

static List<Color> kitGradients2 = [
  Colors.cyan.shade600,
  Colors.blue.shade900
];

​
Using UI Constants

To use these constants in your widgets: 
import 'package:sandtrack/uidata.dart';

// Using route constants
Navigator.pushNamed(context, UIData.homeRoute);

// Using image paths
Image.asset(UIData.profileImage)

// Using gradients
Container(
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: UIData.kitGradients,
    ),
  ),
)

​
Color Usage Throughout the App

Colors from the theme are used extensively throughout the app:

Primary Color

Used for app bars, major UI elements, and branding
Theme.of(context).primaryColor

Primary Color Dark

Used for darker variants of primary elements and icons
Theme.of(context).primaryColorDark

Accent Color

Used for interactive elements, progress indicators, and highlights
Theme.of(context).accentColor

Random Colors

UIData provides a utility for random colors
UIData.next() // Returns random color

​
Best Practices

Consistency is Key: Always use Theme.of(context) to access colors rather than hardcoding color values. This ensures your custom theme is applied throughout the app.
Adding New UI Constants: When adding new reusable values (routes, strings, colors), add them to uidata.dart to maintain centralization.

​
Examples

​
Custom Loading Indicator

CircularProgressIndicator(
  valueColor: AlwaysStoppedAnimation<Color>(
    Theme.of(context).accentColor
  ),
)
This pattern is used in home_page.dart:347-348 for consistency.

​
Themed Text

Text(
  'Trackmart',
  style: TextStyle(
    fontSize: 20,
    color: Theme.of(context).accentColor
  )
)
Used in the loading screen at home_page.dart:310-312.

Build docs developers (and LLMs) love

Get started for freeTalk to us