Fähigkeiten flutter-dev
📦

flutter-dev

Sicher

Plattformübergreifende Flutter-Anwendungen entwickeln

Der Aufbau hochqualitativer plattformübergreifender Apps erfordert die Beherrschung vieler Flutter-Muster und State-Management-Ansätze. Diese Fähigkeit bietet strukturierte Anleitungen zu Widget-Mustern, Riverpod- und Bloc-State-Management, GoRouter-Navigation, Leistungsoptimierung und plattformspezifischen Implementierungen.

Unterstützt: Claude Codex Code(CC)
🥉 76 Bronze
1

Die Skill-ZIP herunterladen

2

In Claude hochladen

Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen

3

Einschalten und loslegen

Teste es

Verwendung von "flutter-dev". Zeig mir, wie ich GoRouter mit Authentifizierungswächtern einrichte

Erwartetes Ergebnis:

  • GoRouter mit einer Redirect-Funktion konfigurieren, die den Auth-Status prüft
  • Routenpfade für Anmeldung, Startseite und geschützte Bildschirme definieren
  • Eine Redirect implementieren, die nicht authentifizierte Benutzer zur Anmeldeseite weiterleitet
  • Den Navigationsstatus während der Authentifizierungsweiterleitungen beibehalten

Verwendung von "flutter-dev". Wie teste ich ein Bloc-basiertes Flutter-Widget?

Erwartetes Ergebnis:

  • Widget-Tests mit pumpWidget und einem ProviderScope-Wrapper schreiben
  • Mocktail verwenden, um Repository-Abhängigkeiten zu mocken
  • Benutzerinteraktionen mit find- und tap-Methoden auslösen
  • Erwartete UI-Statusänderungen mit expect-Assertionen verifizieren

Sicherheitsaudit

Sicher
v1 • 4/16/2026

This skill consists entirely of markdown documentation files (SKILL.md and 12 reference files) containing Dart/Flutter code examples and development best practices. The static analyzer flagged 583 patterns, but all are false positives caused by misinterpreting markdown code fence backticks as shell commands and treating documentation content as executable code. No actual scripts, network calls, filesystem operations, or external commands are present. The skill is safe to publish.

13
Gescannte Dateien
4,734
Analysierte Zeilen
0
befunde
1
Gesamtzahl Audits
Keine Sicherheitsprobleme gefunden
Auditiert von: claude

Qualitätsbewertung

45
Architektur
100
Wartbarkeit
87
Inhalt
50
Community
100
Sicherheit
91
Spezifikationskonformität

Was du bauen kannst

Mobile App Startup-Architektur

Ein neues Flutter-Projekt mit einer featurebasierten Struktur, GoRouter-Navigation und Riverpod State Management von Grund auf aufsetzen.

State Management Migration

Eine bestehende Flutter-Anwendung von setState zu Riverpod oder Bloc migrieren, um eine bessere State-Organisation und Testbarkeit zu erreichen.

Performance-Optimierungs-Audit

Leistungsengpässe mithilfe von DevTools-Profiling, const-Optimierung und RepaintBoundary-Mustern identifizieren und beheben.

Probiere diese Prompts

Erste Schritte mit Flutter-Projekt-Setup 
Hilf mir, ein neues Flutter-Projekt mit einer featurebasierten Ordnerstruktur einzurichten. Binde GoRouter für Navigation und Riverpod für State Management ein. Zeige den Haupteinstiegspunkt und einen einfachen Feature-Ordner.
Riverpod State Management implementieren 
Zeig mir, wie ich einen Benutzerauthentifizierungsfluss mit Riverpod implementiere. Binde einen StateNotifierProvider für den Auth-Status, ein Anmeldeformular mit Validierung und Navigation zum Home-Bildschirm nach erfolgreicher Anmeldung ein.
Flutter-Widget-Leistung optimieren 
Überprüfe diese Flutter-Widget-Hierarchie und identifiziere Leistungsprobleme. Schlage vor, wo ich const-Konstruktoren, RepaintBoundary und ListView.builder einsetzen sollte. Erkläre die Auswirkungen jeder Optimierung.
Einen vollständigen REST-API-Client mit Dio aufbauen 
Erstelle eine Dio-HTTP-Client-Einrichtung mit Authentifizierungs-Interceptors, Fehlerbehandlung und Wiederholungslogik. Binde ein Repository-Muster für API-Aufrufe ein und zeige, wie es sich in Riverpod-Provider integriert.

