Rework temperature controls

Rework the temperature controls to use NumberPicker widgets so they
function more like a user would expect.  The associated Riverpod
providers have been updated to track the temperature value directly,
and some minor layout tweaks have also been made.

Bug-AGL: SPEC-4644

Signed-off-by: Scott Murray <scott.murray@konsulko.com>
Change-Id: I069e0bd53c79d73cc7a60045309efdfeb9409fbc

12 files changed, 282 insertions, 482 deletions

diff --git a/lib/Buttons/auto.dart b/lib/Buttons/auto.dart
index 536a117..1bdb045 100644
--- a/lib/Buttons/auto.dart
+++ b/lib/Buttons/auto.dart
@@ -21,7 +21,8 @@ class Auto extends ConsumerStatefulWidget {
   _AutoState createState() => _AutoState();
 }
 
-class _AutoState extends ConsumerState<Auto> with SingleTickerProviderStateMixin {
+class _AutoState extends ConsumerState<Auto>
+    with SingleTickerProviderStateMixin {
   late AnimationController _controller;
   late bool isAutoActive;
   late Animation<Color?> _colorAnimation;
@@ -39,11 +40,7 @@ class _AutoState extends ConsumerState<Auto> with SingleTickerProviderStateMixin
         ColorTween(begin: Colors.lightBlueAccent, end: Colors.green)
             .animate(_controller);
 
-    _controller.addListener(() {
-
-    });
-
-
+    _controller.addListener(() {});
   }
 
   // dismiss the animation when widget exits screen
@@ -62,33 +59,30 @@ class _AutoState extends ConsumerState<Auto> with SingleTickerProviderStateMixin
           return InkWell(
             child: AnimatedContainer(
               constraints: BoxConstraints(
-                maxHeight: SizeConfig.screenHeight*0.10,
-                maxWidth: SizeConfig.screenWidth*0.15,
+                maxHeight: SizeConfig.screenHeight * 0.10,
+                maxWidth: SizeConfig.screenWidth * 0.15,
               ),
-
-
               decoration: BoxDecoration(
                 gradient: isAutoActive
                     ? RadialGradient(
-                  colors: [Colors.black, Colors.lightBlue],
-                  radius: 2,
-                )
+                        colors: [Colors.black, Colors.lightBlue],
+                        radius: 2,
+                      )
                     : null,
-
-
                 border: Border.all(
                   color: Colors.white,
                   width: 2,
                 ),
-                borderRadius: BorderRadius.circular(SizeConfig.safeBlockVertical*2),
+                borderRadius:
+                    BorderRadius.circular(SizeConfig.safeBlockVertical * 2),
               ),
               duration: Duration(seconds: 1),
               child: AnimatedContainer(
                 duration: Duration(milliseconds: 100),
-                margin: EdgeInsets.all(SizeConfig.blockSizeVertical*2),
+                margin: EdgeInsets.all(SizeConfig.blockSizeVertical * 2),
                 child: Container(
-                  width: SizeConfig.screenWidth*0.15,
-                  height: SizeConfig.screenHeight*0.10,
+                  width: SizeConfig.screenWidth * 0.15,
+                  height: SizeConfig.screenHeight * 0.10,
                   child: FittedBox(
                     fit: BoxFit.fill,
                     child: Text(
@@ -110,7 +104,6 @@ class _AutoState extends ConsumerState<Auto> with SingleTickerProviderStateMixin
                   .update(isAutoActive: !isAutoActive);
             },
           );
-
         });
   }
 }
diff --git a/lib/home_page.dart b/lib/home_page.dart
index a6eb3a3..00ee789 100644
--- a/lib/home_page.dart
+++ b/lib/home_page.dart
@@ -1,6 +1,5 @@
 // SPDX-License-Identifier: Apache-2.0
 
-
 import 'dart:io';
 
 import 'package:flutter/material.dart';
@@ -11,171 +10,163 @@ import 'package:flutter_hvac/Buttons/ac_on_face.dart';
 import 'package:flutter_hvac/Buttons/ac_on_foot.dart';
 import 'package:flutter_hvac/Buttons/defrost_recirculate.dart';
 import 'package:flutter_hvac/size.dart';
-import 'package:flutter_hvac/slider/Climate_slider.dart';
-import 'package:flutter_hvac/slider/Right_climate_slider.dart';
 
 import 'Buttons/auto.dart';
-import 'widgets/Right_climate.dart';
 import 'widgets/left_climate.dart';
-import 'slider/slider.dart';
+import 'widgets/right_climate.dart';
+import 'widgets/slider.dart';
 
