Skip to main content

Basic Widget Style Documentation

This utility provides styling system for basic widget layouts in Flutter using Mix.

Overview​

The basicWidgetStyle function provides a consistent way to generate different widgets across your Flutter app, relying on the Enum definition from your mix_tokens.dart file.

Parameters​

  • context: BuildContext for accessing screen dimensions
  • type: Required WidgetType enum value
  • widthScale: Scale factor for widget width (default: 1)
  • height: Optional custom height
  • borderRadius: Optional custom border radius
  • padding: Optional custom padding
  • color: Optional background color

Default Values​

  • Height: 50 (except for header)
  • Color: Colors.transparent
  • BorderRadius: From Tokens.borderRadiusBase
  • Padding: Calculated using Tokens.getPadding(screenWidth)

Usage Example​

final headerStyle = basicWidgetStyle(
  context,
  type: WidgetType.header,
  widthScale: 0.8,
);

final cardStyle = basicWidgetStyle(
  context,
  type: WidgetType.card,
  height: 100,
  color: Colors.blue,
);

Dependencies​

Notes​

  • All styles inherit from baseStyle with flexible and expanded properties
  • Header height adjusts automatically based on screen width
  • Card style includes background color option
  • Default style provides basic container properties
  • Ensure Tokens.textSizes and Tokens.fontFamilyPrimary are available in your mix_tokens.dart file.