bootstrap_italia_flutter
Bootstrap Italia, das Designsystem der italienischen öffentlichen Verwaltung, als Flutter-Paket: 60 Widgets und ein Katalog, der direkt in der Seite läuft.
- Rolle
- Autor und Maintainer: die Widgets, die Tests, die Katalog-App, die Prüfungen und die Releases
- Art
- Open-Source-Flutter-Paket, MIT-Lizenz, auf pub.dev
- Zeitraum
- Juli 2026 – heute (0.1.2, Oktober 2026)
- Plattformen
- Android, iOS, Web, macOS, Windows und Linux
Das Produkt
Bootstrap Italia ist das Designsystem, auf dem die Websites der italienischen öffentlichen Verwaltung aufbauen, und es gibt es nur als CSS und JavaScript. bootstrap_italia_flutter bringt es nach Flutter: dieselben Buttons, Hinweise, Karten, Formulare, Header, Megamenüs und Dialoge, für die Apps, die eine Behörde neben ihrer Website veröffentlicht.
Ich habe es nach bootstrap_italia_icons geschrieben, dem Icon-Paket, das ich bereits veröffentlicht hatte, und im Oktober 2026 auf pub.dev gestellt. Es ist bewusst inoffiziell: Der Name endet auf _flutter, das README sagt, dass es weder von Developers Italia noch von der AgID erstellt oder unterstützt wird, und es erklärt keine Konformität bei der Barrierefreiheit, die für diese Dienste gesetzlich vorgeschrieben ist, solange sie nicht mit echter Hilfstechnologie getestet wurde.
- 60
- exportierte Widgets: Buttons, Hinweise, Karten, Formulare, Dialoge, Header, Megamenüs, Karussells und mehr
- 1,055
- automatisierte Tests, 369 davon Verträge darüber, was einem Screenreader gesagt wird
- 73/74
- Komponentenzustände, die der Darstellung des offiziellen Kits bis auf 5 % gleichen
- 3
- Sprachen für die Texte, die es in Ihrem Namen spricht: Italienisch, Deutsch und Französisch
Rundgang
Die App in Aktion
Wählen Sie eine Aufnahme oder springen Sie direkt zu einem Kapitel.
Aufgenommen aus der für das Web gebauten Beispiel-App des Pakets, in Desktop-Breite: Der Katalog ist links eine Liste und rechts die Seite. Ein Skript steuert ihn über den Accessibility-Baum von Flutter; ohne Ton.
Funktionen
Ein Designsystem, gelesen statt nach Gefühl nachgebaut
01
Das Aussehen des Kits, aus dem CSS des Kits
Jede Farbe, Größe, jeder Abstand und Rahmen wird aus dem kompilierten CSS von Bootstrap Italia 2.18.0 gelesen, nicht nach Screenshots geschätzt. Die Buttons, Hinweise und Karten im Katalog sind dieselben Widgets, die eine App mit dem Paket bekommt, mit denselben Tokens, und die Schriften (Titillium Web, Lora, Roboto Mono) stecken im Paket.
02
Formulare, die mit Tastatur und Screenreader funktionieren
Textfelder, Auswahlfelder, Checkboxen, Radiobuttons, Schalter und eine Autovervollständigung, jeweils mit Label, Hinweis und Fehler, die mit dem Feld verbunden sind. Die Autovervollständigung verkürzt die Liste beim Tippen, hebt den Treffer hervor und kündigt an, wie viele Ergebnisse es gibt, ohne den Fokus zu verschieben.
03
Navigation und Overlays, die den Fokus halten
Das Megamenü öffnet einen Bereich zu einem Panel voller Links und gibt den Fokus an den Eintrag zurück, der es geöffnet hat; der Dialog übernimmt den Fokus, behält ihn und schließt mit Esc. Das sind die Teile, die zuerst schiefgehen, wenn ein Designsystem für ein anderes Toolkit neu gebaut wird.
Unter der Haube
So wurde es entwickelt
Barrierefreiheit in Schichten geprüft
Tests prüfen Rollen und Zustände im Semantikbaum von Flutter; axe-core läuft gegen dieses Paket und gegen das offizielle React-Kit, sodass ein Problem aus dem Upstream nie als meines gemeldet wird; Kontrast und Zielgrößen werden aus den Tokens berechnet, weil axe den Kontrast auf einem Flutter-Canvas nicht beurteilen kann; und auf Geräten werden die Accessibility-Bäume von Android und iOS zurückgelesen, dort, wo die Schichten davor nicht mehr mit der Plattform übereinstimmten. Keine der Geräteprüfungen läuft in der CI, und das README sagt das.
Ehrlich darüber, was es ist und was nicht
Es gibt ein Konformitätsdokument, das sagt, was geprüft wurde und was nicht, eine Liste der Komponenten, die das Kit hat und das Paket nicht (Fortschrittsbalken, Stepper, Timeline, Paginierung), und am Ende jeder Katalogseite einen Abschnitt für die Teile der Dokumentation, die in Flutter keinen Sinn ergeben, damit sich niemand fragt, ob sie vergessen wurden.
Ein Versprechen, das einen Test brauchte
Das README sagt, dass das Paket keine Anfragen an Dritte stellt, was für die DSGVO in Behörden zählt. Ein Web-Soak-Test fand heraus, dass der Web-Renderer von Flutter beim Start Roboto von fonts.gstatic.com lädt, egal was die App nutzt, es sei denn, die App deklariert eine Schriftfamilie mit genau dem Namen Roboto. Der Katalog bündelt jetzt eine, und der Soak-Test schlägt fehl, falls diese Anfrage je zurückkommt.
Der Katalog, direkt in der Seite
Die Beispiel-App des Pakets, live
Eine Widget-Bibliothek beurteilt man am besten, indem man sie benutzt. Das Paket enthält eine Katalog-App, die die offizielle Dokumentation von Bootstrap Italia Seite für Seite abbildet, mit dem Dart-Code jedes Beispiels daneben; hier ist sie, für das Web gebaut.
- 1
Der veröffentlichte Code, für das Web gebaut
Das Repository im Release 0.1.2, seine Beispiel-App mit flutter build web gebaut. Der Renderer kommt von dieser Seite statt vom CDN von Google, und die Schriften sind die des Pakets.
- 2
Nichts von außen
Die Aufnahme läuft mit abgewiesenen externen Anfragen und fand eine: ein unsichtbares Zeichen in einem Katalogtext, das keine gebündelte Schrift darstellt und Flutter dazu bringt, eine Ersatzschrift von Google zu laden. Die hier gezeigte Kopie entfernt dieses Zeichen; das Paket bleibt unberührt.
- 3
Über den Accessibility-Baum gesteuert
Flutter zeichnet auf ein Canvas, also gibt es nichts anzuklicken. Ein Playwright-Storyboard schaltet den Semantikbaum ein, findet jedes Widget über seinen zugänglichen Namen und berührt es wie ein Finger; die Seitenleiste zu scrollen, um die unteren Einträge zu erreichen, gehört zum Skript.
- 4
Zwei Layouts
In Desktop-Breite sind Liste und Seite nebeneinander; unterhalb des großen Breakpoints füllt die Liste den Bildschirm und jede Seite ersetzt sie. Die Aufnahmen zeigen das erste, das Live-Beispiel das zweite.
Die Texte sind die des Pakets, auf Italienisch, nach der offiziellen Dokumentation. Bootstrap Italia und das visuelle Erscheinungsbild der Italienischen Republik gehören ihren jeweiligen Inhabern; dieses Paket ist ein Community-Port ohne offiziellen Status.
Läuft vollständig in Ihrem Browser, in der Breite eines Telefons: Öffnen Sie einen Bereich, dann eine Komponente. Die Aufnahmen zeigen das Desktop-Layout.
Alle Bildschirme
Alle Screenshots im Überblick
SchaltflächenDie fünf Stile des Kits, immer dasselbe Widget: ItButton. Der Code zu jedem Beispiel steht darunter. HinweiseDie fünf Hinweisarten von Bootstrap Italia mit ihren Symbolen und Farben, für Screenreader angekündigt. KartenEine Karte von der minimalen bis zur vollständigen Form: Kategorie, Datum, Titel als Link, Text. TextfelderDie Feldtypen aus der Dokumentation, jeder mit der passenden Tastatur auf dem Telefon. AutovervollständigungBeim Tippen schrumpft die Liste der Regionen; der passende Teil ist hervorgehoben und die Ergebnisse werden angekündigt. AuswahlfeldDas Auswahlfeld mit geöffnetem Menü, in der Schrift des Kits. MegamenüDas Megamenü des Kits: eine Leiste mit Bereichen, die sich zu einem Panel voller Links öffnen. DialogEin modaler Dialog: Er übernimmt den Fokus, behält ihn, und Esc schließt ihn.
Auf dem Smartphone
Der Katalog auf einem TelefonUnterhalb des großen Breakpoints ist der Katalog eine Liste von Bereichen, die sich jeweils zu ihrer Seite öffnen. Eine Seite auf einem TelefonJede Komponentenseite folgt der Reihenfolge der Dokumentation: ein lebendiges Beispiel, dann der Code.
Nächste Fallstudie
Indennizzo Diretto →