Loading repository data…
Loading repository data…
somospragma / repository
Librería en Dart/Flutter que define el Design System de Pragma para aplicaciones móviles: temas, tokens de diseño (colores, tipografía, espaciado), sistema de columnas responsivo y componentes UI reutilizables, pensados para estandarizar la experiencia visual en todas las apps de Pragma.
Flutter library focused on mobile experiences that bundles Pragma's design tokens, base themes, and reusable UI components.
PragmaTheme with light/dark variants and Material 3 enabled by default.PragmaLoadingWidget) with circular and linear variants.PragmaTableWidget) with hover glow, tone presets, and compact density.PragmaPaginationWidget) with gradient capsule, summary builder, per-page dropdown, and light/dark surfaces.PragmaFilterWidget) with multi-select overlays, helper text, tag summaries, and light/dark surfaces.PragmaTooltipWidget) with arrow placements, optional title/icon/button combos, delays, and touch-friendly toggles.PragmaSearchWidget) with neon glow, tone presets, size options, and dropdown-ready callbacks.PragmaTextAreaWidget) with multi-line support, focus glow, validation states, and optional character counter.PragmaTagWidget) with gradient capsules, avatar slot, hover/pressed glow, and removable actions.PragmaRadioButtonWidget) with neon stroke, optional helper text, hover/pressed glow, and disabled styling.PragmaCheckboxWidget) with multi-select support, indeterminate state, dense mode, and hover/pressed neon outline.DsSidebarMenuWidget) with expanded/collapsed states, active item highlighting, disabled rows, and tooltip labels while collapsed.DsHeaderWidget) with left title, flexible right-side actions, and compact behavior for narrow layouts.ModelDesignSystem, ModelThemeData, ModelSemanticColors, ModelDataVizPalette, DsExtendedTokens, ModelTypographyTokens, and ModelDsComponentAnatomy.PragmaBadgeWidget) with light/dark palettes, icon slot, tone presets, and compact padding.PragmaButton, PragmaCard, PragmaIconButtonWidget, PragmaInputWidget, PragmaToastWidget, PragmaAccordionWidget, PragmaColorTokenRowWidget, PragmaThemeEditorWidget, PragmaLogoWidget).ModelThemePragma.PragmaGridTokens, viewport helpers, and the PragmaGridContainer widget to debug layouts.ModelPragmaComponent, ModelAnatomyAttribute) to sync documentation and showcases from JSON.Add the package to your pubspec.yaml:
dependencies:
pragma_design_system: ^1.3.0
Then run:
flutter pub get
import 'package:flutter/material.dart';
import 'package:pragma_design_system/pragma_design_system.dart';
class PragmaApp extends StatelessWidget {
const PragmaApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Pragma Design System',
theme: PragmaTheme.light(),
darkTheme: PragmaTheme.dark(),
home: const PragmaHome(),
);
}
}
PragmaColors exposes brand-aware ColorScheme definitions for light and dark modes.PragmaTypography defines responsive scales built on top of Google Fonts and can build TextTheme from ModelTypographyTokens.PragmaSpacing concentrates 4pt-system values and handy utilities.PragmaBorderRadiusTokens and PragmaBorderRadius keep rounded corners consistent in 4/8dp steps.PragmaAvatarWidget(
radius: 28,
initials: 'PD',
imageUrl: 'https://cdn.pragma.co/avatar.jpg',
style: PragmaAvatarStyle.primary,
tooltip: 'Pragma Designer',
)
PragmaPrimaryButton(
label: 'Guardar cambios',
one: PragmaButtonTone.brand,
onPressed: () {},
)
PragmaButton.icon(
label: 'Ver detalles',
icon: Icons.open_in_new,
hierarchy: PragmaButtonHierarchy.tertiary,
onPressed: () {},
)
final List<ModelDsSidebarMenuItem> items = <ModelDsSidebarMenuItem>[
ModelDsSidebarMenuItem(
id: 'dashboard',
label: 'Dashboard',
iconToken: DsSidebarIconToken.dashboard,
),
ModelDsSidebarMenuItem(
id: 'reports',
label: 'Reportes',
iconToken: DsSidebarIconToken.reports,
),
];
DsSidebarMenuWidget(
title: 'Creci',
items: items,
activeId: 'dashboard',
collapsed: false,
onItemTap: (String id) {},
onCollapsedToggle: (bool collapsed) {},
)
DsHeaderWidget(
title: 'Area de trabajo',
actions: <Widget>[
IconButton(
tooltip: 'Buscar',
onPressed: () {},
icon: const Icon(Icons.search),
),
const PragmaAvatarWidget(
radius: PragmaSpacing.sm,
initials: 'PD',
),
],
)
final ModelDesignSystem designSystem = ModelDesignSystem.pragmaDefault();
final ThemeData lightTheme = designSystem.toThemeData(
brightness: Brightness.light,
);
final ModelDesignSystem tuned = designSystem.copyWith(
typographyTokens: designSystem.typographyTokens.copyWith(
bodyMedium: designSystem.typographyTokens.bodyMedium.copyWith(
fontSize: 18,
),
),
);
Use this sequence to keep navigation predictable and controlled:
collapsed, activeId, permissions, and feature flags.List<ModelDsSidebarMenuItem> as the final navigation contract.DsSidebarMenuWidget as a controlled component (no internal state mutation).Sidebar + Header + WorkArea and reacts to collapsed/activeId.onItemTap, onCollapsedToggle) and updates state/router.class AppState {
final bool collapsed;
final String activeId;
final List<ModelDsSidebarMenuItem> items;
// ...
}
DsSidebarMenuWidget(
items: state.items,
activeId: state.activeId,
collapsed: state.collapsed,
onItemTap: (String id) => appManager.selectSection(id),
onCollapsedToggle: (bool value) => appManager.setCollapsed(value),
)
PragmaIconButtonWidget(
icon: Icons.add,
style: PragmaIconButtonStyle.filledLight,
onPressed: () {},
)
PragmaIconButtonWidget(
icon: Icons.close,
style: PragmaIconButtonStyle.outlinedDark,
size: PragmaIconButtonSize.compact,
onPressed: () {},
)
final PragmaInputController controller = PragmaInputController(
ModelFieldState(
suggestions: <String>['Discovery Lab', 'Growth', 'Mobile Core'],
),
);
PragmaInputWidget(
label: 'Nombre del squad',
controller: controller,
placeholder: 'Escribe un equipo',
helperText: 'Filtramos sugerencias automáticamente',
enablePasswordToggle: true,
obscureText: true,
onChanged: (String value) {
controller
..setValidation(isDirty: true, isValid: value.isNotEmpty)
..setError(value.isEmpty ? 'Dato requerido' : null);
},
);
final TextEditingController searchController = TextEditingController();
PragmaSearchWidget(
controller: searchController,
placeholder: 'Busca squads o features',
tone: PragmaSearchTone.dark,
size: PragmaSearchSize.large,
infoText: 'Escribe una palabra clave o abre el dropdown list',
onChanged: (String value) {
// Actualiza sugerencias o dropdown list
},
onSubmitted: (String value) {
debugPrint('Buscar: $value');
},
onClear: () {
debugPrint('Busqueda reiniciada');
},
);
final TextEditingController notesController = TextEditingController();
PragmaTextAreaWidget(
label: 'Notas del requerimiento',
controller: notesController,
placeholder: 'Describe alcance, riesgos y pendientes...',
description: 'Ideal para copy largo o acuerdos del squad.',
maxLength: 320,
minLines: 4,
successText: 'Notas listas para compartir con el squad.',
);
PragmaTagWidget(
label: 'eugenia.sarmiento@pragma.com.co',
leading: SizedBox(
width: 28,
height: 28,
child: CircleAvatar(
backgroundColor: Colors.white.withValues(alpha: 0.2),
child: const Text('ES'),
),
),
onPressed: () {
debugPrint('Abrir perfil de Eugenia');
},
onRemove: () {
debugPrint('Eliminar tag de Eugenia');
},
);
class _AccessLevelField extends StatelessWidget {
const _AccessLevelField({required this.value, required this.onChanged});
final String value;
final ValueChanged<String?> onChanged;
@override
ModelDsSidebarMenuItem e icon tokens permitidos.PragmaOpacityTokens and PragmaOpacity constrain overlays to 8/30/60 intervals using Color.withValues for Flutter 3.22+.ModelDesignSystem, ModelThemeData, ModelSemanticColors, ModelDataVizPalette, DsExtendedTokens, ModelTypographyTokens, ModelDsComponentAnatomy, ModelPragmaComponent, ModelAnatomyAttribute, ModelFieldState, ModelColorToken, and ModelThemePragma serialize documentation and theme contracts with JSON roundtrip support.PragmaGridTokens, getGridConfigFromContext, PragmaGridContainer, and PragmaScaleBox help replicate the official grid, respect gutters, and scale full mockups.PragmaPrimaryButton, PragmaSecondaryButton, PragmaButton.icon, PragmaCard, PragmaCardWidget, PragmaDropdownWidget, PragmaInputWidget, PragmaToastWidget, PragmaAvatarWidget, PragmaBreadcrumbWidget, PragmaAccordionWidget, PragmaColorTokenRowWidget, PragmaThemeEditorWidget, PragmaLogoWidget, PragmaCalendarWidget, PragmaLoadingWidget, or PragmaTableWidget ship consistent states and elevation.