From 3cdd54458bfc6ba0066cb2a82c4a91bd4baf9b82 Mon Sep 17 00:00:00 2001 From: Felipe Erias Date: Fri, 12 Nov 2021 13:59:07 +0900 Subject: Nice animation when switching pages --- lib/homescreen.dart | 81 ++++++++++++++++++++++++------------------------- lib/page_dashboard.dart | 14 ++++++--- lib/page_home.dart | 5 ++- lib/page_hvac.dart | 14 ++++++--- lib/page_media.dart | 15 ++++++--- 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 { +class _HomescreenState extends State with TickerProviderStateMixin { int _selectedIndex = 0; + int _previousIndex = 0; setNavigationIndex(int index) { setState(() { + _previousIndex = _selectedIndex; _selectedIndex = index; }); } @@ -87,7 +89,37 @@ class _HomescreenState extends State { 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 animation) { + if (child.key != ValueKey(_selectedIndex)) { + return FadeTransition( + opacity: + Tween(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(begin: beginOffset, end: Offset.zero) + .animate(animation), + child: FadeTransition( + opacity: Tween(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 { 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, + ), ); } } -- cgit 1.2.3-korg