Flutter Development Guide#

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

Quick Reference#

Widget Patterns#

PurposeComponentState management (simple)StateProvider + ConsumerWidgetState management (complex)NotifierProvider / BlocAsync dataFutureProvider / AsyncNotifierProviderReal-time streamsStreamProviderNavigationGoRouter + context.go/pushResponsive layoutLayoutBuilder + breakpointsList displayListView.builderComplex scrollingCustomScrollView + SliversHooksHookWidget + useState/useEffectFormsForm + TextFormField + validation

Performance Patterns#

PurposeSolutionPrevent rebuildsconst constructorsSelective updatesref.watch(provider.select(...))Isolate repaintsRepaintBoundaryLazy listsListView.builderHeavy computationcompute() isolateImage cachingcached_network_image

Core Principles#

Widget Optimization#

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

State Management#

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

Layout#

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

Performance#

• Profile with DevTools before optimizing
• Target <16ms frame time for 60fps
• Use RepaintBoundary for complex animations
• Offload heavy work with compute()

Checklist#

Widget Best Practices#

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

State Management#

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

Navigation#

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

Performance#

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

Testing#

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

References#

TopicReferenceWidget patterns, const optimization, responsive layoutWidget PatternsRiverpod providers, notifiers, async stateRiverpod State ManagementBloc, Cubit, event-driven stateBloc State ManagementGoRouter setup, routes, deep linkingGoRouter NavigationFeature-based structure, dependenciesProject StructureProfiling, const optimization, DevToolsPerformance OptimizationWidget tests, integration tests, mockingTesting StrategiesiOS/Android/Web specific implementationsPlatform IntegrationImplicit/explicit animations, Hero, transitionsAnimationsDio, interceptors, error handling, cachingNetworkingForm validation, FormField, input formattersFormsi18n, flutter_localizations, intlLocalization

---

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.