Upload Flutter-HVAC application for IVI

Flutter hvac app which sets value to KUKSA.VAL like
Fan speed,left and right zone climate temperature,
AC vent direction, Air circulation,Front and Rear Wind
shield defrost.
Update UI and removed Unused code.

Bug-AGL: SPEC-4546

Change-Id: I57f7a9a2954520f4bb781a5ec02be612d72cf404
Signed-off-by: Hritik Chouhan <hritikc3961@gmail.com>

6 files changed, 819 insertions, 0 deletions

diff --git a/lib/Buttons/AC.dart b/lib/Buttons/AC.dart
new file mode 100644
index 0000000..e0c610a
--- /dev/null
+++ b/lib/Buttons/AC.dart
@@ -0,0 +1,124 @@
+// SPDX-License-Identifier: Apache-2.0
+
+import 'dart:io';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_hvac/kuksa-server/vehicle-provider.dart';
+import 'package:flutter_hvac/kuksa-server/vehicle_methods.dart';
+
+import '../size.dart';
+
+class AC extends ConsumerStatefulWidget {
+  WebSocket socket;
+  String serverPath;
+  AC({
+    Key? key,
+    required this.serverPath,
+    required this.socket,
+  }) : super(key: key);
+
+  @override
+  _ACState createState() => _ACState();
+}
+
+class _ACState extends ConsumerState<AC> with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+  late bool isAcActive;
+  late Animation<Color?> _colorAnimation;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _controller = AnimationController(
+      duration: Duration(milliseconds: 500),
+      vsync: this,
+    );
+
+    _colorAnimation =
+        ColorTween(begin: Colors.lightBlueAccent, end: Colors.green)
+            .animate(_controller);
+
+    _controller.addListener(() {
+
+    });
+
+    _controller.addStatusListener((status) {
+      if (status == AnimationStatus.completed) {
+        VISS.set(widget.socket, ref,widget.serverPath, isAcActive.toString());
+      }
+      if (status == AnimationStatus.dismissed) {
+        VISS.set(widget.socket, ref,widget.serverPath, isAcActive.toString());
+      }
+    });
+  }
+
+  // dismiss the animation when widget exits screen
+  @override
+  void dispose() {
+    super.dispose();
+    _controller.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    isAcActive = ref.watch(vehicleProvider).isAcActive;
+    return AnimatedBuilder(
+        animation: _controller,
+        builder: (BuildContext context, _) {
+          return InkWell(
+            child: AnimatedContainer(
+              constraints: BoxConstraints(
+                maxHeight: SizeConfig.screenHeight*0.10,
+                maxWidth: SizeConfig.screenWidth*0.15,
+              ),
+
+
+              decoration: BoxDecoration(
+                gradient: isAcActive
+                    ? RadialGradient(
+                        colors: [Colors.black, Colors.lightBlue],
+                        radius: 2,
+                      )
+                    : null,
+
+
+                border: Border.all(
+                  color: Colors.white,
+                  width: 2,
+                ),
+                borderRadius: BorderRadius.circular(SizeConfig.blockSizeVertical*2),
+              ),
+              duration: Duration(seconds: 1),
+              child: AnimatedContainer(
+                duration: Duration(milliseconds: 100),
+                margin: EdgeInsets.all(SizeConfig.blockSizeVertical*2),
+                child: Container(
+                  width: SizeConfig.screenWidth*0.15,
+                  height: SizeConfig.screenHeight*0.10,
+                  child: FittedBox(
+                    fit: BoxFit.fill,
+                    child: Text(
+                      'A/C',
+                      style: TextStyle(
+                        color: _colorAnimation.value,
+                        fontWeight: FontWeight.w700,
+
+                      ),
+                    ),
+                  ),
+                ),
+              ),
+            ),
+            onTap: () {
+              isAcActive ? _controller.reverse() : _controller.forward();
+              ref
+                  .read(vehicleProvider.notifier)
+                  .update(isAcActive: !isAcActive);
+            },
+          );
+
+        });
+  }
+}
diff --git a/lib/Buttons/ac_on_face.dart b/lib/Buttons/ac_on_face.dart
new file mode 100644
index 0000000..f0c0f41
--- /dev/null
+++ b/lib/Buttons/ac_on_face.dart
@@ -0,0 +1,145 @@
+// SPDX-License-Identifier: Apache-2.0
+
+import 'dart:io';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_svg_provider/flutter_svg_provider.dart';
+import 'package:flutter_hvac/kuksa-server/vehicle-provider.dart';
+
+import '../kuksa-server/vehicle-class.dart';
+import '../kuksa-server/vehicle_methods.dart';
+import '../size.dart';
+
+class AcOnFace extends ConsumerStatefulWidget {
+  final String img;
+  WebSocket socket;
+  AcOnFace({
+    Key? key,
+    required this.img,
+    required this.socket,
+  }) : super(key: key);
+
+  @override
+  _AcOnFaceState createState() => _AcOnFaceState();
+}
+
+class _AcOnFaceState extends ConsumerState<AcOnFace>
+    with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+  late Animation<Color?> _colorAnimation;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _controller = AnimationController(
+      duration: Duration(milliseconds: 500),
+      vsync: this,
+    );
+
+    _colorAnimation =
+        ColorTween(begin: Colors.lightBlueAccent, end: Colors.green)
+            .animate(_controller);
+
+    _controller.addListener(() {});
+
+    _controller.addStatusListener((status) {
+      if (status == AnimationStatus.completed) {
+        VISS.set(widget.socket,ref,
+            "Vehicle.Cabin.HVAC.Station.Row1.Left.AirDistribution", 'up');
+        VISS.set(widget.socket,ref,
+            "Vehicle.Cabin.HVAC.Station.Row1.Right.AirDistribution", 'up');
+        VISS.set(widget.socket,ref,
+            "Vehicle.Cabin.HVAC.Station.Row2.Left.AirDistribution", 'up');
+        VISS.set(widget.socket,ref,
+            "Vehicle.Cabin.HVAC.Station.Row2.Right.AirDistribution", 'up');
+      }
+
+      if (status == AnimationStatus.dismissed) {
+        VISS.set(widget.socket,ref,
+            "Vehicle.Cabin.HVAC.Station.Row1.Left.AirDistribution", 'middle');
+        VISS.set(widget.socket,ref,
+            "Vehicle.Cabin.HVAC.Station.Row1.Right.AirDistribution", 'middle');
+        VISS.set(widget.socket,ref,
+            "Vehicle.Cabin.HVAC.Station.Row2.Left.AirDistribution", 'middle');
+        VISS.set(widget.socket,ref,
+            "Vehicle.Cabin.HVAC.Station.Row2.Right.AirDistribution", 'middle');
+      }
+    });
+  }
+
+  // dismiss the animation when widget exits screen
+  @override
+  void dispose() {
+    super.dispose();
+    _controller.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    vehicle vehicledata = ref.watch(vehicleProvider);
+    if (vehicledata.isAcDirectionUp == false) {
+      _controller.reverse();
+    }
+
+    return AnimatedBuilder(
+        animation: _controller,
+        builder: (BuildContext context, _) {
+          return InkWell(
+            child: AnimatedContainer(
+              constraints: BoxConstraints(
+                maxHeight: SizeConfig.screenHeight*0.10,
+                maxWidth: SizeConfig.screenWidth*0.15,
+              ),
+
+
+              decoration: BoxDecoration(
+                gradient: vehicledata.isAcDirectionUp
+                    ? RadialGradient(
+                        colors: [Colors.black, Colors.lightBlue],
+                        radius: 2,
+                      )
+                    : null,
+
+
+                border: Border.all(
+                  color: Colors.white,
+                  width: 2,
+                ),
+                borderRadius: BorderRadius.circular(SizeConfig.safeBlockVertical*2),
+              ),
+              duration: const Duration(milliseconds: 500),
+              child: AnimatedContainer(
+                duration: Duration(milliseconds: 100),
+                margin: const EdgeInsets.all(10),
+                child: Image(
+                  width: SizeConfig.screenWidth*0.15,
+                  height: SizeConfig.screenHeight*0.10,
+                  image: Svg(widget.img),
+                  color: _colorAnimation.value,
+                ),
+              ),
+            ),
+            onTap: () {
+              if (vehicledata.isAcDirectionDown) {
+                ref
+                    .watch(vehicleProvider.notifier)
+                    .update(isAcDirectionDown: !vehicledata.isAcDirectionDown);
+              }
+              Future.delayed(Duration(milliseconds: 500),(){
+                vehicledata.isAcDirectionUp
+                    ? _controller.reverse()
+                    : _controller.forward();
+
+                ref.watch(vehicleProvider.notifier).update(
+                  isAcDirectionUp: !vehicledata.isAcDirectionUp,
+                );
+              });
+
+            },
+          );
+
+        });
+  }
+}
diff --git a/lib/Buttons/ac_on_foot.dart b/lib/Buttons/ac_on_foot.dart
new file mode 100644
index 0000000..41e2569
--- /dev/null
+++ b/lib/Buttons/ac_on_foot.dart
@@ -0,0 +1,146 @@
+// SPDX-License-Identifier: Apache-2.0
+
+import 'dart:io';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_svg_provider/flutter_svg_provider.dart';
+import 'package:flutter_hvac/kuksa-server/vehicle-provider.dart';
+
+import '../kuksa-server/vehicle-class.dart';
+import '../kuksa-server/vehicle_methods.dart';
+import '../size.dart';
+
+class AcOnFoot extends ConsumerStatefulWidget {
+  final String img;
+  WebSocket socket;
+  AcOnFoot({
+    Key? key,
+    required this.img,
+    required this.socket,
+  }) : super(key: key);
+
+  @override
+  _AcOnFootState createState() => _AcOnFootState();
+}
+
+class _AcOnFootState extends ConsumerState<AcOnFoot>
+    with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+  late Animation<Color?> _colorAnimation;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _controller = AnimationController(
+      duration: Duration(milliseconds: 500),
+      vsync: this,
+    );
+
+    _colorAnimation =
+        ColorTween(begin: Colors.lightBlueAccent, end: Colors.green)
+            .animate(_controller);
+
+    _controller.addListener(() {});
+
+    _controller.addStatusListener((status) {
+      if (status == AnimationStatus.completed) {
+        VISS.set(widget.socket,ref,
+            "Vehicle.Cabin.HVAC.Station.Row1.Left.AirDistribution", 'down');
+        VISS.set(widget.socket,ref,
+            "Vehicle.Cabin.HVAC.Station.Row1.Right.AirDistribution", 'down');
+        VISS.set(widget.socket,ref,
+            "Vehicle.Cabin.HVAC.Station.Row2.Left.AirDistribution", 'down');
+        VISS.set(widget.socket,ref,
+            "Vehicle.Cabin.HVAC.Station.Row2.Right.AirDistribution", 'down');
+
+      }
+
+      if (status == AnimationStatus.dismissed) {
+        VISS.set(widget.socket,ref,
+            "Vehicle.Cabin.HVAC.Station.Row1.Left.AirDistribution", 'middle');
+        VISS.set(widget.socket,ref,
+            "Vehicle.Cabin.HVAC.Station.Row1.Right.AirDistribution", 'middle');
+        VISS.set(widget.socket,ref,
+            "Vehicle.Cabin.HVAC.Station.Row2.Left.AirDistribution", 'middle');
+        VISS.set(widget.socket,ref,
+            "Vehicle.Cabin.HVAC.Station.Row2.Right.AirDistribution", 'middle');
+      }
+    });
+  }
+
+  // dismiss the animation when widget exits screen
+  @override
+  void dispose() {
+    super.dispose();
+    _controller.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    vehicle vehicledata = ref.watch(vehicleProvider);
+    if (vehicledata.isAcDirectionDown == false) {
+      _controller.reverse();
+    }
+
+    return AnimatedBuilder(
+        animation: _controller,
+        builder: (BuildContext context, _) {
+          return InkWell(
+            child: AnimatedContainer(
+              constraints: BoxConstraints(
+                maxHeight: SizeConfig.screenHeight*0.10,
+                maxWidth: SizeConfig.screenWidth*0.15,
+              ),
+
+
+              decoration: BoxDecoration(
+                gradient: vehicledata.isAcDirectionDown
+                    ? RadialGradient(
+                        colors: [Colors.black, Colors.lightBlue],
+                        radius: 2,
+                      )
+                    : null,
+
+
+                border: Border.all(
+                  color: Colors.white,
+                  width: 2,
+                ),
+                borderRadius: BorderRadius.circular(SizeConfig.safeBlockVertical*2),
+              ),
+              duration: const Duration(milliseconds: 500),
+              child: AnimatedContainer(
+                duration: Duration(milliseconds: 100),
+                margin: const EdgeInsets.all(10),
+                child: Image(
+                  width: SizeConfig.screenWidth*0.15,
+                  height: SizeConfig.screenHeight*0.10,
+                  image: Svg(widget.img),
+                  color: _colorAnimation.value,
+                ),
+              ),
+            ),
+            onTap: () {
+              if (vehicledata.isAcDirectionUp == true) {
+                ref
+                    .watch(vehicleProvider.notifier)
+                    .update(isAcDirectionUp: !vehicledata.isAcDirectionUp);
+              }
+              Future.delayed(Duration(milliseconds: 500),(){
+                vehicledata.isAcDirectionDown
+                    ? _controller.reverse()
+                    : _controller.forward();
+
+                ref.watch(vehicleProvider.notifier).update(
+                  isAcDirectionDown: !vehicledata.isAcDirectionDown,
+                );
+              });
+
+            },
+          );
+
+        });
+  }
+}
diff --git a/lib/Buttons/auto.dart b/lib/Buttons/auto.dart
new file mode 100644
index 0000000..536a117
--- /dev/null
+++ b/lib/Buttons/auto.dart
@@ -0,0 +1,116 @@
+// SPDX-License-Identifier: Apache-2.0
+
+import 'dart:io';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_hvac/kuksa-server/vehicle-provider.dart';
+
+import '../size.dart';
+
+class Auto extends ConsumerStatefulWidget {
+  WebSocket socket;
+  String serverPath;
+  Auto({
+    Key? key,
+    required this.serverPath,
+    required this.socket,
+  }) : super(key: key);
+
+  @override
+  _AutoState createState() => _AutoState();
+}
+
+class _AutoState extends ConsumerState<Auto> with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+  late bool isAutoActive;
+  late Animation<Color?> _colorAnimation;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _controller = AnimationController(
+      duration: Duration(milliseconds: 500),
+      vsync: this,
+    );
+
+    _colorAnimation =
+        ColorTween(begin: Colors.lightBlueAccent, end: Colors.green)
+            .animate(_controller);
+
+    _controller.addListener(() {
+
+    });
+
+
+  }
+
+  // dismiss the animation when widget exits screen
+  @override
+  void dispose() {
+    super.dispose();
+    _controller.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    isAutoActive = ref.watch(vehicleProvider).isAutoActive;
+    return AnimatedBuilder(
+        animation: _controller,
+        builder: (BuildContext context, _) {
+          return InkWell(
+            child: AnimatedContainer(
+              constraints: BoxConstraints(
+                maxHeight: SizeConfig.screenHeight*0.10,
+                maxWidth: SizeConfig.screenWidth*0.15,
+              ),
+
+
+              decoration: BoxDecoration(
+                gradient: isAutoActive
+                    ? RadialGradient(
+                  colors: [Colors.black, Colors.lightBlue],
+                  radius: 2,
+                )
+                    : null,
+
+
+                border: Border.all(
+                  color: Colors.white,
+                  width: 2,
+                ),
+                borderRadius: BorderRadius.circular(SizeConfig.safeBlockVertical*2),
+              ),
+              duration: Duration(seconds: 1),
+              child: AnimatedContainer(
+                duration: Duration(milliseconds: 100),
+                margin: EdgeInsets.all(SizeConfig.blockSizeVertical*2),
+                child: Container(
+                  width: SizeConfig.screenWidth*0.15,
+                  height: SizeConfig.screenHeight*0.10,
+                  child: FittedBox(
+                    fit: BoxFit.fill,
+                    child: Text(
+                      'AUTO',
+                      style: TextStyle(
+                        color: _colorAnimation.value,
+                        fontWeight: FontWeight.w700,
+                        // fontSize: SizeConfig.fontsize*4,
+                      ),
+                    ),
+                  ),
+                ),
+              ),
+            ),
+            onTap: () {
+              isAutoActive ? _controller.reverse() : _controller.forward();
+              ref
+                  .read(vehicleProvider.notifier)
+                  .update(isAutoActive: !isAutoActive);
+            },
+          );
+
+        });
+  }
+}
diff --git a/lib/Buttons/defrost_recirculate.dart b/lib/Buttons/defrost_recirculate.dart
new file mode 100644
index 0000000..30ac40d
--- /dev/null
+++ b/lib/Buttons/defrost_recirculate.dart
@@ -0,0 +1,178 @@
+// SPDX-License-Identifier: Apache-2.0
+
+import 'dart:io';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_svg_provider/flutter_svg_provider.dart';
+import 'package:flutter_hvac/kuksa-server/vehicle-class.dart';
+import 'package:flutter_hvac/kuksa-server/vehicle-provider.dart';
+import 'package:flutter_hvac/kuksa-server/vehicle_methods.dart';
+import 'package:flutter_hvac/size.dart';
+
+class CaustomButton extends ConsumerStatefulWidget {
+  WebSocket socket;
+  String serverPath;
+  String img;
+  String type;
+  CaustomButton({
+    Key? key,
+    required this.serverPath,
+    required this.socket,
+    required this.img,
+    required this.type,
+  }) : super(key: key);
+
+  @override
+  _CaustomButtonState createState() => _CaustomButtonState();
+}
+
+class _CaustomButtonState extends ConsumerState<CaustomButton>
+    with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+  late vehicle vehicledata;
+  late Animation<Color?> _colorAnimation;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _controller = AnimationController(
+      duration: Duration(milliseconds: 500),
+      vsync: this,
+    );
+
+    _colorAnimation =
+        ColorTween(begin: Colors.blue, end: Colors.green)
+            .animate(_controller);
+
+    _controller.addListener(() {
+
+    });
+
+    _controller.addStatusListener((status) {
+      if (status == AnimationStatus.completed) {
+        if (widget.type == 'Front_defrost') {
+          VISS.set(widget.socket,ref, widget.serverPath,
+              vehicledata.isFrontDefrosterActive.toString());
+        }
+        if (widget.type == "Rear_defrost") {
+          VISS.set(widget.socket,ref, widget.serverPath,
+              vehicledata.isRearDefrosterActive.toString());
+        }
+        if (widget.type == "Recirculation") {
+          VISS.set(widget.socket,ref, widget.serverPath,
+              vehicledata.isRecirculationActive.toString());
+        }
+
+
+
+      }
+      if (status == AnimationStatus.dismissed) {
+        if (widget.type == 'Front_defrost') {
+          VISS.set(widget.socket, ref,widget.serverPath,
+              vehicledata.isFrontDefrosterActive.toString());
+        }
+        if (widget.type == "Rear_defrost") {
+          VISS.set(widget.socket, ref,widget.serverPath,
+              vehicledata.isRearDefrosterActive.toString());
+        }
+        if (widget.type == "Recirculation") {
+          VISS.set(widget.socket, ref,widget.serverPath,
+              vehicledata.isRecirculationActive.toString());
+        }
+      }
+    });
+  }
+
+  // dismiss the animation when widget exits screen
+  @override
+  void dispose() {
+    super.dispose();
+    _controller.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    vehicledata = ref.watch(vehicleProvider);
+    return AnimatedBuilder(
+        animation: _controller,
+        builder: (BuildContext context, _) {
+          return InkWell(
+            child: AnimatedContainer(
+              constraints: BoxConstraints(
+                maxHeight: SizeConfig.screenHeight*0.10,
+                maxWidth: SizeConfig.screenWidth*0.15,
+              ),
+
+
+              decoration: BoxDecoration(
+                gradient: widget.type == "Front_defrost"
+                    ? vehicledata.isFrontDefrosterActive
+                        ? RadialGradient(
+                            colors: [Colors.black, Colors.lightBlue],
+                            radius: 2,
+                          )
+                        : null
+                    : widget.type == "Rear_defrost"
+                        ? vehicledata.isRearDefrosterActive
+                            ? RadialGradient(
+                                colors: [Colors.black, Colors.lightBlue],
+                                radius: 2,
+                              )
+                            : null
+                        : vehicledata.isRecirculationActive
+                            ? RadialGradient(
+                                colors: [Colors.black, Colors.lightBlue],
+                                radius: 2,
+                              )
+                            : null,
+
+
+                border: Border.all(
+                  color: Colors.white,
+                  width: 2,
+                ),
+                borderRadius: BorderRadius.circular(SizeConfig.safeBlockVertical*2),
+              ),
+              duration: Duration(milliseconds: 100),
+              child: AnimatedContainer(
+                duration: Duration(milliseconds: 100),
+                margin: EdgeInsets.all(SizeConfig.blockSizeVertical),
+                child: Image(
+                  width: SizeConfig.screenWidth*0.15,
+                  height: SizeConfig.screenHeight*0.10,
+                  image: Svg(widget.img),
+                  color: _colorAnimation.value,
+                ),
+              ),
+            ),
+            onTap: () {
+              if (widget.type == "Front_defrost") {
+                vehicledata.isFrontDefrosterActive
+                    ? _controller.reverse()
+                    : _controller.forward();
+                ref.read(vehicleProvider.notifier).update(
+                    isFrontDefrosterActive:
+                        !vehicledata.isFrontDefrosterActive);
+              }
+              if (widget.type == "Rear_defrost") {
+                vehicledata.isRearDefrosterActive
+                    ? _controller.reverse()
+                    : _controller.forward();
+                ref.read(vehicleProvider.notifier).update(
+                    isRearDefrosterActive: !vehicledata.isRearDefrosterActive);
+              }
+              if (widget.type == "Recirculation") {
+                vehicledata.isRecirculationActive
+                    ? _controller.reverse()
+                    : _controller.forward();
+                ref.read(vehicleProvider.notifier).update(
+                    isRecirculationActive: !vehicledata.isRecirculationActive);
+              }
+            },
+          );
+
+        });
+  }
+}
diff --git a/lib/Buttons/fresh_air.dart b/lib/Buttons/fresh_air.dart
new file mode 100644
index 0000000..3858cba
--- /dev/null
+++ b/lib/Buttons/fresh_air.dart
@@ -0,0 +1,110 @@
+// SPDX-License-Identifier: Apache-2.0
+
+import 'dart:io';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_svg_provider/flutter_svg_provider.dart';
+import 'package:flutter_hvac/kuksa-server/vehicle-provider.dart';
+
+import '../size.dart';
+
+class FreshAir extends ConsumerStatefulWidget {
+  WebSocket socket;
+  String serverPath;
+  String img;
+  FreshAir({
+    Key? key,
+    required this.serverPath,
+    required this.socket,
+    required this.img,
+  }) : super(key: key);
+
+  @override
+  _FreshAirState createState() => _FreshAirState();
+}
+
+class _FreshAirState extends ConsumerState<FreshAir> with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+  late bool isFreshAirCirculateActive;
+  late Animation<Color?> _colorAnimation;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _controller = AnimationController(
+      duration: Duration(milliseconds: 500),
+      vsync: this,
+    );
+
+    _colorAnimation =
+        ColorTween(begin: Colors.lightBlueAccent, end: Colors.green)
+            .animate(_controller);
+
+    _controller.addListener(() {
+
+    });
+
+
+  }
+
+  // dismiss the animation when widget exits screen
+  @override
+  void dispose() {
+    super.dispose();
+    _controller.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    isFreshAirCirculateActive = ref.watch(vehicleProvider).isFreshAirCirculateActive;
+    return AnimatedBuilder(
+        animation: _controller,
+        builder: (BuildContext context, _) {
+          return InkWell(
+            child: AnimatedContainer(
+              constraints: BoxConstraints(
+                maxHeight: SizeConfig.screenHeight*0.10,
+                maxWidth: SizeConfig.screenWidth*0.15,
+              ),
+
+
+              decoration: BoxDecoration(
+                gradient: isFreshAirCirculateActive
+                    ? RadialGradient(
+                  colors: [Colors.black, Colors.lightBlue],
+                  radius: 2,
+                )
+                    : null,
+
+                // color: _colorAnimation2.value,
+                border: Border.all(
+                  color: Colors.white,
+                  width: 2,
+                ),
+                borderRadius: BorderRadius.circular(SizeConfig.safeBlockVertical*2),
+              ),
+              duration: const Duration(milliseconds: 500),
+              child: AnimatedContainer(
+                duration: Duration(milliseconds: 100),
+                margin: const EdgeInsets.all(10),
+                child: Image(
+                  width: SizeConfig.screenWidth*0.15,
+                  height: SizeConfig.screenHeight*0.10,
+                  image: Svg(widget.img),
+                  color: _colorAnimation.value,
+                ),
+              ),
+            ),
+            onTap: () {
+              isFreshAirCirculateActive ? _controller.reverse() : _controller.forward();
+              ref
+                  .read(vehicleProvider.notifier)
+                  .update(isFreshAirCirculateActive: !isFreshAirCirculateActive);
+            },
+          );
+
+        });
+  }
+}