bootstrap_italia_flutter
Bootstrap Italia, il design system della pubblica amministrazione italiana, come pacchetto Flutter: 60 widget e un catalogo che gira nella pagina.
- Ruolo
- Autore e manutentore: i widget, i test, l’app catalogo, i controlli e le release
- Tipo
- Pacchetto Flutter open source, licenza MIT, su pub.dev
- Periodo
- Luglio 2026 – oggi (0.1.2, ottobre 2026)
- Piattaforme
- Android, iOS, web, macOS, Windows e Linux
Il prodotto
Bootstrap Italia è il design system su cui sono costruiti i siti della pubblica amministrazione italiana, e esiste solo come CSS e JavaScript. bootstrap_italia_flutter lo porta in Flutter: gli stessi pulsanti, alert, card, form, header, megamenu e modali, per le app che un’amministrazione pubblica affianca al proprio sito.
L’ho scritto dopo bootstrap_italia_icons, il pacchetto di icone che avevo già pubblicato, e l’ho messo su pub.dev a ottobre 2026. È volutamente non ufficiale: il nome finisce in _flutter, il README dice che non è prodotto né approvato da Developers Italia o AgID, e non dichiara la conformità all’accessibilità, che per questi servizi è un obbligo di legge, finché non sarà stata provata con tecnologie assistive reali.
- 60
- widget esportati: pulsanti, alert, card, form, modali, header, megamenu, caroselli e altro
- 1,055
- test automatici, 369 dei quali sono contratti su ciò che viene detto a uno screen reader
- 73/74
- stati dei componenti entro il 5% dal rendering del kit ufficiale
- 3
- lingue per i testi che pronuncia al posto tuo: italiano, tedesco e francese
Tour guidato
L’app in azione
Scegli una registrazione, o salta direttamente a un capitolo.
Registrato dall’app di esempio del pacchetto compilata per il web, a larghezza desktop: il catalogo è un elenco a sinistra e la pagina a destra. Uno script la guida attraverso l’albero di accessibilità di Flutter; senza audio.
Cosa fa
Un design system letto, non intuito
01
L’aspetto del kit, dal CSS del kit
Ogni colore, dimensione, padding e bordo è letto dal CSS compilato di Bootstrap Italia 2.18.0, non indovinato dagli screenshot. I pulsanti, gli alert e le card del catalogo sono gli stessi widget che riceve un’app che usa il pacchetto, con gli stessi token, e i font (Titillium Web, Lora, Roboto Mono) viaggiano dentro il pacchetto.
02
Form che funzionano con tastiera e screen reader
Campi di testo, select, checkbox, radio, toggle e un completamento automatico, ciascuno con etichetta, suggerimento ed errore legati al campo. L’autocompletamento restringe l’elenco mentre scrivi, evidenzia la parte corrispondente e annuncia quanti risultati ci sono senza spostare il focus.
03
Navigazione e overlay che mantengono il focus
Il megamenu apre una sezione in un pannello di link e restituisce il focus alla voce che l’ha aperto; la modale prende il focus, lo mantiene e si chiude con Esc. Sono le parti che sbagliano per prime quando un design system viene ricostruito per un altro toolkit.
Sotto il cofano
Come è stato realizzato
Accessibilità verificata a strati
I test verificano ruoli e stati nell’albero di semantica di Flutter; axe-core gira sul pacchetto e sul kit React ufficiale, così un problema che viene dall’upstream non è mai segnalato come mio; contrasto e dimensioni dei bersagli sono calcolati dai token, perché axe non sa giudicare il contrasto su un canvas Flutter; e sui dispositivi si rileggono gli alberi di accessibilità di Android e iOS, che è dove gli strati precedenti smettevano di essere d’accordo con la piattaforma. Nessun controllo su dispositivo gira in CI, e il README lo dice.
Onesto su ciò che è e ciò che non è
C’è un documento di conformità che dice cosa è stato verificato e cosa no, un elenco dei componenti che il kit ha e il pacchetto no (barre di avanzamento, stepper, timeline, paginazione), e una sezione finale in ogni pagina del catalogo per le parti della documentazione che in Flutter non hanno senso, così chi legge non si chiede se siano state dimenticate.
Una promessa che aveva bisogno di un test
Il README dice che il pacchetto non fa richieste a terzi, il che conta per il GDPR nelle pubbliche amministrazioni. Un test soak sul web ha scoperto che il renderer web di Flutter scarica Roboto da fonts.gstatic.com all’avvio qualunque cosa usi l’app, a meno che l’app dichiari una famiglia di font chiamata esattamente Roboto. Il catalogo ora ne include una, e il soak test fallisce se quella richiesta torna.
Il catalogo, che gira nella pagina
L’app di esempio del pacchetto, dal vivo
Una libreria di widget si giudica meglio usandola. Il pacchetto include un’app catalogo che rispecchia la documentazione ufficiale di Bootstrap Italia pagina per pagina, con il Dart che ha prodotto ogni esempio accanto; eccola, compilata per il web.
- 1
Il codice pubblicato, compilato per il web
Il repository alla release 0.1.2, la sua app di esempio compilata con flutter build web. Il renderer è servito da questo sito e non dalla CDN di Google, e i font sono quelli del pacchetto.
- 2
Niente da fuori
La registrazione gira con ogni richiesta esterna rifiutata, e ne ha trovata una: un carattere invisibile in un testo del catalogo che nessun font incluso disegna, e che fa scaricare a Flutter un font di ripiego da Google. La copia mostrata qui toglie quel carattere; il pacchetto non è toccato.
- 3
Guidata attraverso l’albero di accessibilità
Flutter disegna su un canvas, quindi non c’è nulla da cliccare. Una storyboard Playwright attiva l’albero di semantica, trova ogni widget dal suo nome accessibile e lo tocca come farebbe un dito; scorrere la barra laterale per raggiungere le voci più in basso fa parte dello script.
- 4
Due layout
A larghezza desktop il catalogo è un elenco e una pagina affiancati; sotto il breakpoint grande l’elenco riempie lo schermo e ogni pagina lo sostituisce. Le registrazioni mostrano il primo, l’esempio dal vivo il secondo.
I testi sono quelli del pacchetto, in italiano, secondo la documentazione ufficiale. Bootstrap Italia e l’identità visiva della Repubblica Italiana appartengono ai rispettivi titolari; questo pacchetto è un port della comunità senza alcuno status ufficiale.
Gira interamente nel tuo browser, alla larghezza di un telefono: apri una sezione, poi un componente. Le registrazioni mostrano il layout desktop.
Ogni schermata
La raccolta completa degli screenshot
PulsantiI cinque stili del kit, lo stesso widget: ItButton. Il codice di ogni esempio è sotto di esso. AlertI cinque tipi di alert di Bootstrap Italia, con le sue icone e i suoi colori, annunciati agli screen reader. CardUna card dalla forma minima a quella completa: categoria, data, titolo come link, testo. Campi di testoI tipi di campo elencati dalla documentazione, ciascuno con la tastiera giusta su un telefono. AutocompletamentoScrivendo si restringe l’elenco delle regioni; la parte corrispondente è evidenziata e i risultati sono annunciati. SelectLa select con il menu aperto, nel carattere del kit. MegamenuIl megamenu del kit: una barra di sezioni che si aprono in un pannello di link. ModaleUna finestra modale: prende il focus, lo mantiene, e Esc la chiude.
Sul telefono
Il catalogo su un telefonoSotto il breakpoint grande il catalogo è un elenco di sezioni, ciascuna delle quali si apre nella sua pagina. Una pagina su un telefonoOgni pagina di componente mantiene l’ordine della documentazione: un esempio funzionante, poi il codice.
Prossimo caso di studio
Indennizzo Diretto →