Saltar al contenido principal

Vista General de Widgets

Widgets de Flutter del paquete tiendana_uikit.

Molecules (Componentes Modernos)​

Botones (molecules/buttons/)​

  • AppElevatedButton - Botón relleno con animación hover circular
  • AppOutlinedButton - Botón con borde y animación
  • AppTextButton - Botón de texto minimalista
  • AppIconButton - Botón circular solo ícono
  • AppRoundIconButton - Variante redondeada de ícono
  • AppNavbarButton - Botón para navegación

Todos los botones soportan:

  • 7 variantes de color: primary, secondary, red, lavender, sky, sun, greenNeon
  • 2 tamaños: constructor normal y .small()
  • Íconos personalizables
  • Animaciones hover con flutter_animate
  • Estados: normal, hover, pressed, disabled

Inputs (molecules/input/)​

  • ImageInput - Input de imágenes

Widgets Legacy​

Widgets pre-construidos en lib/widgets/:

Formularios​

  • AppTextFormField - Campo de texto con validación
  • AppBtnFormField - Campo de texto con botón
  • LoginFormField - Campo de login especializado
  • AppCheckBox - Checkbox personalizado
  • AppDropdownButton - Dropdown básico
  • TiendanaDropdown - Dropdown mejorado

Botones Legacy​

  • AppPrimaryButton - Botón primario (legacy)
  • AppSecundaryButton - Botón secundario (legacy)
  • AppDeleteButton - Botón de eliminación
  • LoginButton - Botón de login especializado

Chips​

  • TiendanaChoiceChip - Chip de selección
  • TiendanaInputChip - Chip de input

Uso Recomendado​

Para nuevos proyectos, usa los componentes Molecules que tienen:

  • Arquitectura moderna
  • Animaciones fluidas
  • API consistente
  • Mejor mantenibilidad
// Recomendado: Molecules
import 'package:tiendana_uikit/molecules/buttons/buttons.dart';

AppElevatedButton(
  text: 'Continuar',
  variant: ButtonVariant.primary,
  onPressed: () {},
)

// Legacy (solo para compatibilidad)
import 'package:tiendana_uikit/widgets/app_primary_button.dart';

Sistema de Tokens​

Todos los widgets usan el sistema de tokens de lib/tokens/:

// Colores
ColorsTokens.colorNatura  // #00D47E
ColorsTokens.colorForrest // #1B434C

// Espaciado
SpacingTokens.spacingMd   // 16px
SpacingTokens.paddingBtn  // EdgeInsets específicos

// Tipografía
TypographyTokens.fontSizeBase    // 14px
TypographyTokens.fontWeightBold  // FontWeight.w700