Nice animation when switching pages

5 files changed, 75 insertions, 54 deletions

diff --git a/lib/homescreen.dart b/lib/homescreen.dart
index c81a2d5..9879342 100644
--- a/lib/homescreen.dart
+++ b/lib/homescreen.dart
@@ -14,11 +14,13 @@ class Homescreen extends StatefulWidget {
   _HomescreenState createState() => _HomescreenState();
 }
 
-class _HomescreenState extends State<Homescreen> {
+class _HomescreenState extends State<Homescreen> with TickerProviderStateMixin {
   int _selectedIndex = 0;
+  int _previousIndex = 0;
 
   setNavigationIndex(int index) {
     setState(() {
+      _previousIndex = _selectedIndex;
       _selectedIndex = index;
     });
   }
@@ -87,7 +89,37 @@ class _HomescreenState extends State<Homescreen> {
           const VerticalDivider(thickness: 1, width: 1),
           // This is the main content.
           Expanded(
-            child: Center(child: _childForIndex(_selectedIndex)),
+            child: AnimatedSwitcher(
+              duration: const Duration(milliseconds: 500),
+              reverseDuration: const Duration(milliseconds: 500),
+              switchInCurve: Curves.easeInOut,
+              switchOutCurve: Curves.easeInOut,
+              transitionBuilder: (Widget child, Animation<double> animation) {
+                if (child.key != ValueKey(_selectedIndex)) {
+                  return FadeTransition(
+                    opacity:
+                        Tween<double>(begin: 1.0, end: 1.0).animate(animation),
+                    child: child,
+                  );
+                }
+                Offset beginOffset = new Offset(
+                    0.0, (_selectedIndex > _previousIndex ? 1.0 : -1.0));
+                return SlideTransition(
+                  position: Tween<Offset>(begin: beginOffset, end: Offset.zero)
+                      .animate(animation),
+                  child: FadeTransition(
+                    opacity: Tween<double>(begin: 0.0, end: 1.0).animate(
+                      CurvedAnimation(
+                        parent: animation,
+                        curve: Interval(0.5, 1.0),
+                      ),
+                    ),
+                    child: child,
+                  ),
+                );
+              },
+              child: _childForIndex(_selectedIndex),
+            ),
           )
         ],
       ),
@@ -97,50 +129,17 @@ class _HomescreenState extends State<Homescreen> {
   Widget _childForIndex(int selectedIndex) {
     switch (selectedIndex) {
       case 0:
-        return HomePage(onSetNavigationIndex: setNavigationIndex);
+        return HomePage(
+            key: ValueKey(selectedIndex),
+            onSetNavigationIndex: setNavigationIndex);
       case 1:
-        return DashboardPage();
+        return DashboardPage(key: ValueKey(selectedIndex));
       case 2:
-        return HVACPage();
+        return HVACPage(key: ValueKey(selectedIndex));
       case 3:
-        return MediaPage();
+        return MediaPage(key: ValueKey(selectedIndex));
       default:
         return Text('Undefined');
     }
   }
 }
-
-/*
-ElevatedButton(
-                child: const Text('Open app'),
-                onPressed: () {
-                  Navigator.push(
-                    context,
-                    MaterialPageRoute(
-                        builder: (context) => const SecondRoute()),
-                  );
-                },
-              ),
-
-class SecondRoute extends StatelessWidget {
-  const SecondRoute({Key? key}) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(
-        title: const Text("Second Route"),
-      ),
-      body: Center(
-        child: ElevatedButton(
-          onPressed: () {
-            Navigator.pop(context);
-          },
-          child: const Text('Go back!'),
-        ),
-      ),
-    );
-  }
-}
-
-*/
\ No newline at end of file
diff --git a/lib/page_dashboard.dart b/lib/page_dashboard.dart
index c0259ed..17258a8 100644
--- a/lib/page_dashboard.dart
+++ b/lib/page_dashboard.dart
@@ -1,12 +1,18 @@
 import 'package:flutter/material.dart';
 
 class DashboardPage extends StatelessWidget {
-  // TODO placeholder
+  const DashboardPage({Key? key}) : super(key: key);
+
   @override
   Widget build(BuildContext context) {
-    return Text(
-      'Dashboard',
-      style: Theme.of(context).textTheme.headline1,
+    return Container(
+      color: Colors.lightGreen,
+      constraints: BoxConstraints.expand(),
+      alignment: Alignment.center,
+      child: Text(
+        'Dashboard',
+        style: Theme.of(context).textTheme.headline1,
+        ),
     );
   }
 }
diff --git a/lib/page_home.dart b/lib/page_home.dart
index fe35025..1084a4f 100644
--- a/lib/page_home.dart
+++ b/lib/page_home.dart
@@ -10,7 +10,10 @@ class HomePage extends StatelessWidget {
   Widget build(BuildContext context) {
     final double spacing = MediaQuery.of(context).size.width / 32;
     final double runSpacing = spacing / 2;
-    return Center(
+    return Container(
+        color: Colors.white,
+        constraints: BoxConstraints.expand(),
+        alignment: Alignment.center,
         child: Wrap(
       spacing: spacing,
       runSpacing: runSpacing,
diff --git a/lib/page_hvac.dart b/lib/page_hvac.dart
index 9a2904e..5715290 100644
--- a/lib/page_hvac.dart
+++ b/lib/page_hvac.dart
@@ -1,12 +1,18 @@
 import 'package:flutter/material.dart';
 
 class HVACPage extends StatelessWidget {
-  // TODO placeholder
+
+  const HVACPage({Key? key}) : super(key: key);
   @override
   Widget build(BuildContext context) {
-    return Text(
-      'HVAC',
-      style: Theme.of(context).textTheme.headline1,
+    return Container(
+      color: Colors.yellow,
+      constraints: BoxConstraints.expand(),
+      alignment: Alignment.center,
+      child: Text(
+        'HVAC',
+        style: Theme.of(context).textTheme.headline1,
+        ),
     );
   }
 }
diff --git a/lib/page_media.dart b/lib/page_media.dart
index 6946598..b3e0c75 100644
--- a/lib/page_media.dart
+++ b/lib/page_media.dart
@@ -1,12 +1,19 @@
 import 'package:flutter/material.dart';
 
 class MediaPage extends StatelessWidget {
-  // TODO placeholder
+
+  const MediaPage({Key? key}) : super(key: key);
+
   @override
   Widget build(BuildContext context) {
-    return Text(
-      'Media',
-      style: Theme.of(context).textTheme.headline1,
+    return Container(
+      color: Colors.lightBlue,
+      constraints: BoxConstraints.expand(),
+      alignment: Alignment.center,
+      child: Text(
+        'Media',
+        style: Theme.of(context).textTheme.headline1,
+        ),
     );
   }
 }