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';
import 'package:gp_design/webview.dart';
import 'package:gp_design/permissions.dart';
import 'package:gp_design/scanner.dart';
import 'package:gp_design/html.dart';
import 'package:gp_design/launcher.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/webview.dart: GpWebViewScreen, GpWebViewModal y GpWebView — muestran una URL con loading y error-con-reintento resueltos. Aparte porque trae webview_flutter como dependencia.
• 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.
• package:gp_design/permissions.dart: GpPermissions.request(...) — pide un permiso del sistema mostrando antes una explicación con el diálogo estándar de GP. Aparte porque trae permission_handler como dependencia.
• package:gp_design/scanner.dart: GpQrScannerScreen — escaneo de QR/códigos de barra con marco, linterna y permiso de cámara resueltos. Aparte porque trae mobile_scanner como dependencia.
• package:gp_design/html.dart: GpHtmlView — renderiza HTML con la tipografía del tema. Aparte porque trae flutter_widget_from_html como dependencia.
• package:gp_design/launcher.dart: GpLinkLauncher y GpWhatsApp — abrir enlaces (externo/interno) y WhatsApp. Aparte porque trae url_launcher como dependencia.

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.