flutter-dev
크로스 플랫폼 Flutter 애플리케이션 개발
고품질 크로스 플랫폼 앱 개발에는 많은 Flutter 패턴과 상태 관리 접근법을 마스터해야 합니다. 이 스킬은 위젯 패턴, Riverpod와 Bloc 상태 관리, GoRouter 네비게이션, 성능 최적화, 플랫폼별 구현에 대한 구조화된 가이드를 제공합니다.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"flutter-dev" 사용 중입니다. GoRouter와 인증 가드를 설정하는 방법을 보여주세요
예상 결과:
- 인증 상태를 확인하는 redirect 함수와 함께 GoRouter 구성
- 로그인, 홈, 보호된 화면에 대한 라우트 경로 정의
- 인증되지 않은 사용자를 로그인 페이지로 보내는 redirect 구현
- 인증 리다이렉트 중 네비게이션 상태 보존
"flutter-dev" 사용 중입니다. Bloc 기반 Flutter 위젯을 테스트하려면 어떻게 해야 하나요?
예상 결과:
- ProviderScope 래퍼와 함께 pumpWidget을 사용하여 위젯 테스트 작성
- Mocktail을 사용하여 리포지토리 의존성 모킹
- find와 tap 메서드로 사용자 상호작용 트리거
- expect 어설션을 사용하여 예상되는 UI 상태 변경 확인
보안 감사
안전This skill consists entirely of markdown documentation files (SKILL.md and 12 reference files) containing Dart/Flutter code examples and development best practices. The static analyzer flagged 583 patterns, but all are false positives caused by misinterpreting markdown code fence backticks as shell commands and treating documentation content as executable code. No actual scripts, network calls, filesystem operations, or external commands are present. The skill is safe to publish.
품질 점수
만들 수 있는 것
모바일 앱 스타트업 아키텍처
시작부터 피처 기반 구조, GoRouter 네비게이션, Riverpod 상태 관리와 함께 새로운 Flutter 프로젝트를 설정합니다.
상태 관리 마이그레이션
더 나은 상태 구성과 테스트를 위해 기존 Flutter 애플리케이션을 setState에서 Riverpod 또는 Bloc으로 마이그레이션합니다.
성능 최적화 감사
DevTools 프로파일링, const 최적화, RepaintBoundary 패턴을 사용하여 성능 병목 현상을 파악하고 수정합니다.
모바일 앱 스타트업 아키텍처
피처 기반 구조, GoRouter 네비게이션, Riverpod 상태 관리와 함께 새로운 Flutter 프로젝트를 설정합니다.
상태 관리 마이그레이션
더 나은 상태 구성과 테스트를 위해 기존 Flutter 애플리케이션을 setState에서 Riverpod 또는 Bloc으로 마이그레이션합니다.
성능 최적화 감사
DevTools 프로파일링, const 최적화, RepaintBoundary 패턴을 사용하여 성능 병목 현상을 파악하고 수정합니다.
이 프롬프트를 사용해 보세요
피처 기반 폴더 구조로 새로운 Flutter 프로젝트를 설정하는 것을 도와주세요. 네비게이션을 위해 GoRouter를, 상태 관리를 위해 Riverpod를 포함하세요. 메인 진입점과 기본 피처 폴더를 보여주세요.
Riverpod을 사용한 사용자 인증 흐름을 구현하는 방법을 보여주세요. auth 상태를 위한 StateNotifierProvider, 검증이 포함된 로그인 폼, 성공 시 홈 화면으로의 네비게이션을 포함하세요.
이 Flutter 위젯 트리를 검토하고 성능 문제를 파악하세요. const 생성자, RepaintBoundary, ListView.builder를 사용할 곳을 제안하세요. 각 최적화의 영향을 설명하세요.
인증 인터셉터, 에러 처리, 리트라이 로직이 포함된 Dio HTTP 클라이언트 설정을 만드세요. API 호출을 위한 리포지토리 패턴과 Riverpod provider와의 통합 방법을 포함하세요.
모범 사례
- 불필요한 리빌드와 메모리 사용을 줄이기 위해 모든 정적 위젯에 const 생성자를 사용하세요
- 단순한 상태管理与 종속성 주입에는 Riverpod을, 복잡한 이벤트 기반 상태 흐름에는 Bloc을 선택하세요
- 최적화 전에 DevTools 프로파일 모드에서 Flutter DevTools로 프로파일링하여 실제 성능 병목 현상을 파악하세요
피하기
- 여러 위젯이 의존하는 공유 상태에 setState를 사용하지 마세요. 대신 상태 관리 솔루션을 사용하세요
- API 호출이나 복잡한 연산을 build 메서드 안에 배치하지 마세요. 비동기 작업에는 provider나 isolate를 사용하세요
- 정적 위젯에서 const 생성자를 건너뛰지 마세요. 누락된 const는 Flutter가 변경되지 않은 위젯 하위 트리를 건너뛰지 못하게 합니다