1 files changed, 85 insertions, 0 deletions
diff --git a/lib/presentation/screens/dashboard/widgets/range.dart b/lib/presentation/screens/dashboard/widgets/range.dart
new file mode 100644
index 0000000..aea92af
--- /dev/null
+++ b/lib/presentation/screens/dashboard/widgets/range.dart
@@ -0,0 +1,85 @@
+import 'package:flutter_ics_homescreen/presentation/custom_icons/custom_icons.dart';
+
+import '../../../../export.dart';
+
+class RangeWidget extends ConsumerWidget {
+  const RangeWidget({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final range = ref.watch(vehicleProvider.select((vehicle) => vehicle.range));
+    final unit =
+        ref.watch(unitStateProvider.select((unit) => unit.distanceUnit));
+    return Container(
+      height:130,
+      width: 306,
+      // padding: const EdgeInsets.all(10),
+      decoration: const ShapeDecoration(
+        gradient: RadialGradient(
+          colors: [
+            Color.fromARGB(255, 19, 24, 75),
+            Color.fromARGB(127, 0, 0, 0)
+          ],
+          stops: [0, 0.7],
+          radius: 1,
+        ),
+        //color: Colors.grey,
+        shape: StadiumBorder(
+            side: BorderSide(
+          color: Color.fromARGB(156, 0, 0, 0),
+          width: 2,
+        )),
+      ),
+      alignment: Alignment.topLeft,
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          const Icon(
+            CustomIcons.range,
+            color: Color(0xFF2962FF),
+            size: 48,
+          ),
+          const SizedBox(width: 8),
+          Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              const Text(
+                'Range',
+                textAlign: TextAlign.start,
+                style: TextStyle(
+                  color: Color(0xFFC1D8FF),
+                  fontSize: 26,
+                ),
+              ),
+              RichText(
+                text: TextSpan(
+                  
+                    text: '$range',
+                    style: GoogleFonts.brunoAce(
+                      
+                      textStyle:
+                           const TextStyle(
+                        color: Colors.white,
+                        fontSize: 44,
+                      ),
+                    ),
+                    children: <TextSpan>[
+                      TextSpan(
+                        text:
+                            unit == DistanceUnit.kilometers ? ' Km' : ' Mi',
+                        style: GoogleFonts.brunoAce(
+                          textStyle: const TextStyle(
+                              color: Color(0xFFC1D8FF),
+                              fontSize: 38),
+                        ),
+                      ),
+                    ]),
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}