Flutter App Implementation and Debugging
Build Flutter screens and fix state, routing, platform integration, and scrolling issues with focused code and test plans.
Before & after
Same prompt, same agent — the only difference is the skill.
Flutter is great for chat apps. There are a lot of decisions to make though: Do you want real-time messaging with WebSockets or just polling? What's your backend? Firebase is popular, but you could also build your own. State management—are you using Riverpod, Bloc, or Provider? And do you need push notifications? If you tell me more about your backend choice and user scale, I can point you toward the right patterns.
FLUTTER CHAT APP ARCHITECTURE
PROJECT STRUCTURE
lib/
models/
message.dart (id, userId, text, createdAt)
conversation.dart (participantIds, lastMessage)
screens/
conversation_list.dart
chat_screen.dart
providers/ (Riverpod)
conversation_provider.dart (state management)
message_provider.dart (real-time stream)
widgets/
message_bubble.dart
chat_input.dart
services/
firestore_service.dart (Firestore client)
auth_service.dart
STATE MANAGEMENT
Riverpod StreamProvider for real-time messages
StateNotifier for UI state (isLoading, error)
AsyncValue for handling loading + error states
REAL-TIME MESSAGING
Firebase Firestore with collection listeners
Conversations → Messages subcollection
OnSnapshot() streams new messages to UI (sub-100ms)
Offline persistence enabled by default
UI/UX DETAILS
Material 3 theme (supports light/dark)
ListView.builder for 2000+ messages without jank
GestureDetector for long-press reactions
Animated slide-in for new message bubble
PUSH NOTIFICATIONS
Firebase Cloud Messaging (FCM)
LocalNotifications for badge count
Notification dismissed on app foreground
PERFORMANCE TARGETS
• Message latency: <300ms (Firestore avg)
• Frame rate: 60fps (Profile in DevTools)
• Memory: <150MB cold startAbout this skill
Your Flutter screen works until a refresh races a page request, a deep link bypasses the expected navigation flow, or a long list starts stuttering. This skill builds and repairs Flutter features around the actual widget lifecycle, state ownership, routing behavior, and platform boundaries in your project.
What it does
- Implements screens with explicit loading, empty, error, refresh, and pagination behavior.
- Fixes stale async responses, duplicate page requests, disposed-widget updates, and state ownership problems.
- Uses the project's existing Riverpod, Bloc, or local-state approach without introducing competing patterns.
- Builds GoRouter flows that account for authentication resolution, deep links, nested navigation, and back behavior.
- Diagnoses layout and scrolling problems by separating constraints, rebuilds, layout work, and raster work.
- Designs platform-channel contracts with explicit capability checks, error handling, and native verification requirements.
What you get
Focused Dart changes or a complete feature implementation at the scope you request, with integration points, relevant regression cases, and an honest record of what was verified. Missing project details are handled with labeled assumptions and a small number of consequential questions.
Best for
Developers maintaining Flutter applications across Android, iOS, web, or desktop, especially teams debugging async state, navigation, long lists, and platform-specific behavior.
SKILL.md preview
---
name: flutter-app-implementation-and-debugging
description: Builds and repairs Flutter applications by tracing widget constraints, state ownership, asynchronous transitions, navigation, and platform boundaries, then supplying focused Dart changes and regression checks. Use when the user says "build this Flutter screen", "my list keeps showing old results", "fix my Riverpod state", "review this Bloc", "my deep link opens the wrong screen", "my Flutter list keeps stuttering", or "connect this native feature".
---
# Flutter App Implementation and Debugging
… (sign up to view the full skill)More development skills
View all Development skills →Frontend Component UX and Accessibility Review
Severity-ranked fixes with code for UI components: states, keyboard, focus, ARIA, touch targets, contrast, and responsive breakage.
Three.js Click-to-Learn 3D Game Builder
Build click-to-learn 3D games in Three.js: TSL materials, reliable object picking, and an accessible quiz overlay fed by content data.
Angular Standalone Features and State Architecture
Build Angular standalone features with lazy routes, scoped state, safe RxJS flows, and targeted tests.
shadcn/ui Component Building and Theming
Build, theme, and debug shadcn/ui components the way the library is designed to work, with Tailwind v3 and v4 theming handled correctly.