vuralserhat86

mobile_flutter

27
10
# Install this skill:
npx skills add vuralserhat86/antigravity-agentic-skills --skill "mobile_flutter"

Install specific skill from multi-skill repository

# Description

Flutter/Dart best practices, Riverpod state management ve performance optimization.

# SKILL.md


name: mobile_flutter
router_kit: FullStackKit
description: Flutter/Dart best practices, Riverpod state management ve performance optimization.
metadata:
skillport:
category: development
tags: [architecture, automation, best practices, clean code, coding, collaboration, compliance, debugging, design patterns, development, documentation, efficiency, git, mobile flutter, optimization, productivity, programming, project management, quality assurance, refactoring, software engineering, standards, testing, utilities, version control, workflow] - mobile-react-native


🐦 Mobile Flutter

Flutter/Dart best practices ve performance optimization.


📁 1. Proje Yapısı (Feature-First)

lib/
├── core/
│   ├── theme/
│   └── widgets/
├── features/
│   ├── auth/
│   │   ├── data/
│   │   ├── domain/
│   │   └── presentation/
│   └── home/
├── services/
└── main.dart

🧩 2. Widget Best Practices

// ✅ const constructor kullan
class MyButton extends StatelessWidget {
  const MyButton({super.key, required this.onPressed});
  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(onPressed: onPressed, child: Text('Click'));
  }
}

// ✅ const widget'ları işaretle
const SizedBox(height: 16),

📦 3. State (Riverpod)

final authProvider = StateNotifierProvider<AuthNotifier, AuthState>((ref) {
  return AuthNotifier(ref.watch(authRepositoryProvider));
});

class AuthNotifier extends StateNotifier<AuthState> {
  AuthNotifier(this._repo) : super(const AuthState());

  Future<void> login(String email, String password) async {
    state = state.copyWith(isLoading: true);
    final user = await _repo.login(email, password);
    state = state.copyWith(user: user, isLoading: false);
  }
}

⚡ 4. Performance

// ✅ ListView.builder (lazy loading)
ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) => ItemCard(item: items[index]),
)

// ✅ RepaintBoundary
RepaintBoundary(child: ExpensiveWidget())

// ✅ Isolate for CPU-heavy
final result = await compute(parseUsers, jsonString);

🔐 5. Secure Storage

import 'package:flutter_secure_storage/flutter_secure_storage.dart';

final storage = FlutterSecureStorage();
await storage.write(key: 'token', value: token);
final token = await storage.read(key: 'token');

📱 6. Responsive

// MediaQuery
final isTablet = MediaQuery.of(context).size.width > 600;

// LayoutBuilder
LayoutBuilder(
  builder: (context, constraints) {
    return constraints.maxWidth > 600 ? WideLayout() : NarrowLayout();
  },
)

Mobile Flutter v1.1 - Enhanced

🔄 Workflow

Kaynak: Flutter Engineering Best Practices & Riverpod Architecture

Aşama 1: Architecture Setup

  • [ ] Layering: Feature-First yapısını kur (Presentation, Domain, Data).
  • [ ] State Management: Riverpod NotifierProvider ve Code Generation (@riverpod) kullan.
  • [ ] Routing: GoRouter ile type-safe navigasyon ve deep linking yapılandır.

Aşama 2: Implementation

  • [ ] UI: const constructorları kullanarak rebuild'leri minimize et.
  • [ ] Network: Dio ve Retrofit ile API katmanını (Interceptor, Error Handling) yaz.
  • [ ] Storage: Hassas veriler için flutter_secure_storage, cache için Isar veya Hive kullan.

Aşama 3: Release & Quality

  • [ ] Testing: Unit, Widget ve Integration testlerini (Golden Tests dahir) yaz.
  • [ ] Performance: DevTools ile "Jank" (kare atlama) analizi yap (Shader compilation warm-up).
  • [ ] CI/CD: Fastlane ile otomatik build ve store upload süreçlerini kur.

Kontrol Noktaları

Aşama Doğrulama
1 Business logic UI'dan (Widget'lardan) tamamen ayrılmış mı?
2 App cold start süresi <2 saniye mi?
3 Farklı ekran boyutlarında (Tablet/Foldable) responsive davranıyor mu?

# Supported AI Coding Agents

This skill is compatible with the SKILL.md standard and works with all major AI coding agents:

Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.