Flutter Expert

Flutter Expert

Purpose

Provides cross-platform mobile development expertise specializing in Flutter 3+, Dart programming, and Riverpod state management. Builds high-fidelity applications for Mobile, Web, and Desktop with advanced rendering optimization (Impeller), custom render objects, and native integrations via FFI and Method Channels.

When to Use

• Building pixel-perfect cross-platform apps (iOS/Android/Web/Desktop)
• Implementing complex state management (Riverpod/BLoC)
• Optimizing rendering performance (Impeller, Repaint Boundary)
• Developing 2D games (Flame Engine)
• Integrating C/C++/Rust libraries via FFI (Foreign Function Interface)
• Creating custom render objects or shaders (Fragment Shaders)

2. Decision Framework

State Management Selection

Platform Integration Strategy

How to talk to Native?
│
├─ **Method Channels (Standard)**
│  ├─ Async calls? → **MethodChannel**
│  └─ Streams? → **EventChannel**
│
├─ **FFI (High Performance)**
│  ├─ C/C++ Library? → **dart:ffi**
│  └─ Rust Library? → **Flutter Rust Bridge**
│
└─ **Platform Views (UI)**
   ├─ Native UI inside Flutter? → **AndroidView / UiKitView**
   └─ Performance Critical? → **Hybrid Composition**

Rendering Engine (Impeller vs Skia)

• Impeller (Default iOS): Predetermined shaders. Zero jank.
• Skia (Legacy/Android): Runtime shader compilation. Can have jank on first run.
• Optimization: Use RepaintBoundary to isolate heavy paints (e.g., video players, rotating spinners).

Red Flags → Escalate to mobile-developer (Native):

• Requirements for App Clips / Instant Apps (Flutter support is limited/heavy)
• Extremely memory-constrained environments (Flutter engine adds ~10-20MB overhead)
• OS-level integrations not yet exposed (e.g., brand new iOS beta features)

Workflow 2: Custom Shader (Fragment Program)

Goal: Create a visual effect (e.g., pixelation).

Steps:

1. Shader Code (shaders/pixelate.frag)

   #include <flutter/runtime_effect.glsl>
   
   uniform vec2 uSize;
   uniform float uPixels;
   uniform sampler2D uTexture;
   
   out vec4 fragColor;
   
   void main() {
       vec2 uv = FlutterFragCoord().xy / uSize;
       vec2 pixelatedUV = floor(uv * uPixels) / uPixels;
       fragColor = texture(uTexture, pixelatedUV);
   }
   

2. Load & Apply

   // Load asset
   final program = await FragmentProgram.fromAsset('shaders/pixelate.frag');
   
   // CustomPainter
   void paint(Canvas canvas, Size size) {
     final shader = program.fragmentShader();
     shader.setFloat(0, size.width); // uSize.x
     shader.setFloat(1, size.height); // uSize.y
     shader.setFloat(2, 50.0); // uPixels (50x50 grid)
     
     final paint = Paint()..shader = shader;
     canvas.drawRect(Offset.zero & size, paint);
   }
   

4. Patterns & Templates

Pattern 1: Clean Architecture (Layers)

Use case: Scalable enterprise apps.

lib/
  domain/       # Entities, Repository Interfaces (Pure Dart)
    entities/
    repositories/
  data/         # Implementations (API, DB)
    datasources/
    repositories/
    models/     # DTOs
  presentation/ # UI, Controllers (Flutter)
    pages/
    widgets/
    controllers/

Pattern 2: Repository Pattern (Riverpod)

Use case: Decoupling API from UI.

@riverpod
AuthRepository authRepository(AuthRepositoryRef ref) {
  return FirebaseAuthImpl(FirebaseAuth.instance);
}

@riverpod
Future<User> currentUser(CurrentUserRef ref) {
  return ref.watch(authRepositoryProvider).getCurrentUser();
}

Pattern 3: Responsive Layout (Adaptive)

Use case: Supporting Phone, Tablet, and Desktop.

class AdaptiveScaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    
    if (width > 900) {
      return Row(children: [NavRail(), Expanded(child: Body())]);
    } else {
      return Scaffold(
        drawer: Drawer(),
        body: Body(),
        bottomNavigationBar: BottomNavBar(),
      );
    }
  }
}

6. Integration Patterns

backend-developer:

• Handoff: Backend provides Swagger/OpenAPI → Flutter Expert uses openapi_generator to build Dart clients.
• Collaboration: Handling JWT refresh tokens (interceptors).
• Tools: Dio Interceptors.

mobile-developer:

• Handoff: Native dev writes Swift/Kotlin plugin → Flutter Expert wraps it in Method Channel.
• Collaboration: Debugging platform-specific crashes (Xcode/Android Studio).
• Tools: Pigeon (Type-safe interop).

ui-designer:

• Handoff: Designer provides Rive animation (.riv) → Flutter Expert integrates via rive package.
• Collaboration: Implementing custom Painter for non-standard shapes.
• Tools: Rive, Flutter Shape Maker.