Flutter State Management using Riverpod and build tools

🚀 Flutter State Management

From Local Props to Riverpod

Part 1: Local State Management

Local state is perfect for small widgets and forms.

Child Widget

class UserForm extends StatelessWidget {
  final String name;
  final String? email;
  final Function(String) onNameChanged;

  const UserForm({
    required this.name,
    this.email,
    required this.onNameChanged,
  });

  @override
  Widget build(BuildContext context) {
    return TextField(
      onChanged: onNameChanged,
      decoration: InputDecoration(hintText: name),
    );
  }
}

Parent Widget

class ProfilePage extends StatefulWidget {
  @override
  State createState() => _ProfilePageState();
}

class _ProfilePageState extends State {
  String name = "John";

  @override
  Widget build(BuildContext context) {
    return UserForm(
      name: name,
      onNameChanged: (v) {
        setState(() => name = v);
      },
    );
  }
}

💡 Use setState for simple, screen-local state.

Part 2: Riverpod Setup

dependencies:
  flutter_riverpod: ^2.5.1
  riverpod_annotation: ^2.3.5

⚠️ Run build_runner after changing providers.

Notifier vs AsyncNotifier

Notifier (Sync)

@riverpod
class ThemeSettings extends _$ThemeSettings {
  @override
  bool build() => false;

  void toggle() => state = !state;
}

AsyncNotifier (Async)

@riverpod
class Profile extends _$Profile {
  @override
  Future build() async {
    return fetchUser();
  }
}

✔ AsyncNotifier gives loading + error handling automatically.

📚 Flutter State Management Guide | Blogger Compatible