\r \r

Flutter Development Guide\r

\r A practical guide for building cross-platform applications with Flutter 3 and Dart. Focuses on proven patterns, state management, and performance optimization.\r \r

Quick Reference\r

\r

Widget Patterns\r

\r | Purpose | Component |\r |---------|-----------|\r | State management (simple) | StateProvider + ConsumerWidget |\r | State management (complex) | NotifierProvider / Bloc |\r | Async data | FutureProvider / AsyncNotifierProvider |\r | Real-time streams | StreamProvider |\r | Navigation | GoRouter + context.go/push |\r | Responsive layout | LayoutBuilder + breakpoints |\r | List display | ListView.builder |\r | Complex scrolling | CustomScrollView + Slivers |\r | Hooks | HookWidget + useState/useEffect |\r | Forms | Form + TextFormField + validation |\r \r

Performance Patterns\r

\r | Purpose | Solution |\r |---------|----------|\r | Prevent rebuilds | const constructors |\r | Selective updates | ref.watch(provider.select(...)) |\r | Isolate repaints | RepaintBoundary |\r | Lazy lists | ListView.builder |\r | Heavy computation | compute() isolate |\r | Image caching | cached_network_image |\r \r

Core Principles\r

\r

Widget Optimization\r

• Use const constructors wherever possible\r
• Extract static widgets to separate const classes\r
• Use Key for list items (ValueKey, ObjectKey)\r
• Prefer ConsumerWidget over StatefulWidget for state\r \r

State Management\r

• Riverpod for dependency injection and simple state\r
• Bloc/Cubit for event-driven workflows and complex logic\r
• Never mutate state directly (create new instances)\r
• Use select() to minimize rebuilds\r \r

Layout\r

• 8pt spacing increments (8, 16, 24, 32, 48)\r
• Responsive breakpoints: mobile (\x3C650), tablet (650-1100), desktop (>1100)\r
• Support all screen sizes with flexible layouts\r
• Follow Material 3 / Cupertino design guidelines\r \r

Performance\r

• Profile with DevTools before optimizing\r
• Target \x3C16ms frame time for 60fps\r
• Use RepaintBoundary for complex animations\r
• Offload heavy work with compute()\r \r

Checklist\r

\r

Widget Best Practices\r

• const constructors on all static widgets\r
• Proper Key on list items\r
• ConsumerWidget for state-dependent widgets\r
• No widget building inside build() method\r
• Extract reusable widgets to separate files\r \r

State Management\r

• Immutable state objects\r
• select() for granular rebuilds\r
• Proper provider scoping\r
• Dispose controllers and subscriptions\r
• Handle loading/error states\r \r

Navigation\r

• GoRouter with typed routes\r
• Auth guards via redirect\r
• Deep linking support\r
• State preservation across routes\r \r

Performance\r

• Profile mode testing (flutter run --profile)\r
• \x3C16ms frame rendering time\r
• No unnecessary rebuilds (DevTools check)\r
• Images cached and resized\r
• Heavy computation in isolates\r \r

Testing\r

• Widget tests for UI components\r
• Unit tests for business logic\r
• Integration tests for user flows\r
• Bloc tests with blocTest()\r \r

References\r

\r | Topic | Reference |\r |-------|-----------|\r | Widget patterns, const optimization, responsive layout | Widget Patterns |\r | Riverpod providers, notifiers, async state | Riverpod State Management |\r | Bloc, Cubit, event-driven state | Bloc State Management |\r | GoRouter setup, routes, deep linking | GoRouter Navigation |\r | Feature-based structure, dependencies | Project Structure |\r | Profiling, const optimization, DevTools | Performance Optimization |\r | Widget tests, integration tests, mocking | Testing Strategies |\r | iOS/Android/Web specific implementations | Platform Integration |\r | Implicit/explicit animations, Hero, transitions | Animations |\r | Dio, interceptors, error handling, caching | Networking |\r | Form validation, FormField, input formatters | Forms |\r | i18n, flutter_localizations, intl | Localization |\r \r ---\r \r Flutter, Dart, Material Design, and Cupertino are trademarks of Google LLC and Apple Inc. respectively. Riverpod, Bloc, and GoRouter are open-source packages by their respective maintainers.\r