1# Widget Patterns
2 
3## Optimized Widget Pattern
4 
5```dart
6// Use const constructors
7class OptimizedCard extends StatelessWidget {
8  final String title;
9  final VoidCallback onTap;
10 
11  const OptimizedCard({
12    super.key,
13    required this.title,
14    required this.onTap,
15  });
16 
17  @override
18  Widget build(BuildContext context) {
19    return Card(
20      child: InkWell(
21        onTap: onTap,
22        child: Padding(
23          padding: const EdgeInsets.all(16),
24          child: Text(title, style: Theme.of(context).textTheme.titleMedium),
25        ),
26      ),
27    );
28  }
29}
30```
31 
32## Responsive Layout
33 
34```dart
35class ResponsiveLayout extends StatelessWidget {
36  final Widget mobile;
37  final Widget? tablet;
38  final Widget desktop;
39 
40  const ResponsiveLayout({
41    super.key,
42    required this.mobile,
43    this.tablet,
44    required this.desktop,
45  });
46 
47  @override
48  Widget build(BuildContext context) {
49    return LayoutBuilder(
50      builder: (context, constraints) {
51        if (constraints.maxWidth >= 1100) return desktop;
52        if (constraints.maxWidth >= 650) return tablet ?? mobile;
53        return mobile;
54      },
55    );
56  }
57}
58```
59 
60## Custom Hooks (flutter_hooks)
61 
62```dart
63import 'package:flutter_hooks/flutter_hooks.dart';
64 
65class CounterWidget extends HookWidget {
66  @override
67  Widget build(BuildContext context) {
68    final counter = useState(0);
69    final controller = useTextEditingController();
70 
71    useEffect(() {
72      // Setup
73      return () {
74        // Cleanup
75      };
76    }, []);
77 
78    return Column(
79      children: [
80        Text('Count: ${counter.value}'),
81        ElevatedButton(
82          onPressed: () => counter.value++,
83          child: const Text('Increment'),
84        ),
85      ],
86    );
87  }
88}
89```
90 
91## Sliver Patterns
92 
93```dart
94CustomScrollView(
95  slivers: [
96    SliverAppBar(
97      expandedHeight: 200,
98      pinned: true,
99      flexibleSpace: FlexibleSpaceBar(
100        title: const Text('Title'),
101        background: Image.network(imageUrl, fit: BoxFit.cover),
102      ),
103    ),
104    SliverList(
105      delegate: SliverChildBuilderDelegate(
106        (context, index) => ListTile(title: Text('Item $index')),
107        childCount: 100,
108      ),
109    ),
110  ],
111)
112```
113 
114## Key Optimization Patterns
115 
116| Pattern | Implementation |
117|---------|----------------|
118| **const widgets** | Add `const` to static widgets |
119| **keys** | Use `Key` for list items |
120| **select** | `ref.watch(provider.select(...))` |
121| **RepaintBoundary** | Isolate expensive repaints |
122| **ListView.builder** | Lazy loading for lists |
123| **const constructors** | Always use when possible |
124