feat: add mutation and mutation builder with example

packages/fl_query/example/lib/main.dart

@@ -18,8 +18,12 @@ class MainApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MaterialApp.router(
+      theme: ThemeData(
+        colorSchemeSeed: Colors.red[100],
+        useMaterial3: true,
+      ),
       title: 'FL Query Example',
-      showPerformanceOverlay: true,
+      // showPerformanceOverlay: true,
       routerConfig: router,
     );
   }

packages/fl_query/example/lib/pages/home.dart

@@ -20,6 +20,10 @@ class HomePage extends StatelessWidget {
             title: const Text('Infinite Query'),
             onTap: () => GoRouter.of(context).push('/infinite-query'),
           ),
+          ListTile(
+            title: const Text('Mutation'),
+            onTap: () => GoRouter.of(context).push('/mutation'),
+          ),
         ],
       ),
     );

packages/fl_query/example/lib/pages/mutation/mutation.dart

@@ -0,0 +1,130 @@
+import 'package:fl_query/fl_query.dart';
+import 'package:flutter/material.dart';
+
+class MutationPage extends StatefulWidget {
+  const MutationPage({super.key});
+
+  @override
+  State<MutationPage> createState() => _MutationPageState();
+}
+
+class _MutationPageState extends State<MutationPage> {
+  late TextEditingController _nameController;
+  late TextEditingController _emailController;
+  late TextEditingController _passwordController;
+
+  @override
+  void initState() {
+    super.initState();
+    _nameController = TextEditingController();
+    _emailController = TextEditingController();
+    _passwordController = TextEditingController();
+  }
+
+  @override
+  void dispose() {
+    _nameController.dispose();
+    _emailController.dispose();
+    _passwordController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('Mutation'),
+      ),
+      body: MutationBuilder<Map<String, dynamic>, dynamic, String,
+          Map<String, dynamic>, dynamic>(
+        const ValueKey('sign-up'),
+        (variables) {
+          return Future.delayed(
+            const Duration(seconds: 1),
+            () => {
+              'name': variables['name'],
+              'email': variables['email'],
+              'password': variables['password'],
+            },
+          );
+        },
+        onMutate: (variables) {
+          print('onMutate: $variables');
+          return "Recover ME";
+        },
+        onData: (data, recoveryData) {
+          print('onData: $data');
+          print('recoveryData: $recoveryData');
+        },
+        refreshQueries: const [
+          ValueKey('hello'),
+        ],
+        builder: (context, mutation) {
+          if (mutation.hasData) {
+            return ListView(
+              padding: const EdgeInsets.all(16),
+              children: [
+                Center(
+                  child: Text('Welcome ${mutation.data!['name']}'),
+                ),
+                const SizedBox(height: 16),
+                Center(
+                  child: Text('Your email is ${mutation.data!['email']}'),
+                ),
+                const SizedBox(height: 16),
+                ElevatedButton(
+                  onPressed: () {
+                    mutation.reset();
+                  },
+                  child: const Text('Log out'),
+                ),
+              ],
+            );
+          }
+
+          return ListView(
+            padding: const EdgeInsets.all(16),
+            children: [
+              TextField(
+                controller: _nameController,
+                keyboardType: TextInputType.name,
+                decoration: const InputDecoration(
+                  labelText: 'Name',
+                ),
+              ),
+              const SizedBox(height: 16),
+              TextField(
+                controller: _emailController,
+                keyboardType: TextInputType.emailAddress,
+                decoration: const InputDecoration(
+                  labelText: 'Email',
+                ),
+              ),
+              const SizedBox(height: 16),
+              TextField(
+                controller: _passwordController,
+                obscureText: true,
+                decoration: const InputDecoration(
+                  labelText: 'Password',
+                ),
+              ),
+              const SizedBox(height: 20),
+              ElevatedButton(
+                onPressed: () async {
+                  await mutation.mutate({
+                    'name': _nameController.text,
+                    'email': _emailController.text,
+                    'password': _passwordController.text,
+                  });
+                },
+                child: mutation.isMutating
+                    ? const CircularProgressIndicator()
+                    : const Text('Sign Up'),
+              ),
+            ],
+          );
+        },
+      ),
+    );
+  }
+}

packages/fl_query/example/lib/router.dart

@@ -1,5 +1,6 @@
 import "package:example/pages/home.dart";
 import "package:example/pages/infinite_query.dart";
+import "package:example/pages/mutation/mutation.dart";
 import "package:example/pages/query.dart";
 import "package:go_router/go_router.dart";
 
@@ -18,5 +19,9 @@ final router = GoRouter(
       path: '/infinite-query',
       builder: (context, state) => const InfiniteQueryPageWidget(),
     ),
+    GoRoute(
+      path: '/mutation',
+      builder: (context, state) => const MutationPage(),
+    ),
   ],
 );