bootstrap_italia_flutter
Bootstrap Italia, el sistema de diseño de la administración pública italiana, como paquete de Flutter: 60 widgets y un catálogo que funciona en la propia página.
- Rol
- Autor y mantenedor: los widgets, las pruebas, la app de catálogo, las comprobaciones y las versiones
- Tipo
- Paquete de Flutter de código abierto, licencia MIT, en pub.dev
- Periodo
- Julio de 2026 – hoy (0.1.2, octubre de 2026)
- Plataformas
- Android, iOS, web, macOS, Windows y Linux
El producto
Bootstrap Italia es el sistema de diseño sobre el que se construyen los sitios de la administración pública italiana, y existe solo como CSS y JavaScript. bootstrap_italia_flutter lo lleva a Flutter: los mismos botones, alertas, tarjetas, formularios, cabeceras, megamenús y modales, para las apps que una administración pública publica junto a su sitio.
Lo escribí después de bootstrap_italia_icons, el paquete de iconos que ya había publicado, y lo subí a pub.dev en octubre de 2026. Es no oficial a propósito: el nombre termina en _flutter, el README dice que no lo produce ni lo respalda Developers Italia ni AgID, y no declara conformidad de accesibilidad, que para estos servicios es una obligación legal, hasta que se haya probado con tecnología de asistencia real.
- 60
- widgets exportados: botones, alertas, tarjetas, formularios, modales, cabeceras, megamenús, carruseles y más
- 1,055
- pruebas automáticas, 369 de ellas contratos sobre lo que se le dice a un lector de pantalla
- 73/74
- estados de componentes a menos de un 5 % del renderizado del propio kit oficial
- 3
- idiomas para los textos que dice en tu nombre: italiano, alemán y francés
Recorrido
La app en acción
Elige una grabación o salta directamente a un capítulo.
Grabado desde la app de ejemplo del paquete compilada para la web, a ancho de escritorio: el catálogo es una lista a la izquierda y la página a la derecha. Un script la maneja a través del árbol de accesibilidad de Flutter; sin sonido.
Qué hace
Un sistema de diseño leído, no calculado a ojo
01
El aspecto del kit, a partir del CSS del kit
Cada color, tamaño, relleno y borde se lee del CSS compilado de Bootstrap Italia 2.18.0, no se adivina a partir de capturas. Los botones, alertas y tarjetas del catálogo son los mismos widgets que recibe una app que usa el paquete, con los mismos tokens, y las fuentes (Titillium Web, Lora, Roboto Mono) viajan dentro del paquete.
02
Formularios que funcionan con teclado y lector de pantalla
Campos de texto, selects, casillas, radios, interruptores y un autocompletado, cada uno con su etiqueta, ayuda y error ligados al campo. El autocompletado reduce la lista mientras escribes, resalta la coincidencia y anuncia cuántos resultados hay sin mover el foco.
03
Navegación y superposiciones que conservan el foco
El megamenú abre una sección en un panel de enlaces y devuelve el foco a la entrada que lo abrió; el modal toma el foco, lo mantiene y se cierra con Esc. Son las partes que fallan primero cuando un sistema de diseño se reconstruye para otro toolkit.
Por dentro
Cómo se construyó
Accesibilidad comprobada en capas
Las pruebas comprueban roles y estados en el árbol de semántica de Flutter; axe-core se ejecuta contra este paquete y contra el kit de React oficial, de modo que un problema que viene de upstream nunca se me achaca; el contraste y los tamaños de objetivo se calculan a partir de los tokens, porque axe no puede juzgar el contraste en un canvas de Flutter; y en dispositivos se vuelven a leer los árboles de accesibilidad de Android e iOS, que es donde las capas anteriores dejaban de coincidir con la plataforma. Ninguna comprobación en dispositivo se ejecuta en CI, y el README lo dice.
Honesto sobre lo que es y lo que no es
Hay un documento de conformidad que dice qué se ha verificado y qué no, una lista de los componentes que el kit tiene y el paquete no (barras de progreso, steppers, línea de tiempo, paginación) y una sección final en cada página del catálogo para las partes de la documentación que no significan nada en Flutter, para que nadie se pregunte si se olvidaron.
Una promesa que necesitaba una prueba
El README dice que el paquete no hace peticiones a terceros, lo que importa para el RGPD en las administraciones públicas. Una prueba soak en la web descubrió que el renderizador web de Flutter descarga Roboto desde fonts.gstatic.com al arrancar, use lo que use la app, salvo que la app declare una familia de fuentes llamada exactamente Roboto. El catálogo ahora incluye una, y la prueba soak falla si esa petición vuelve.
El catálogo, funcionando en la página
La app de ejemplo del paquete, en vivo
Una librería de widgets se juzga mejor usándola. El paquete incluye una app de catálogo que refleja la documentación oficial de Bootstrap Italia página por página, con el Dart que produjo cada ejemplo al lado; aquí está, compilada para la web.
- 1
El código publicado, compilado para la web
El repositorio en la versión 0.1.2, su app de ejemplo compilada con flutter build web. El renderizador se sirve desde este sitio y no desde la CDN de Google, y las fuentes son las del paquete.
- 2
Nada de fuera
La grabación se ejecuta con toda petición externa rechazada, y encontró una: un carácter invisible en un texto del catálogo que ninguna fuente incluida dibuja, y que hace que Flutter descargue una fuente de reserva de Google. La copia mostrada aquí quita ese carácter; el paquete no se toca.
- 3
Manejada a través del árbol de accesibilidad
Flutter dibuja en un canvas, así que no hay nada que pulsar. Un storyboard de Playwright activa el árbol de semántica, encuentra cada widget por su nombre accesible y lo toca como lo haría un dedo; desplazar la barra lateral para llegar a las entradas de más abajo forma parte del guion.
- 4
Dos diseños
A ancho de escritorio el catálogo es una lista y una página una al lado de la otra; por debajo del punto de corte grande la lista llena la pantalla y cada página la sustituye. Las grabaciones muestran el primero, el ejemplo en vivo el segundo.
Los textos son los del paquete, en italiano, siguiendo la documentación oficial. Bootstrap Italia y la identidad visual de la República Italiana pertenecen a sus titulares; este paquete es un port de la comunidad sin ningún estatus oficial.
Funciona por completo en tu navegador, al ancho de un teléfono: abre una sección y luego un componente. Las grabaciones muestran el diseño de escritorio.
Todas las pantallas
La colección completa de capturas
BotonesLos cinco estilos del kit, el mismo widget: ItButton. El código de cada ejemplo está debajo. AlertasLos cinco tipos de alerta de Bootstrap Italia, con sus iconos y colores, anunciados a los lectores de pantalla. TarjetasUna tarjeta desde su forma mínima hasta la completa: categoría, fecha, título como enlace, texto. Campos de textoLos tipos de campo que enumera la documentación, cada uno con el teclado adecuado en un teléfono. AutocompletadoAl escribir se reduce la lista de regiones; la parte coincidente se resalta y los resultados se anuncian. SelectEl select con su menú abierto, en la tipografía del kit. MegamenúEl megamenú del kit: una barra de secciones que se abren en un panel de enlaces. ModalUna ventana modal: toma el foco, lo mantiene y Esc la cierra.
En el teléfono
El catálogo en un teléfonoPor debajo del punto de corte grande el catálogo es una lista de secciones, cada una de las cuales se abre en su página. Una página en un teléfonoCada página de componente conserva el orden de la documentación: un ejemplo en vivo y luego el código.
Siguiente caso de estudio
Indennizzo Diretto →