Flutter Development

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

Instructions

1. Project Structure & Navigation

dart
1// pubspec.yaml
2name: my_flutter_app
3version: 1.0.0
4
5dependencies:
6  flutter:
7    sdk: flutter
8  provider: ^6.0.0
9  http: ^1.1.0
10  go_router: ^12.0.0
11
12// main.dart with GoRouter navigation
13import 'package:flutter/material.dart';
14import 'package:go_router/go_router.dart';
15
16void main() {
17  runApp(const MyApp());
18}
19
20class MyApp extends StatelessWidget {
21  const MyApp({Key? key}) : super(key: key);
22
23  @override
24  Widget build(BuildContext context) {
25    return MaterialApp.router(
26      title: 'Flutter App',
27      theme: ThemeData(primarySwatch: Colors.blue, useMaterial3: true),
28      routerConfig: _router,
29    );
30  }
31}
32
33final GoRouter _router = GoRouter(
34  routes: <RouteBase>[
35    GoRoute(
36      path: '/',
37      builder: (context, state) => const HomeScreen(),
38      routes: [
39        GoRoute(
40          path: 'details/:id',
41          builder: (context, state) => DetailsScreen(
42            itemId: state.pathParameters['id']!
43          ),
44        ),
45      ],
46    ),
47    GoRoute(
48      path: '/profile',
49      builder: (context, state) => const ProfileScreen(),
50    ),
51  ],
52);

2. State Management with Provider

dart
1import 'package:flutter/material.dart';
2import 'package:http/http.dart' as http;
3import 'dart:convert';
4
5class User {
6  final String id;
7  final String name;
8  final String email;
9
10  User({required this.id, required this.name, required this.email});
11
12  factory User.fromJson(Map<String, dynamic> json) {
13    return User(
14      id: json['id'],
15      name: json['name'],
16      email: json['email'],
17    );
18  }
19}
20
21class UserProvider extends ChangeNotifier {
22  User? _user;
23  bool _isLoading = false;
24  String? _error;
25
26  User? get user => _user;
27  bool get isLoading => _isLoading;
28  String? get error => _error;
29
30  Future<void> fetchUser(String userId) async {
31    _isLoading = true;
32    _error = null;
33    notifyListeners();
34
35    try {
36      final response = await http.get(
37        Uri.parse('https://api.example.com/users/$userId'),
38        headers: {'Content-Type': 'application/json'},
39      );
40
41      if (response.statusCode == 200) {
42        _user = User.fromJson(jsonDecode(response.body));
43      } else {
44        _error = 'Failed to fetch user';
45      }
46    } catch (e) {
47      _error = 'Error: ${e.toString()}';
48    } finally {
49      _isLoading = false;
50      notifyListeners();
51    }
52  }
53
54  void logout() {
55    _user = null;
56    notifyListeners();
57  }
58}
59
60class ItemsProvider extends ChangeNotifier {
61  List<Map<String, dynamic>> _items = [];
62
63  List<Map<String, dynamic>> get items => _items;
64
65  Future<void> fetchItems() async {
66    try {
67      final response = await http.get(
68        Uri.parse('https://api.example.com/items'),
69      );
70
71      if (response.statusCode == 200) {
72        _items = List<Map<String, dynamic>>.from(
73          jsonDecode(response.body) as List
74        );
75        notifyListeners();
76      }
77    } catch (e) {
78      print('Error fetching items: $e');
79    }
80  }
81}

3. Screens with Provider Integration

dart
1class HomeScreen extends StatefulWidget {
2  const HomeScreen({Key? key}) : super(key: key);
3
4  @override
5  State<HomeScreen> createState() => _HomeScreenState();
6}
7
8class _HomeScreenState extends State<HomeScreen> {
9  @override
10  void initState() {
11    super.initState();
12    Future.microtask(() {
13      Provider.of<ItemsProvider>(context, listen: false).fetchItems();
14    });
15  }
16
17  @override
18  Widget build(BuildContext context) {
19    return Scaffold(
20      appBar: AppBar(title: const Text('Home Feed')),
21      body: Consumer<ItemsProvider>(
22        builder: (context, itemsProvider, child) {
23          if (itemsProvider.items.isEmpty) {
24            return const Center(child: Text('No items found'));
25          }
26          return ListView.builder(
27            itemCount: itemsProvider.items.length,
28            itemBuilder: (context, index) {
29              final item = itemsProvider.items[index];
30              return ItemCard(item: item);
31            },
32          );
33        },
34      ),
35    );
36  }
37}
38
39class ItemCard extends StatelessWidget {
40  final Map<String, dynamic> item;
41
42  const ItemCard({required this.item, Key? key}) : super(key: key);
43
44  @override
45  Widget build(BuildContext context) {
46    return Card(
47      margin: const EdgeInsets.all(8),
48      child: ListTile(
49        title: Text(item['title'] ?? 'Untitled'),
50        subtitle: Text(item['description'] ?? ''),
51        trailing: const Icon(Icons.arrow_forward),
52        onTap: () => context.go('/details/${item['id']}'),
53      ),
54    );
55  }
56}
57
58class DetailsScreen extends StatelessWidget {
59  final String itemId;
60
61  const DetailsScreen({required this.itemId, Key? key}) : super(key: key);
62
63  @override
64  Widget build(BuildContext context) {
65    return Scaffold(
66      appBar: AppBar(title: const Text('Details')),
67      body: Center(
68        child: Column(
69          mainAxisAlignment: MainAxisAlignment.center,
70          children: [
71            Text('Item ID: $itemId', style: const TextStyle(fontSize: 18)),
72            const SizedBox(height: 16),
73            ElevatedButton(
74              onPressed: () => context.pop(),
75              child: const Text('Go Back'),
76            ),
77          ],
78        ),
79      ),
80    );
81  }
82}
83
84class ProfileScreen extends StatelessWidget {
85  const ProfileScreen({Key? key}) : super(key: key);
86
87  @override
88  Widget build(BuildContext context) {
89    return Scaffold(
90      appBar: AppBar(title: const Text('Profile')),
91      body: Consumer<UserProvider>(
92        builder: (context, userProvider, child) {
93          if (userProvider.isLoading) {
94            return const Center(child: CircularProgressIndicator());
95          }
96          if (userProvider.error != null) {
97            return Center(child: Text('Error: ${userProvider.error}'));
98          }
99          final user = userProvider.user;
100          if (user == null) {
101            return const Center(child: Text('No user data'));
102          }
103          return Padding(
104            padding: const EdgeInsets.all(16),
105            child: Column(
106              crossAxisAlignment: CrossAxisAlignment.start,
107              children: [
108                Text('Name: ${user.name}', style: const TextStyle(fontSize: 18)),
109                Text('Email: ${user.email}', style: const TextStyle(fontSize: 16)),
110                const SizedBox(height: 16),
111                ElevatedButton(
112                  onPressed: () => userProvider.logout(),
113                  child: const Text('Logout'),
114                ),
115              ],
116            ),
117          );
118        },
119      ),
120    );
121  }
122}

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