flutter-hooks

Why Flutter Hooks

This project includes flutter_hooks: ^0.21.2. Benefits:

• Less boilerplate - No State classes
• Auto cleanup - Controllers disposed automatically
• More composable - Share logic easily
• Cleaner code - No setState(), lifecycle methods

Basic Pattern

Traditional vs Hooks

Traditional (Verbose):

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  late TextEditingController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return TextField(controller: _controller);
  }
}

Hooks (Clean):

class MyWidget extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final controller = useTextEditingController(); // Auto-disposed!
    return TextField(controller: controller);
  }
}

Common Hooks

useState - Simple State

final count = useState(0);
// Access: count.value
// Update: count.value++

useTextEditingController - Text Fields

final controller = useTextEditingController();
// Auto-disposed when widget removed

useEffect - Side Effects

useEffect(() {
  // Setup
  controller.addListener(listener);

  // Cleanup (returned function)
  return () => controller.removeListener(listener);
}, [controller]); // Dependencies

useMemoized - Cache Expensive Operations

final filtered = useMemoized(
  () => items.where((item) => item.isActive).toList(),
  [items], // Only recomputes when items change
);

useAnimationController - Animations

final animController = useAnimationController(
  duration: Duration(milliseconds: 300),
);
// No vsync needed, auto-disposed!

Real-World Examples

Form with Validation

class ProfileForm extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final theme = IosTheme.of(context);
    final nameController = useTextEditingController();
    final emailController = useTextEditingController();
    final isValid = useState(false);
    final isLoading = useState(false);

    // Auto-validation
    useEffect(() {
      void validate() {
        isValid.value = nameController.text.isNotEmpty &&
                       emailController.text.contains('@');
      }

      nameController.addListener(validate);
      emailController.addListener(validate);

      return () {
        nameController.removeListener(validate);
        emailController.removeListener(validate);
      };
    }, [nameController, emailController]);

    return Column(
      children: [
        GroupedTableWidget(
          rows: [
            CupertinoTextFieldWidget(
              placeholder: 'Name',
              controller: nameController,
            ),
            CupertinoTextFieldWidget(
              placeholder: 'Email',
              controller: emailController,
            ),
          ],
        ),
        ButtonWidget.label(
          size: const LargeButtonSize(),
          color: const BlueButtonColor(),
          label: 'Save',
          displayCupertinoActivityIndicator: isLoading.value,
          onPressed: !isValid.value || isLoading.value
              ? null
              : () async {
                  isLoading.value = true;
                  await Future.delayed(Duration(seconds: 2));
                  isLoading.value = false;
                },
        ),
      ],
    );
  }
}