Phinx Responsive Package

phinx_responsive_package es un paquete de Flutter diseñado para proporcionar componentes de interfaz de usuario adaptativos (responsive) en tus aplicaciones. Facilita el manejo de diferentes tamaños de pantalla y ofrece un conjunto de widgets y utilidades para crear interfaces que se adapten automáticamente según el dispositivo.

Features

  • ResponsiveProvider: Proveedor que ajusta automáticamente el diseño de la interfaz basado en el tamaño de la pantalla y el tipo de dispositivo (móvil, tableta, computadora).
  • Widgets:
    • ResponsiveContainer: Un contenedor flexible que se adapta al espacio disponible en la pantalla.
    • ResponsiveScaffold: Una versión adaptable del widget Scaffold.
    • ResponsiveWidget: Ajusta dinámicamente el tamaño y la disposición de los widgets en función de la pantalla.
    • ResponsiveAppBar: Un AppBar adaptativo.
    • ResponsiveWrap: Envuelve widgets dinámicamente según el tamaño de la pantalla.
  • Sistema de Puntos de Ruptura (Breakpoints): Soporte para varios puntos de ruptura (xs, sm, md, lg, xl, xxl) para manejar cambios de diseño en función del ancho de la pantalla.

Getting started

Para comenzar a usar el paquete, agrégalo a tu archivo pubspec.yaml:

dependencies:
  phinx_responsive_package: ^0.1.1

Ejecuta el siguiente comando para instalar las dependencias:

flutter pub get

Usage

ResponsiveProvider

ResponsiveProvider ajusta automáticamente el diseño en función de las dimensiones de la pantalla, actualizando los puntos de ruptura cuando el tamaño de la ventana cambia.

Ejemplo básico

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:phinx_responsive_package/phinx_responsive_package.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => ResponsiveProvider(),
      child: MaterialApp(
        home: ResponsiveScaffold(
          appBar: ResponsiveAppBar(
            title: 'Responsive App',
          ),
          child: ResponsiveContainer(
            child: Center(
              child: Text('Hola Mundo!'),
            ),
          ),
        ),
      ),
    );
  }
}

ResponsiveScaffold

ResponsiveScaffold es una versión adaptativa del widget Scaffold de Flutter. Puede manejar AppBar, Drawer, BottomNavigationBar y FloatingActionButton adaptativamente.

Ejemplo básico

ResponsiveScaffold(
  appBar: ResponsiveAppBar(
    title: 'Responsive Example',
  ),
  child: ResponsiveContainer(
    child: Center(child: Text('Contenido Adaptable')),
  ),
)

ResponsiveWrap

ResponsiveWrap organiza los widgets hijos dinámicamente en función del tamaño de la pantalla. Se puede utilizar para distribuir el espacio entre los elementos de manera flexible.

Ejemplo básico

ResponsiveWrap(
  suggestedHeight: 1 / 3,
  flexWidth: respProvider.valueWhen(1.0, Breakpoint.xs, 1 / 4),
  children: const [
    Widget1(),
    Widget2(),
    Widget3(),
    Widget4(),
  ],
)

ResponsiveWidget

ResponsiveWidget permite definir cómo los widgets deben ajustarse en pantallas de diferentes tamaños (móvil, tablet, computadora).

Ejemplo básico

ResponsiveWidget(
  flexWidth: 1.0,
  flexHeight: 1.0,
  child: Container(color: Colors.blue),
)

Breakpoints

El paquete soporta varios puntos de ruptura que permiten adaptar el diseño a diferentes tamaños de pantalla:

  • xs: Hasta 575px (dispositivos pequeños)
  • sm: Desde 576px hasta 767px (dispositivos medianos)
  • md: Desde 768px hasta 991px (tabletas)
  • lg: Desde 992px hasta 1199px (dispositivos grandes)
  • xl: Desde 1200px hasta 1399px (pantallas extra grandes)
  • xxl: 1400px y más (pantallas ultra grandes)

Información Adicional

Publicar el paquete en pub.dev

  1. Preparar para la publicación:

    • Actualiza la versión en pubspec.yaml.
    • Asegúrate de que la descripción, el README, y la documentación estén al día.
    • Verifica que todas las dependencias estén correctamente configuradas.
    • Ejecuta flutter pub publish --dry-run para comprobar que todo esté listo.

  2. Actualizar CHANGELOG.md:

    • Añade las notas de la nueva versión al changelog.

  3. Probar localmente:

    • Prueba el paquete en un proyecto local para asegurarte de que funciona correctamente.

  4. Gestionar etiquetas en Git (opcional pero recomendado):

    • Crea una etiqueta para la nueva versión en Git: 
      git tag -a vX.X.X -m "Release version X.X.X"
    • Empuja la etiqueta al repositorio remoto: 
      git push
git push origin --tags

  5. Publicar el paquete:

    • Ejecuta flutter pub publish para publicar la nueva versión.
    • Sigue las instrucciones que aparecen durante el proceso de publicación.

Libraries

error/error
providers/responsive_provider
responsive
utils/responsive_breakpoints
widgets/responsive_appbar
widgets/responsive_container
widgets/responsive_scaffold
widgets/responsive_widget
widgets/responsive_wrap