Flutter - tiendana_uikit

tiendana_uikit es nuestra biblioteca de widgets de Flutter que proporciona un conjunto completo de componentes UI siguiendo el sistema de diseño de Tiendana.

Instalación

Agrega a tu pubspec.yaml:

dependencies:
  tiendana_uikit: ^0.0.1

Luego ejecuta:

flutter pub get

Inicio Rápido

import 'package:flutter/material.dart';
import 'package:tiendana_uikit/tiendana_uikit.dart';

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'App Tiendana',
      theme: ThemeProvider.light(),
      darkTheme: ThemeProvider.dark(),
      themeMode: ThemeMode.system,
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Inicio')),
      body: Center(
        child: AppElevatedButton(
          text: 'Haz clic',
          variant: ButtonVariant.primary,
          onPressed: () {
            print('¡Botón presionado!');
          },
        ),
      ),
    );
  }
}

Características

• ✅ Basado en Material Design 3
• ✅ Soporte de modo oscuro
• ✅ Diseños responsivos
• ✅ Tematización personalizable
• ✅ Soporte de accesibilidad
• ✅ Adaptaciones específicas de plataforma

Estructura del Paquete

Tokens (lib/tokens/)

Valores atómicos del sistema de diseño:

• colors.dart - Paleta de colores completa (primarios, secundarios, semánticos)
• spacing.dart - Escala de espaciado (4px - 64px)
• typography.dart - Sistema tipográfico (HostGrotesk, tamaños, pesos)
• border.dart - Radios de borde y estilos
• shadows.dart - Elevaciones y sombras
• size.dart - Tamaños de componentes

Foundations (lib/foundations/)

Capa semántica que usa tokens:

• colors.dart - ColorScheme de Material 3 (58 colores light/dark)
• spacing.dart - Utilidades de espaciado semánticas
• typography.dart - Estilos de texto predefinidos
• border.dart - Estilos de borde para componentes

Molecules (lib/molecules/)

Componentes compuestos reutilizables:

Botones (molecules/buttons/):

• AppElevatedButton - Botón relleno con fondo sólido
• AppOutlinedButton - Botón con borde sin fondo
• AppTextButton - Botón sin borde ni fondo
• AppIconButton - Botón circular solo ícono
• AppRoundIconButton - Variante redondeada de ícono
• AppNavbarButton - Botón para navegación

Inputs (molecules/input/):

• ImageInput - Input de imágenes

Widgets (lib/widgets/)

Widgets pre-construidos (legacy):

• Form fields, checkboxes, dropdowns, chips, etc.

UI Theme (lib/ui/)

• theme.dart - ThemeProvider con themes Material 3 completos
• app_styles.dart - Estilos compartidos de la aplicación

Otros

• Constants - Iconos personalizados y constantes
• Enums - ButtonVariant y otros enums
• Models - Modelos de datos (ButtonColors, etc.)
• Providers - Proveedores de datos (countries, etc.)
• Localizations - Soporte de internacionalización
• Utils - Utilidades auxiliares

Demos en Vivo

Todos los demos de componentes de Flutter están disponibles a través de iframes interactivos que muestran los componentes en acción.