Bewährte Verfahren

  • Const-Konstruktoren auf allen statischen Widgets verwenden, um unnötige Neuerstellungen zu verhindern und den Speicherverbrauch zu reduzieren
  • Riverpod für einfaches State Management und Dependency Injection wählen, und Bloc für komplexe ereignisgesteuerte State-Flüsse
  • Mit Flutter DevTools im Profilmodus profilieren, bevor optimiert wird, um tatsächliche Leistungsengpässe zu identifizieren

Vermeiden

  • Vermeiden, setState für gemeinsam genutzten State zu verwenden, von dem mehrere Widgets abhängen. Stattdessen eine State-Management-Lösung nutzen
  • Keine API-Aufrufe oder schwere Berechnungen in build-Methoden platzieren. Provider oder Isolates für asynchrone Arbeit verwenden
  • Const-Konstruktoren auf statischen Widgets niemals überspringen. Fehlende const verhindert, dass Flutter unveränderte Widget-Teilbäume überspringt

Häufig gestellte Fragen

Soll ich Riverpod oder Bloc für mein Flutter-Projekt verwenden?
Riverpod eignet sich gut für einfaches State Management und Dependency Injection mit weniger Boilerplate. Bloc ist besser für komplexe Anwendungen mit ereignisgesteuerten State-Änderungen, Undo-Funktionalität oder wenn du explizites State-Transition-Logging benötigst. Viele Projekte verwenden beide gemeinsam.
Wie verbessere ich die Flutter-App-Leistung?
Beginne mit dem Profiling mit Flutter DevTools im Profilmodus. Verwende Const-Konstruktoren auf statischen Widgets, füge RepaintBoundary um komplexe Animationen hinzu, verwende ListView.builder für lange Listen und lagere schwere Berechnungen mit der compute-Funktion in Isolates aus.
Was ist die empfohlene Projektstruktur für Flutter-Apps?
Verwende eine featurebasierte Struktur, bei der jedes Feature seinen eigenen Ordner hat, der Präsentations-, Domänen- und Datenschichten enthält. Gemeinsame Utilities, Themes und Routing kommen in einen gemeinsamen Ordner. Dies skaliert besser als eine schichtenbasierte Struktur für größere Anwendungen.
Wie behandle ich Navigation und Deep Linking in Flutter?
Verwende GoRouter für deklaratives Routing mit typisierten Routen. Konfiguriere Deep Linking durch die Router-Konfiguration und plattformspezifische Einstellungen. Verwende Redirect-Funktionen für Authentifizierungswächter und Statusbeibehaltung über Routenänderungen hinweg.
Wie teste ich Flutter-Anwendungen effektiv?
Schreibe Widget-Tests für UI-Komponenten mit flutter_test. Schreibe Unit-Tests für Geschäftslogik und Repositories. Schreibe Integrationstests für vollständige Benutzerflows. Verwende Mocktail für Dependency-Mocking und bloc_test für das Testen von Bloc-State-Transitionen.
Wie behandle ich verschiedene Bildschirmgrößen in Flutter?
Verwende LayoutBuilder mit Breakpoints für responsive Layouts. Setze Breakpoints bei 650 Pixel für Tablet und 1100 Pixel für Desktop. Verwende flexible Widgets wie Expanded und Flexible und teste auf mehreren Bildschirmgrößen während der Entwicklung.

Entwicklerdetails

Lizenz

MIT

Repository

https://github.com/MiniMax-AI/skills/tree/main/skills/flutter-dev

Ref

main

Dateistruktur

📁 references/

📄 animations.md

📄 bloc-state.md

📄 forms.md

📄 gorouter-navigation.md

📄 localization.md

📄 networking.md

📄 performance.md

📄 platform-specific.md

📄 project-structure.md

📄 riverpod-state.md

📄 testing.md

📄 widget-patterns.md

📄 SKILL.md