์Šคํ‚ฌ flutter-expert
๐Ÿ“ฆ

flutter-expert

์•ˆ์ „

Build cross-platform Flutter apps

Building mobile applications across iOS, Android, and web requires deep expertise in Flutter, state management, and platform-specific implementations. This skill provides comprehensive guidance for Flutter 3+ development with Riverpod, Bloc, and GoRouter patterns.

์ง€์›: Claude Codex Code(CC)
๐Ÿฅ‰ 76 ๋ธŒ๋ก ์ฆˆ
1

์Šคํ‚ฌ ZIP ๋‹ค์šด๋กœ๋“œ

2

Claude์—์„œ ์—…๋กœ๋“œ

์„ค์ • โ†’ ๊ธฐ๋Šฅ โ†’ ์Šคํ‚ฌ โ†’ ์Šคํ‚ฌ ์—…๋กœ๋“œ๋กœ ์ด๋™

3

ํ† ๊ธ€์„ ์ผœ๊ณ  ์‚ฌ์šฉ ์‹œ์ž‘

ํ…Œ์ŠคํŠธํ•ด ๋ณด๊ธฐ

"flutter-expert" ์‚ฌ์šฉ ์ค‘์ž…๋‹ˆ๋‹ค. Create a Riverpod Notifier for a todo list with add, toggle, and remove functionality

์˜ˆ์ƒ ๊ฒฐ๊ณผ:

  • A complete Dart file with @riverpod TodoList class extending StateNotifier<List<Todo>>
  • Methods for add, toggle, and remove with proper state updates
  • Example usage in a ConsumerWidget with ref.watch and ref.read
  • Type-safe state management following Riverpod 2.0 patterns

"flutter-expert" ์‚ฌ์šฉ ์ค‘์ž…๋‹ˆ๋‹ค. Set up GoRouter with auth guard and deep linking

์˜ˆ์ƒ ๊ฒฐ๊ณผ:

  • GoRouter configuration with initialLocation and redirect handler
  • AuthBloc integration in redirect to check authentication state
  • Route parameters for deep linking (e.g., /details/:id)
  • ShellRoute for persistent bottom navigation

๋ณด์•ˆ ๊ฐ์‚ฌ

์•ˆ์ „
v1 โ€ข 2/7/2026

This skill is a documentation/reference skill for Flutter development. Static scanner flagged 88 external_command patterns and 1 network pattern, but all findings are FALSE POSITIVES. The scanner misidentified Dart code blocks and CLI command documentation examples as shell execution. No actual security risks exist. All content is legitimate Flutter/Dart documentation with no prompt injection attempts.

7
์Šค์บ”๋œ ํŒŒ์ผ
937
๋ถ„์„๋œ ์ค„ ์ˆ˜
0
๋ฐœ๊ฒฌ ์‚ฌํ•ญ
1
์ด ๊ฐ์‚ฌ ์ˆ˜
๋ณด์•ˆ ๋ฌธ์ œ๋ฅผ ์ฐพ์ง€ ๋ชปํ–ˆ์Šต๋‹ˆ๋‹ค
๊ฐ์‚ฌ์ž: claude

ํ’ˆ์งˆ ์ ์ˆ˜

45
์•„ํ‚คํ…์ฒ˜
100
์œ ์ง€๋ณด์ˆ˜์„ฑ
87
์ฝ˜ํ…์ธ 
50
์ปค๋ฎค๋‹ˆํ‹ฐ
100
๋ณด์•ˆ
91
์‚ฌ์–‘ ์ค€์ˆ˜

๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š” ๊ฒƒ

Mobile developer building new Flutter app

Get guidance on setting up project structure, choosing state management approach, and implementing core widgets following Flutter best practices.

Experienced Flutter engineer optimizing performance

Learn performance optimization techniques including const widgets, selective rebuilding, RepaintBoundary usage, and DevTools profiling.

Full-stack developer adding Flutter to stack

Understand Flutter patterns and architecture to integrate with existing backend services and implement cross-platform features.

์ด ํ”„๋กฌํ”„ํŠธ๋ฅผ ์‚ฌ์šฉํ•ด ๋ณด์„ธ์š”

Create a new Flutter screen 
Create a Flutter screen with Riverpod state management that displays a list of items from an API. Include error handling, loading states, and pull-to-refresh functionality.
Implement authentication flow 
Design a Bloc-based authentication flow with login, logout, and protected routes using GoRouter with auth redirect. Include session management and error states.
Optimize widget rebuilds 
Review this Flutter widget and optimize unnecessary rebuilds. Show how to use const constructors, RepaintBoundary, and selective provider watching with select().
Set up project structure 
Create a clean Flutter project structure for a medium-sized app. Include feature-based directory organization, dependency injection setup, and routing configuration.

๋ชจ๋ฒ” ์‚ฌ๋ก€

  • Use const constructors on all static widgets to minimize rebuild overhead
  • Choose Riverpod for simple state and Bloc for complex event-driven workflows
  • Profile with DevTools before optimizing - measure, do not guess
  • Separate UI and business logic using proper state management patterns

ํ”ผํ•˜๊ธฐ

  • Building widgets inside build() methods - extract to const constructors
  • Using setState for app-wide state - use Riverpod providers instead
  • Skipping keys on list items - causes performance and animation issues
  • Blocking UI thread with heavy computation - use compute() and isolates

์ž์ฃผ ๋ฌป๋Š” ์งˆ๋ฌธ

When should I use Riverpod vs Bloc?
Use Riverpod for simple to moderate state management needs, particularly with reactive patterns. Use Bloc when you need explicit event-driven state transitions, complex business logic, or highly testable flows. Riverpod is generally simpler to set up.
How do I optimize Flutter app performance?
Use const constructors everywhere possible, implement keys on list items, use ref.watch with select() for selective rebuilding, wrap expensive widgets in RepaintBoundary, and use ListView.builder for long lists. Always profile with DevTools first.
What is the recommended project structure?
Use feature-based organization with folders for features, core services, shared widgets, and DI. Separate models, providers, and widgets within each feature. Avoid god files and keep widgets small and focused.
How do I implement deep linking in Flutter?
Use GoRouter with path parameters (e.g., /details/:id). Configure platform-specific intent filters in AndroidManifest.xml and Info.plist. Test with flutter run and use uni_links package for handling incoming links.
How do I test Flutter widgets and state?
Use flutter_test for widget tests with pumpWidget and find.byType. Test providers by reading values directly. Test Blocs using bloc_test package with expect() assertions on states.
What are const constructors and why use them?
Const constructors create compile-time constant widgets that Flutter can reuse across rebuilds. They prevent unnecessary widget recreation, reducing rebuild overhead and improving performance. Always use const on static widgets.

๊ฐœ๋ฐœ์ž ์„ธ๋ถ€ ์ •๋ณด

์ž‘์„ฑ์ž

Jeffallan

๋ผ์ด์„ ์Šค

MIT

๋ฆฌํฌ์ง€ํ† ๋ฆฌ

https://github.com/jeffallan/claude-skills/tree/main/skills/flutter-expert/

์ฐธ์กฐ

main

ํŒŒ์ผ ๊ตฌ์กฐ

๐Ÿ“ references/

๐Ÿ“„ bloc-state.md

๐Ÿ“„ gorouter-navigation.md

๐Ÿ“„ performance.md

๐Ÿ“„ project-structure.md

๐Ÿ“„ riverpod-state.md

๐Ÿ“„ widget-patterns.md

๐Ÿ“„ SKILL.md