Saltar al contenido principal

Flutter

OmniBuy provee tres archivos Dart listos para usar en la app móvil. Están en lib/core/theme/ del repo omnibuy-app-mobile.

Archivos​

ArchivoClaseResponsabilidad
app_colors.dartAppColorsConstantes Color — mapeo 1:1 con los tokens del design system
app_typography.dartAppTypographyConstantes TextStyle — escala tipográfica completa
app_theme.dartAppThemeThemeData light y dark — referencian los dos archivos anteriores

Aplicar el tema​

MaterialApp(
  theme: AppTheme.light,
  darkTheme: AppTheme.dark,
  themeMode: ThemeMode.system, // respeta preferencia del sistema
  home: const HomeScreen(),
)

Usar colores directamente​

// Botón primario custom
Container(
  decoration: BoxDecoration(
    color: AppColors.primary,
    borderRadius: BorderRadius.circular(8),
  ),
  child: const Text('Comprar ahora', style: TextStyle(color: AppColors.white)),
)

// Badge de éxito
Container(
  color: AppColors.success50,
  padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
  child: Text('Entregado', style: TextStyle(color: AppColors.success700)),
)

Usar estilos de texto directamente​

Text('Total del pedido', style: AppTypography.headlineMedium)
Text('S/ 129.90',        style: AppTypography.displayMedium)
Text('IVA incluido',     style: AppTypography.bodySmall)

Acceder al tema en el contexto​

Para colores que cambian entre light/dark, usar Theme.of(context):

// Recomendado — responde a cambios de tema en tiempo real
final colorScheme = Theme.of(context).colorScheme;
final textTheme   = Theme.of(context).textTheme;

Text('Hola', style: textTheme.headlineMedium)
Container(color: colorScheme.primaryContainer)

Dark mode​

El dark mode está implementado automáticamente. Si necesitas detectarlo:

final isDark = Theme.of(context).brightness == Brightness.dark;

White-label (multi-tenant)​

Para sobreescribir colores de un tenant específico, crear una subclase de AppTheme:

ThemeData tenantTheme(Color brandColor) {
  return AppTheme.light.copyWith(
    colorScheme: AppTheme.light.colorScheme.copyWith(
      primary: brandColor,
      onPrimary: Colors.white,
    ),
  );
}

Font Inter​

Inter debe estar declarado en pubspec.yaml:

flutter:
  fonts:
    - family: Inter
      fonts:
        - asset: assets/fonts/Inter-Regular.ttf
          weight: 400
        - asset: assets/fonts/Inter-Medium.ttf
          weight: 500
        - asset: assets/fonts/Inter-SemiBold.ttf
          weight: 600
        - asset: assets/fonts/Inter-Bold.ttf
          weight: 700
        - asset: assets/fonts/Inter-ExtraBold.ttf
          weight: 800