gp_design 0.0.3

Colección de componentes, temas, tokens visuales y utilidades responsivas para construir apps Flutter consistentes con el sistema de diseño GP.

gp_design

Colección modular de widgets, temas, tokens visuales y utilidades para construir productos Flutter consistentes en varios proyectos. El paquete separa la API visual principal de los módulos opcionales de red, utilidades, validadores y componentes de dominio.

Características

• Tema consistente con GpTheme, GpColors, GpSpacing, GpTextSize y GpBorderRadius.
• Componentes reutilizables como botones, inputs, listas, estados, diálogos, loaders y tablas.
• Layout responsive con GpResponsive, GpResponsiveLayout, GpRow y GpCol.
• Entry points separados para UI, red, utilidades, validadores y módulos opcionales.
• API extensible con parámetros de estilo, tamaños, tonos y composición.

Installation

Agrega la dependencia en tu pubspec.yaml:

dependencies:
  gp_design: ^0.0.2

Importa solo el entry point que necesites:

import 'package:gp_design/gp_design.dart';

import 'package:gp_design/network.dart';
import 'package:gp_design/utils.dart';
import 'package:gp_design/validators.dart';
import 'package:gp_design/auth.dart';
import 'package:gp_design/profile.dart';

Entry points

• package:gp_design/gp_design.dart: tema, responsive, widgets base, feedback, layout y data display.
• package:gp_design/network.dart: cliente HTTP, configuración, interceptores, excepciones y servicios.
• package:gp_design/utils.dart: GpNavigator, GpScaffoldMessenger y GpSnackBar.
• package:gp_design/validators.dart: validadores reutilizables.
• package:gp_design/auth.dart: componentes opcionales de autenticación.
• package:gp_design/profile.dart: componentes opcionales de perfil.

Usage

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

void main() {
  runApp(const DemoApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: GpTheme.light(),
      darkTheme: GpTheme.dark(),
      themeMode: ThemeMode.system,
      home: const Scaffold(
        appBar: GpAppBar(title: 'GP Design'),
        body: Padding(
          padding: EdgeInsets.all(16),
          child: GpButton(
            text: 'Continuar',
            onPressed: null,
          ),
        ),
      ),
    );
  }
}

Uso de red

import 'package:gp_design/network.dart';

final dio = Dio()
  ..interceptors.addAll([
    AuthInterceptor(() async => 'token-123'),
    ErrorInterceptor(),
  ]);

Uso de utilidades

import 'package:gp_design/utils.dart';

GpSnackBar.showSuccess(
  'Guardado correctamente',
  title: 'Exito',
  context: context,
);

Plataformas soportadas

• Android
• iOS
• Web
• macOS
• Windows
• Linux

Componentes incluidos

• UI base: GpText, GpButton, GpIconButton, GpCard, GpBadge, GpAvatar, GpImage, GpDivider.
• Forms: GpInputField, GpPasswordField, GpTextarea, GpSelectField, GpPhoneField, GpOtpInput, GpPinInput.
• Layout y navegación: GpResponsiveLayout, GpPageScaffold, GpNavigationShell, GpDrawer, GpAppBar, GpTabBar.
• Feedback: GpBanner, GpEmptyState, GpStatusNotification, GpSnackBar, GpModal, GpSkeleton.
• Data display: GpListTile, GpActionTile, GpActionMenu, GpStatCard, GpKeyValueList, GpResponsiveTable, GpFilterBar, GpSearchBar.

Contribuciones y soporte

1. Haz un fork y crea una rama descriptiva.
2. Ejecuta dart format, dart analyze y flutter test.
3. Abre un pull request con contexto y screenshots si aplica.

Para reportar bugs o solicitar componentes abre un issue en GitHub.