-class MyHome_Page extends StatelessWidget {
+class HomePage extends StatelessWidget {
   final WebSocket socket;
-  MyHome_Page({Key? key, required this.socket}) : super(key: key);
+  HomePage({Key? key, required this.socket}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     SizeConfig().init(context);
 
     return Scaffold(
-      backgroundColor: Colors.black,
-      body: Flex(direction: Axis.vertical,
-        children: [
-          Flexible(
-            flex: 4,
-              child: Row(
-                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-                children: [
-                  Row(
+        backgroundColor: Colors.black,
+        body: Theme(
+          data: Theme.of(context).copyWith(
+            // Disable splash animations
+            splashFactory: NoSplash.splashFactory,
+            hoverColor: Colors.transparent,
+          ),
+          child: Flex(
+            direction: Axis.vertical,
+            children: [
+              Container(height: SizeConfig.screenHeight * 0.0125),
+              Flexible(
+                  flex: 4,
+                  child: Row(
+                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                     children: [
-
-                      ClimateSliderControlLeft(),
-                      SizedBox(width: SizeConfig.blockSizeHorizontal*4,),
-
-
                       Column(
                         children: [
                           Text(
                             'Left',
                             style: TextStyle(
-                              fontSize: SizeConfig.fontsize*4,
+                              fontSize: SizeConfig.fontsize * 4,
                               fontWeight: FontWeight.w700,
                               color: Colors.lightBlueAccent,
                             ),
                           ),
-
                           SizedBox(
-                              height: SizeConfig.screenHeight/10,
-                              width: SizeConfig.screenWidth/10,
+                              height: SizeConfig.screenHeight / 10,
+                              width: SizeConfig.screenWidth / 10,
                               child: Image.asset('images/left_climate.PNG')),
-
-                          ScrollContainerLeft(
-                            socket: socket,
-                          ),
+                          LeftClimateScrollWidget(socket: socket),
                         ],
                       ),
-
-
-                    ],
-                  ),
-                  Row(
-                    // mainAxisAlignment: MainAxisAlignment.end,
-                    children: [
-
                       Column(
                         children: [
                           Text(
                             'Right',
                             style: TextStyle(
-                              fontSize: SizeConfig.fontsize*4,
+                              fontSize: SizeConfig.fontsize * 4,
                               fontWeight: FontWeight.w700,
                               color: Colors.lightBlueAccent,
                             ),
                           ),
                           SizedBox(
-                              height: SizeConfig.screenHeight/10,
-                              width: SizeConfig.screenWidth/10,
+                              height: SizeConfig.screenHeight / 10,
+                              width: SizeConfig.screenWidth / 10,
                               child: Image.asset('images/right_climate.PNG')),
-
-                          ScrollContainerRight(
-                            socket: socket,
-                          ),
+                          RightClimateScrollWidget(socket: socket),
                         ],
                       ),
-                      SizedBox(width: SizeConfig.blockSizeHorizontal*4,),
-
-                      ClimateSliderControlRight(),
                     ],
-                  ),
-
-                ],
-              )),
-          Flexible(
-            flex: 2,
-              child: Row(
-                crossAxisAlignment: CrossAxisAlignment.center,
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: [
-                  Image(
-                    width: SizeConfig.screenWidth*0.20,
-                    height: SizeConfig.screenHeight*0.25,
-                    image: Svg('images/fan.svg'),
-                    color: Colors.lightBlueAccent,
-                  ),
-                  SliderControl(
-                    socket: socket,
-                  )
-                ],
-              )),
-          Flexible(
-            flex: 3,
-              child: Row(
-                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-                children: [
-                  Column(
+                  )),
+              Flexible(
+                  flex: 2,
+                  child: Row(
+                    crossAxisAlignment: CrossAxisAlignment.center,
+                    mainAxisAlignment: MainAxisAlignment.center,
                     children: [
-                      AC(
-                          socket: socket,
-                          serverPath: 'Vehicle.Cabin.HVAC.IsAirConditioningActive'),
-                      SizedBox(height: SizeConfig.safeBlockVertical,),
-
-                      AcOnFoot(
-                        img: 'images/ac_on_foot.svg',
-                        socket: socket,
-                      ),
-                      SizedBox(height: SizeConfig.safeBlockVertical,),
-
-                      AcOnFace(
-                        img: 'images/ac_on_face.svg',
+                      Container(
+                          height: SizeConfig.screenHeight * 0.20,
+                          child: Image(
+                              width: SizeConfig.screenWidth * 0.20,
+                              height: SizeConfig.screenHeight * 0.25,
+                              image: Svg('images/fan.svg'),
+                              color: Colors.lightBlueAccent,
+                              fit: BoxFit.fitWidth)),
+                      SliderControl(
                         socket: socket,
                       ),
                     ],
-                  ),
-                  Row(
-                    children: [
-                      Auto(serverPath: '', socket: socket),
-                      SizedBox(width: SizeConfig.safeBlockHorizontal,),
-                      FreshAir(serverPath: '', socket: socket, img: 'images/wind_in.svg'),
-                    ],
-                  ),
-                  Column(
+                  )),
+              Flexible(
+                  flex: 3,
+                  child: Row(
+                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                     children: [
-                      CaustomButton(
-                          serverPath: 'Vehicle.Cabin.HVAC.IsRecirculationActive',
-                          socket: socket,
-                          img: 'images/in_out.svg',
-                          type: 'Recirculation'),
-                      SizedBox(height: SizeConfig.safeBlockVertical,),
-                      CaustomButton(
-                          serverPath: 'Vehicle.Cabin.HVAC.IsRearDefrosterActive',
-                          socket: socket,
-                          img: 'images/rear_ws.svg',
-                          type: 'Rear_defrost'),
-                      SizedBox(height: SizeConfig.safeBlockVertical,),
-
-                      CaustomButton(
-                          serverPath: 'Vehicle.Cabin.HVAC.IsFrontDefrosterActive',
-                          socket: socket,
-                          img: 'images/wind_shield.svg',
-                          type: 'Front_defrost'),
+                      Column(
+                        children: [
+                          AC(
+                              socket: socket,
+                              serverPath:
+                                  'Vehicle.Cabin.HVAC.IsAirConditioningActive'),
+                          SizedBox(
+                            height: SizeConfig.safeBlockVertical,
+                          ),
+                          AcOnFoot(
+                            img: 'images/ac_on_foot.svg',
+                            socket: socket,
+                          ),
+                          SizedBox(
+                            height: SizeConfig.safeBlockVertical,
+                          ),
+                          AcOnFace(
+                            img: 'images/ac_on_face.svg',
+                            socket: socket,
+                          ),
+                        ],
+                      ),
+                      Row(
+                        children: [
+                          Auto(serverPath: '', socket: socket),
+                          SizedBox(
+                            width: SizeConfig.safeBlockHorizontal,
+                          ),
+                          FreshAir(
+                              serverPath: '',
+                              socket: socket,
+                              img: 'images/wind_in.svg'),
+                        ],
+                      ),
+                      Column(
+                        children: [
+                          CaustomButton(
+                              serverPath:
+                                  'Vehicle.Cabin.HVAC.IsRecirculationActive',
+                              socket: socket,
+                              img: 'images/in_out.svg',
+                              type: 'Recirculation'),
+                          SizedBox(
+                            height: SizeConfig.safeBlockVertical,
+                          ),
+                          CaustomButton(
+                              serverPath:
+                                  'Vehicle.Cabin.HVAC.IsRearDefrosterActive',
+                              socket: socket,
+                              img: 'images/rear_ws.svg',
+                              type: 'Rear_defrost'),
+                          SizedBox(
+                            height: SizeConfig.safeBlockVertical,
+                          ),
+                          CaustomButton(
+                              serverPath:
+                                  'Vehicle.Cabin.HVAC.IsFrontDefrosterActive',
+                              socket: socket,
+                              img: 'images/wind_shield.svg',
+                              type: 'Front_defrost'),
+                        ],
+                      ),
                     ],
-                  ),
-                ],
-              )),
-        ],
-
-
-      ),
-      );
+                  )),
+            ],
+          ),
+        ));
   }
 }
diff --git a/lib/kuksa-server/on_boarding_page.dart b/lib/kuksa-server/on_boarding_page.dart
index a14145c..1bd3a79 100644
--- a/lib/kuksa-server/on_boarding_page.dart
+++ b/lib/kuksa-server/on_boarding_page.dart
@@ -24,23 +24,19 @@ class _OnBoardingPageState extends ConsumerState<OnBoardingPage> {
   late Timer _timer;
   late WebSocket _socket;
 
-
   @override
   void initState() {
     super.initState();
     _socket = widget.socket;
-    VISS.init(widget.socket,ref);
+    VISS.init(widget.socket, ref);
     _timer = Timer.periodic(const Duration(seconds: 2), (timer) {
-
       if (widget.socket.readyState == 3) {
         ref.refresh(sockConnectprovider(widget.client));
       }
     });
     WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
       widget.socket.listen(
-        (data) {
-
-        },
+        (data) {},
         onError: (e, stk) {
           print(e.toString());
           ref.refresh(sockConnectprovider(widget.client));
@@ -58,7 +54,7 @@ class _OnBoardingPageState extends ConsumerState<OnBoardingPage> {
 
   @override
   Widget build(BuildContext context) {
-    return MyHome_Page(
+    return HomePage(
       socket: _socket,
     );
   }
diff --git a/lib/kuksa-server/vehicle_methods.dart b/lib/kuksa-server/vehicle_methods.dart
index 2dda79f..387c02a 100644
--- a/lib/kuksa-server/vehicle_methods.dart
+++ b/lib/kuksa-server/vehicle_methods.dart
@@ -7,41 +7,21 @@ import 'package:flutter_hvac/config.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:flutter_hvac/kuksa-server/vehicle_server_path.dart';
 
-
 class VISS {
   static const requestId = "test-id";
-  static void init(WebSocket socket,WidgetRef ref) {
-    authorize(socket,ref);
+  static void init(WebSocket socket, WidgetRef ref) {
+    authorize(socket, ref);
 
-    subscribe(socket,ref, VSPath.vehicleFrontLeftTier);
-    subscribe(socket,ref, VSPath.vehicleFrontRightTier);
-    subscribe(socket,ref, VSPath.vehicleRearLeftTier);
-    subscribe(socket,ref, VSPath.vehicleRearRightTier);
-    subscribe(socket,ref, VSPath.vehicleIsChildLockActiveLeft);
-    subscribe(socket,ref, VSPath.vehicleIsChildLockActiveRight);
-    subscribe(socket,ref, VSPath.vehicleCurrentLatitude);
-    subscribe(socket,ref, VSPath.vehicleCurrentLongitude);
-    subscribe(socket,ref, VSPath.vehicleInsideTemperature);
-    subscribe(socket,ref, VSPath.vehicleAmbientAirTemperature);
+    subscribe(socket, ref, VSPath.vehicleInsideTemperature);
+    subscribe(socket, ref, VSPath.vehicleAmbientAirTemperature);
   }
 
-  static void update(WebSocket socket,WidgetRef ref) {
-    get(socket,ref, VSPath.vehicleAmbientAirTemperature);
-    get(socket,ref, VSPath.vehicleTrunkLocked);
-    get(socket, ref,VSPath.vehicleTrunkOpen);
-
-    get(socket,ref, VSPath.vehicleFrontLeftTier);
-    get(socket,ref, VSPath.vehicleFrontRightTier);
-    get(socket,ref, VSPath.vehicleRearLeftTier);
-    get(socket,ref, VSPath.vehicleRearRightTier);
-    get(socket,ref, VSPath.vehicleIsChildLockActiveLeft);
-    get(socket,ref, VSPath.vehicleIsChildLockActiveRight);
-    get(socket,ref, VSPath.vehicleCurrentLatitude);
-    get(socket,ref, VSPath.vehicleCurrentLongitude);
-    get(socket,ref, VSPath.vehicleInsideTemperature);
+  static void update(WebSocket socket, WidgetRef ref) {
+    get(socket, ref, VSPath.vehicleInsideTemperature);
+    get(socket, ref, VSPath.vehicleAmbientAirTemperature);
   }
 
-  static void authorize(WebSocket socket,WidgetRef ref) {
+  static void authorize(WebSocket socket, WidgetRef ref) {
     final config = ref.read(ConfigStateprovider);
     Map<String, dynamic> map = {
       "action": "authorize",
@@ -51,7 +31,7 @@ class VISS {
     socket.add(jsonEncode(map));
   }
 
-  static void get(WebSocket socket,WidgetRef ref ,String path) {
+  static void get(WebSocket socket, WidgetRef ref, String path) {
     final config = ref.read(ConfigStateprovider);
 
     Map<String, dynamic> map = {
@@ -81,7 +61,7 @@ class VISS {
     socket.add(jsonEncode(map));
   }
 
-  static void subscribe(WebSocket socket,WidgetRef ref, String path) {
+  static void subscribe(WebSocket socket, WidgetRef ref, String path) {
     final config = ref.read(ConfigStateprovider);
 
     Map<String, dynamic> map = {
@@ -92,6 +72,4 @@ class VISS {
     };
     socket.add(jsonEncode(map));
   }
-
-
 }
diff --git a/lib/main.dart b/lib/main.dart
index b2758de..32203fa 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -1,13 +1,19 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import 'dart:io';
+import 'dart:ui';
 
 import 'package:flutter/material.dart';
 import 'package:flutter_hvac/config.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'kuksa-server/vehicle_config.dart';
 
-
+class MyCustomScrollBehavior extends MaterialScrollBehavior {
+  // Override behavior methods and getters like dragDevices
+  @override
+  Set<PointerDeviceKind> get dragDevices =>
+      {PointerDeviceKind.mouse, PointerDeviceKind.touch};
+}
 
 Future<void> main() async {
   WidgetsFlutterBinding.ensureInitialized();
@@ -16,6 +22,7 @@ Future<void> main() async {
   runApp(
     ProviderScope(
       child: MaterialApp(
+        scrollBehavior: MyCustomScrollBehavior(),
         home: GetConfig(client: client),
       ),
     ),
diff --git a/lib/provider.dart b/lib/provider.dart
index c933fdd..16d65af 100644
--- a/lib/provider.dart
+++ b/lib/provider.dart
@@ -2,24 +2,24 @@
 
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
-final LeftSlider = StateNotifierProvider<leftclimate, int>(
-  (ref) => leftclimate(),
+final LeftClimateTempProvider = StateNotifierProvider<LeftClimateTemp, int>(
+  (ref) => LeftClimateTemp(),
 );
 
-class leftclimate extends StateNotifier<int> {
-  leftclimate() : super(0);
+class LeftClimateTemp extends StateNotifier<int> {
+  LeftClimateTemp() : super(22);
 
   Future<void> update(value) async {
     state = value;
   }
 }
 
-final RightSlider = StateNotifierProvider<Rightclimate, int>(
-  (ref) => Rightclimate(),
+final RightClimateTempProvider = StateNotifierProvider<RightClimateTemp, int>(
+  (ref) => RightClimateTemp(),
 );
 
-class Rightclimate extends StateNotifier<int> {
-  Rightclimate() : super(0);
+class RightClimateTemp extends StateNotifier<int> {
+  RightClimateTemp() : super(22);
 
   Future<void> update(value) async {
     state = value;
diff --git a/lib/slider/Climate_slider.dart b/lib/slider/Climate_slider.dart
deleted file mode 100644
index b0a0d6f..0000000
--- a/lib/slider/Climate_slider.dart
+++ /dev/null
@@ -1,38 +0,0 @@
-// SPDX-License-Identifier: Apache-2.0
-
-import 'package:flutter/material.dart';
-import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:flutter_hvac/provider.dart';
-
-import '../size.dart';
-
-class ClimateSliderControlLeft extends ConsumerWidget {
-  const ClimateSliderControlLeft({Key? key}) : super(key: key);
-
-  @override
-  Widget build(BuildContext context,ref) {
-    int val = ref.watch(LeftSlider).toInt();
-
-    return SizedBox(
-      height: SizeConfig.screenHeight*0.35,
-      width: SizeConfig.blockSizeHorizontal*3,
-      child: RotatedBox(
-        quarterTurns: 3,
-        child: Slider(
-          min: 0,
-          max: 15,
-          value: val.toDouble(),
-          divisions: 15,
-          onChanged: (value) {
-            ref.read(LeftSlider.notifier).update(value.toInt());
-          },
-          activeColor: Colors.green,
-          inactiveColor: Colors.white,
-          thumbColor: Colors.grey,
-        ),
-
-      ),
-    );
-
-  }
-}
diff --git a/lib/slider/Right_climate_slider.dart b/lib/slider/Right_climate_slider.dart
deleted file mode 100644
index 536d11c..0000000
--- a/lib/slider/Right_climate_slider.dart
+++ /dev/null
@@ -1,36 +0,0 @@
-// SPDX-License-Identifier: Apache-2.0
-
-import 'package:flutter/material.dart';
-import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:flutter_hvac/provider.dart';
-
-import '../size.dart';
-
-class ClimateSliderControlRight extends ConsumerWidget {
-  const ClimateSliderControlRight({Key? key}) : super(key: key);
-
-  @override
-  Widget build(BuildContext context, ref) {
-    int val = ref.watch(RightSlider).toInt();
-    return SizedBox(
-      height: SizeConfig.screenHeight*0.35,
-      width: SizeConfig.blockSizeHorizontal*3,
-      child: RotatedBox(
-        quarterTurns: 3,
-        child: Slider(
-          min: 0,
-          max: 15,
-          value: val.toDouble(),
-          divisions: 15,
-          onChanged: (value) {
-            ref.read(RightSlider.notifier).update(value.toInt());
-          },
-          activeColor: Colors.green,
-          inactiveColor: Colors.white,
-          thumbColor: Colors.grey,
-        ),
-
-      ),
-    );
-  }
-}
diff --git a/lib/widgets/Right_climate.dart b/lib/widgets/Right_climate.dart
deleted file mode 100644
index d47a659..0000000
--- a/lib/widgets/Right_climate.dart
+++ /dev/null
@@ -1,115 +0,0 @@
-
-// SPDX-License-Identifier: Apache-2.0
-
-
-import 'dart:io';
-
-import 'package:flutter/material.dart';
-import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';
-import 'package:flutter_hvac/kuksa-server/vehicle_methods.dart';
-import 'package:flutter_hvac/provider.dart';
-import 'package:flutter_hvac/size.dart';
-
-class ScrollContainerRight extends ConsumerWidget {
-  WebSocket socket;
-  ScrollContainerRight({Key? key, required this.socket}) : super(key: key);
-
-  List<int> mylist = [
-    16,
-    17,
-    18,
-    19,
-    20,
-    21,
-    22,
-    23,
-    24,
-    25,
-    26,
-    27,
-    28,
-    29,
-    30,
-    31,
-    32,
-  ];
-
-
-  final ItemScrollController itemScrollController = ItemScrollController();
-  final ItemPositionsListener itemPositionsListener =
-      ItemPositionsListener.create();
-
-  @override
-  Widget build(BuildContext context, ref) {
-    int val = ref.watch(RightSlider).toInt();
-
-    VISS.set(socket,ref, 'Vehicle.Cabin.HVAC.Station.Row1.Right.Temperature',
-        mylist[val].toString());
-    VISS.set(socket, ref,'Vehicle.Cabin.HVAC.Station.Row2.Right.Temperature',
-        mylist[val].toString());
-
-    if (itemScrollController.isAttached) {
-      itemScrollController.scrollTo(
-          index: val.toInt()+2,
-          duration: Duration(milliseconds: 500),
-          curve: Curves.easeInOutCubic,
-          alignment: 1);
-    }
-
-
-    return SingleChildScrollView(
-      child: SizedBox(
-        height: SizeConfig.screenHeight*0.30,
-        width: SizeConfig.screenWidth*0.25,
-        child: AnimatedContainer(
-          // color: Colors.red,
-          duration: Duration(milliseconds: 300),
-          decoration: BoxDecoration(
-            border: Border.all(
-              color: Colors.white,
-              width: 2,
-            ),
-            borderRadius: BorderRadius.circular(12),
-          ),
-          child: ScrollablePositionedList.builder(
-            physics: NeverScrollableScrollPhysics(),
-              scrollDirection: Axis.vertical,
-              itemCount: mylist.length,
-              itemScrollController: itemScrollController,
-              itemPositionsListener: itemPositionsListener,
-              itemBuilder: (context, index) {
-                return Container(
-                  decoration: BoxDecoration(
-
-                    gradient: index == val
-                        ? RadialGradient(
-                            colors: [Colors.white54, Colors.black], radius: SizeConfig.safeBlockVertical*0.7)
-                        : null,
-                  ),
-                  child: ListTile(
-                    subtitle: Center(
-                      child: Text(
-                        '' + mylist[index].toString() + '°',
-                        style: index == val ? TextStyle(
-                          color: Colors.lightBlueAccent,
-                          fontWeight: FontWeight.w700,
-                          fontSize: SizeConfig.fontsize*4,
-                        ):TextStyle(
-                          color: Colors.white54,
-                          fontWeight: FontWeight.w700,
-                          fontSize: SizeConfig.fontsize*4,
-                        ),
-                      ),
-                    ),
-
-                    minVerticalPadding: 5,
-
-                  ),
-                );
-              }),
-        ),
-      ),
-    );
-  }
-}
diff --git a/lib/widgets/left_climate.dart b/lib/widgets/left_climate.dart
index 2fb30a0..b45eb0b 100644
--- a/lib/widgets/left_climate.dart
+++ b/lib/widgets/left_climate.dart
@@ -1,112 +1,66 @@
 // SPDX-License-Identifier: Apache-2.0
 
+import 'dart:io';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';
 import 'package:flutter_hvac/provider.dart';
-import 'dart:io';
+import 'package:numberpicker/numberpicker.dart';
 
 import '../kuksa-server/vehicle_methods.dart';
 import '../size.dart';
 
-class ScrollContainerLeft extends ConsumerWidget {
-  WebSocket socket;
-  ScrollContainerLeft({Key? key, required this.socket}) : super(key: key);
-
-  List<int> mylist = [
-    16,
-    17,
-    18,
-    19,
-    20,
-    21,
-    22,
-    23,
-    24,
-    25,
-    26,
-    27,
-    28,
-    29,
-    30,
-    31,
-    32
-  ];
+class LeftClimateScrollWidget extends ConsumerWidget {
+  LeftClimateScrollWidget({Key? key, required this.socket}) : super(key: key);
 
+  WebSocket socket;
 
-  final ItemScrollController itemScrollController = ItemScrollController();
-  final ItemPositionsListener itemPositionsListener =
-      ItemPositionsListener.create();
   @override
   Widget build(BuildContext context, ref) {
-    int val = ref.watch(LeftSlider).toInt();
+    final int _selectedTemp = ref.watch(LeftClimateTempProvider);
 
-    VISS.set(socket,ref, 'Vehicle.Cabin.HVAC.Station.Row1.Left.Temperature',
-        mylist[val].toString());
-    VISS.set(socket,ref, 'Vehicle.Cabin.HVAC.Station.Row2.Left.Temperature',
-        mylist[val].toString());
-
-
-    if (itemScrollController.isAttached) {
-      itemScrollController.scrollTo(
-          index: val.toInt() + 2,
-          duration: Duration(milliseconds: 500),
-          curve: Curves.easeInOutCubic,
-          alignment: 1);
-    }
-
-    return SingleChildScrollView(
-      child: SizedBox(
-        height: SizeConfig.screenHeight*0.30,
-        width: SizeConfig.screenWidth*0.25,
-        child: AnimatedContainer(
-          // color: Colors.red,
-          duration: Duration(milliseconds: 500),
-          decoration: BoxDecoration(
-            border: Border.all(
-              color: Colors.white,
-              width: 2,
+    return SizedBox(
+        width: SizeConfig.screenWidth * 0.25,
+        height: SizeConfig.screenHeight * 0.30,
+        child: Container(
+            //color: Colors.red,
+            decoration: BoxDecoration(
+              border: Border.all(
+                color: Colors.white,
+                width: 2,
+              ),
+              borderRadius: BorderRadius.circular(12),
             ),
-            borderRadius: BorderRadius.circular(12),
-          ),
-          child: ScrollablePositionedList.builder(
-            physics: NeverScrollableScrollPhysics(),
-              scrollDirection: Axis.vertical,
-              itemCount: mylist.length,
-              itemScrollController: itemScrollController,
-              itemPositionsListener: itemPositionsListener,
-              itemBuilder: (context, index) {
-                return Container(
-                  decoration: BoxDecoration(
-
-                    gradient: index == val
-                        ? RadialGradient(
-                            colors: [Colors.white54, Colors.black], radius: SizeConfig.safeBlockVertical*0.7)
-                        : null,
-                  ),
-                  child: ListTile(
-                    subtitle: Center(
-                      child: Text(
-                        '' + mylist[index].toString() + '°',
-                        style: index == val ? TextStyle(
-                          color: Colors.lightBlueAccent,
-                          fontWeight: FontWeight.w700,
-                          fontSize: SizeConfig.fontsize*4,
-                        ):TextStyle(
-                          color: Colors.white54,
-                          fontWeight: FontWeight.w700,
-                          fontSize: SizeConfig.fontsize*4,
-                        ),
-                      ),
-                    ),
-                    // tileColor: Colors.red,
-                    minVerticalPadding: 5,
-                    // selectedTileColor: ,
-                  ),
-                );
-              }),
-        ),
-      ),
-    );
+            child: NumberPicker(
+                minValue: 16,
+                maxValue: 33,
+                itemHeight: 100,
+                itemCount: 5,
+                value: _selectedTemp,
+                textMapper: (value) {
+                  return value.toString() + '°';
+                },
+                onChanged: (value) {
+                  ref.read(LeftClimateTempProvider.notifier).update(value);
+                  VISS.set(
+                      socket,
+                      ref,
+                      'Vehicle.Cabin.HVAC.Station.Row1.Left.Temperature',
+                      value.toString());
+                  VISS.set(
+                      socket,
+                      ref,
+                      'Vehicle.Cabin.HVAC.Station.Row2.Left.Temperature',
+                      value.toString());
+                },
+                selectedTextStyle: TextStyle(
+                  color: Colors.lightBlueAccent,
+                  fontWeight: FontWeight.w700,
+                  fontSize: SizeConfig.fontsize * 4,
+                ),
+                textStyle: TextStyle(
+                  color: Colors.white54,
+                  fontWeight: FontWeight.w700,
+                  fontSize: SizeConfig.fontsize * 4,
+                ))));
   }
 }
diff --git a/lib/widgets/right_climate.dart b/lib/widgets/right_climate.dart
new file mode 100644
index 0000000..590b511
--- /dev/null
+++ b/lib/widgets/right_climate.dart
@@ -0,0 +1,65 @@
+// 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/provider.dart';
+import 'package:numberpicker/numberpicker.dart';
+
+import '../kuksa-server/vehicle_methods.dart';
+import '../size.dart';
+
+class RightClimateScrollWidget extends ConsumerWidget {
+  RightClimateScrollWidget({Key? key, required this.socket}) : super(key: key);
+
+  WebSocket socket;
+
+  @override
+  Widget build(BuildContext context, ref) {
+    final int _selectedTemp = ref.watch(RightClimateTempProvider);
+
+    return SizedBox(
+        width: SizeConfig.screenWidth * 0.25,
+        height: SizeConfig.screenHeight * 0.30,
+        child: Container(
+            decoration: BoxDecoration(
+              border: Border.all(
+                color: Colors.white,
+                width: 2,
+              ),
+              borderRadius: BorderRadius.circular(12),
+            ),
+            child: NumberPicker(
+                minValue: 16,
+                maxValue: 33,
+                itemHeight: 100,
+                itemCount: 5,
+                value: _selectedTemp,
+                textMapper: (value) {
+                  return value.toString() + '°';
+                },
+                onChanged: (value) {
+                  ref.read(RightClimateTempProvider.notifier).update(value);
+                  VISS.set(
+                      socket,
+                      ref,
+                      'Vehicle.Cabin.HVAC.Station.Row1.Right.Temperature',
+                      value.toString());
+                  VISS.set(
+                      socket,
+                      ref,
+                      'Vehicle.Cabin.HVAC.Station.Row2.Right.Temperature',
+                      value.toString());
+                },
+                selectedTextStyle: TextStyle(
+                  color: Colors.lightBlueAccent,
+                  fontWeight: FontWeight.w700,
+                  fontSize: SizeConfig.fontsize * 4,
+                ),
+                textStyle: TextStyle(
+                  color: Colors.white54,
+                  fontWeight: FontWeight.w700,
+                  fontSize: SizeConfig.fontsize * 4,
+                ))));
+  }
+}
diff --git a/lib/slider/slider.dart b/lib/widgets/slider.dart
index 1d2de82..f8bd459 100644
--- a/lib/slider/slider.dart
+++ b/lib/widgets/slider.dart
@@ -16,20 +16,25 @@ class SliderControl extends ConsumerWidget {
   @override
   Widget build(BuildContext context, ref) {
     return SizedBox(
-      height: SizeConfig.safeBlockVertical*2,
-      width: SizeConfig.screenWidth*0.5,
-
+      height: SizeConfig.safeBlockVertical * 2,
+      width: SizeConfig.screenWidth * 0.5,
       child: Slider(
         value: ref.watch(fanSpeedProvider).toDouble(),
         onChanged: (value) {
           ref.read(fanSpeedProvider.notifier).update(value.toInt());
-          VISS.set(socket, ref,'Vehicle.Cabin.HVAC.Station.Row1.Left.FanSpeed',
+          VISS.set(socket, ref, 'Vehicle.Cabin.HVAC.Station.Row1.Left.FanSpeed',
               value.toInt().toString());
-          VISS.set(socket, ref,'Vehicle.Cabin.HVAC.Station.Row1.Right.FanSpeed',
+          VISS.set(
+              socket,
+              ref,
+              'Vehicle.Cabin.HVAC.Station.Row1.Right.FanSpeed',
               value.toInt().toString());
-          VISS.set(socket, ref,'Vehicle.Cabin.HVAC.Station.Row2.Left.FanSpeed',
+          VISS.set(socket, ref, 'Vehicle.Cabin.HVAC.Station.Row2.Left.FanSpeed',
               value.toInt().toString());
-          VISS.set(socket,ref, 'Vehicle.Cabin.HVAC.Station.Row2.Right.FanSpeed',
+          VISS.set(
+              socket,
+              ref,
+              'Vehicle.Cabin.HVAC.Station.Row2.Right.FanSpeed',
               value.toInt().toString());
         },
         min: 0,
@@ -37,7 +42,7 @@ class SliderControl extends ConsumerWidget {
         activeColor: Colors.green,
         inactiveColor: Colors.white70,
         thumbColor: Colors.grey,
-        label: 'fan speed',
+        label: 'Fan Speed',
       ),
     );
   }