flutter-development
Builds beautiful cross-platform mobile applications using the Flutter framework, achieving efficient development and a consistent experience.
npx skills add aj-geddes/useful-ai-prompts --skill flutter-developmentBefore / After Comparison
1 组Traditional native app development is costly, difficult to adapt to multiple platforms, and has long development cycles. UI interfaces are hard to unify, user experience is fragmented, and maintenance costs are high.
With Flutter and Dart, build multi-platform applications with a single codebase, achieving beautiful and consistent UI. Development efficiency is significantly improved, costs are reduced, and an excellent user experience is provided.
description SKILL.md
name: flutter-development description: > Build beautiful cross-platform mobile apps with Flutter and Dart. Covers widgets, state management with Provider/BLoC, navigation, API integration, and material design.
Flutter Development
Table of Contents
Overview
Create high-performance, visually stunning mobile applications using Flutter with Dart language. Master widget composition, state management patterns, navigation, and API integration.
When to Use
- Building iOS and Android apps with native performance
- Designing custom UIs with Flutter's widget system
- Implementing complex animations and visual effects
- Rapid app development with hot reload
- Creating consistent UX across platforms
Quick Start
Minimal working example:
// pubspec.yaml
name: my_flutter_app
version: 1.0.0
dependencies:
flutter:
sdk: flutter
provider: ^6.0.0
http: ^1.1.0
go_router: ^12.0.0
// main.dart with GoRouter navigation
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp.router(
// ... (see reference guides for full implementation)
Reference Guides
Detailed implementations in the references/ directory:
| Guide | Contents |
|---|---|
| Project Structure & Navigation | Project Structure & Navigation |
| State Management with Provider | State Management with Provider |
| Screens with Provider Integration | Screens with Provider Integration |
Best Practices
✅ DO
- Use widgets for every UI element
- Implement proper state management
- Use const constructors where possible
- Dispose resources in state lifecycle
- Test on multiple device sizes
- Use meaningful widget names
- Implement error handling
- Use responsive design patterns
- Test on both iOS and Android
- Document custom widgets
❌ DON'T
- Build entire screens in build() method
- Use setState for complex state logic
- Make network calls in build()
- Ignore platform differences
- Create overly nested widget trees
- Hardcode strings
- Ignore performance warnings
- Skip testing
- Forget to handle edge cases
- Deploy without thorough testing
forumUser Reviews (0)
Write a Review
No reviews yet
Statistics
User Rating
Rate this Skill