From 72fb5623766c96273c5df0fe0441f080f11b7fbe Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com>
Date: Mon, 15 Dec 2025 22:27:51 -0300
Subject: [PATCH] Add custom context variant example for shift key

Introduces an example demonstrating how to create and use a custom context variant in Flutter using an InheritedWidget to detect if the shift key is pressed. The example includes a badge widget that changes style based on the shift key state.
---
 .../custom_context_variant.dart               | 117 ++++++++++++++++++
 1 file changed, 117 insertions(+)
 create mode 100644 examples/lib/api/context_variants/custom_context_variant.dart

diff --git a/examples/lib/api/context_variants/custom_context_variant.dart b/examples/lib/api/context_variants/custom_context_variant.dart
new file mode 100644
index 0000000000..c9cf154ec2
--- /dev/null
+++ b/examples/lib/api/context_variants/custom_context_variant.dart
@@ -0,0 +1,117 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:mix/mix.dart';
+
+import '../../helpers.dart';
+
+void main() {
+  runMixApp(Example());
+}
+
+class Example extends StatefulWidget {
+  const Example({super.key});
+
+  @override
+  State<Example> createState() => _ExampleState();
+}
+
+class ShiftPressedInheritedWidget extends InheritedWidget {
+  const ShiftPressedInheritedWidget({
+    super.key,
+    required this.isShiftPressed,
+    required super.child,
+  });
+
+  static ShiftPressedInheritedWidget? of(BuildContext context) {
+    return context.dependOnInheritedWidgetOfExactType();
+  }
+
+  final bool isShiftPressed;
+
+  @override
+  bool updateShouldNotify(ShiftPressedInheritedWidget oldWidget) {
+    return isShiftPressed != oldWidget.isShiftPressed;
+  }
+}
+
+class PressedShiftContextVariant extends ContextVariant {
+  PressedShiftContextVariant()
+    : super('pressed_shift', (context) {
+        return ShiftPressedInheritedWidget.of(context)?.isShiftPressed ?? false;
+      });
+}
+
+class _ExampleState extends State<Example> {
+  bool isShiftPressed = false;
+  final focusNode = FocusNode();
+
+  @override
+  void initState() {
+    super.initState();
+    HardwareKeyboard.instance.addHandler(_onKey);
+  }
+
+  bool _onKey(KeyEvent event) {
+    if (event.logicalKey == LogicalKeyboardKey.shift) return false;
+
+    setState(() {
+      isShiftPressed = HardwareKeyboard.instance.isShiftPressed;
+    });
+
+    return true;
+  }
+
+  @override
+  void dispose() {
+    focusNode.dispose();
+    HardwareKeyboard.instance.removeHandler(_onKey);
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: ShiftPressedInheritedWidget(
+        isShiftPressed: isShiftPressed,
+        child: Badge(),
+      ),
+    );
+  }
+}
+
+class Badge extends StatelessWidget {
+  const Badge({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final style = BoxStyler()
+        .shapeStadium(side: .new().color(Colors.blueGrey.shade200))
+        .color(Colors.blueGrey.shade50)
+        .padding(.horizontal(8).vertical(4))
+        .wrap(
+          .new()
+              .defaultText(
+                .new() //
+                    .fontSize(14)
+                    .color(Colors.blueGrey.shade600),
+              )
+              .scale(1, 1),
+        )
+        .variant(
+          PressedShiftContextVariant(),
+          BoxStyler()
+              .color(Colors.deepPurpleAccent.shade100)
+              .shapeStadium(
+                side: .new().color(Colors.deepPurpleAccent.shade700),
+              )
+              .wrap(
+                .new()
+                    .defaultText(.new().color(Colors.deepPurpleAccent.shade700))
+                    .scale(0.8, 0.8),
+              ),
+        )
+        .animate(.ease(300.ms));
+
+    return Box(style: style, child: StyledText('Press shift'));
+  }
+}