From a6d89f1d0c5927b9a7f686db9d3d3ae8b4c1fc26 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Fri, 4 Jun 2021 20:17:59 +0300
Subject: [PATCH] Use animated icon to switch dashboard right layout

---
 .../dashboard/main_dashboard_page.dart        | 30 +++++++++++++------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/lib/modules/dashboard/main_dashboard_page.dart b/lib/modules/dashboard/main_dashboard_page.dart
index 6d1590c..fdb56b7 100644
--- a/lib/modules/dashboard/main_dashboard_page.dart
+++ b/lib/modules/dashboard/main_dashboard_page.dart
@@ -60,16 +60,25 @@ class MainDashboardPage extends TbContextWidget<MainDashboardPage, _MainDashboar
 
 }
 
-class _MainDashboardPageState extends TbContextState<MainDashboardPage, _MainDashboardPageState> {
+class _MainDashboardPageState extends TbContextState<MainDashboardPage, _MainDashboardPageState> with TickerProviderStateMixin {
 
   late ValueNotifier<String> dashboardTitleValue;
   final ValueNotifier<bool> hasRightLayout = ValueNotifier(false);
-  final ValueNotifier<bool> rightLayoutOpened = ValueNotifier(false);
   DashboardController? _dashboardController;
+  late final Animation<double> rightLayoutMenuAnimation;
+  late final AnimationController rightLayoutMenuController;
 
   @override
   void initState() {
     super.initState();
+    rightLayoutMenuController = AnimationController(
+      vsync: this,
+      duration: Duration(milliseconds: 200),
+    );
+    rightLayoutMenuAnimation = CurvedAnimation(
+        curve: Curves.linear,
+        parent: rightLayoutMenuController
+    );
     if (widget._controller != null) {
       widget._controller!._setMainDashboardPageState(this);
     }
@@ -78,6 +87,7 @@ class _MainDashboardPageState extends TbContextState<MainDashboardPage, _MainDas
 
   @override
   void dispose() {
+    rightLayoutMenuController.dispose();
     super.dispose();
   }
 
@@ -105,7 +115,7 @@ class _MainDashboardPageState extends TbContextState<MainDashboardPage, _MainDas
                     fit: BoxFit.fitWidth,
                     alignment: Alignment.centerLeft,
                     child: Text(title)
-                );
+               );
               },
             ),
             actions: [
@@ -115,11 +125,9 @@ class _MainDashboardPageState extends TbContextState<MainDashboardPage, _MainDas
                   if (_hasRightLayout) {
                     return IconButton(
                         onPressed: () => _dashboardController?.toggleRightLayout(),
-                        icon: ValueListenableBuilder<bool>(
-                          valueListenable: rightLayoutOpened,
-                          builder: (context, _rightLayoutOpened, widget) {
-                            return Icon(_rightLayoutOpened ? Icons.arrow_back : Icons.menu);
-                          }
+                        icon: AnimatedIcon(
+                          progress: rightLayoutMenuAnimation,
+                          icon: AnimatedIcons.menu_close
                         )
                     );
                   } else {
@@ -143,7 +151,11 @@ class _MainDashboardPageState extends TbContextState<MainDashboardPage, _MainDas
                   hasRightLayout.value = controller.hasRightLayout.value;
                 });
                 controller.rightLayoutOpened.addListener(() {
-                  rightLayoutOpened.value = controller.rightLayoutOpened.value;
+                  if(controller.rightLayoutOpened.value) {
+                    rightLayoutMenuController.forward();
+                  } else {
+                    rightLayoutMenuController.reverse();
+                  }
                 });
               }
             }