From 8ebe83c51893d6ec249f7c2b5f2b0154f2af87d1 Mon Sep 17 00:00:00 2001 From: Shi Hao Hong Date: Tue, 14 Jan 2020 16:04:49 -0800 Subject: [PATCH 01/17] WIP - sign in page --- packages/animations/example/lib/main.dart | 206 +++++++++++++++++++++- packages/animations/example/pubspec.yaml | 2 + 2 files changed, 207 insertions(+), 1 deletion(-) diff --git a/packages/animations/example/lib/main.dart b/packages/animations/example/lib/main.dart index 65cedfe061a3..55f974ca65c1 100644 --- a/packages/animations/example/lib/main.dart +++ b/packages/animations/example/lib/main.dart @@ -1,3 +1,207 @@ import 'package:flutter/widgets.dart'; +import 'package:flutter/material.dart'; -void main() => runApp(const Placeholder()); +import 'package:animations/animations.dart'; + +void main() => runApp(MaterialApp( + theme: ThemeData( + pageTransitionsTheme: const PageTransitionsTheme( + builders: { + TargetPlatform.android: ZoomPageTransitionsBuilder(), + }, + ), + ), + home: _TransitionsHomePage(), +)); + +class _TransitionsHomePage extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar(title: const Text('Material Transitions')), + body: Column( + children: [ + ListTile( + contentPadding: const EdgeInsets.symmetric( + vertical: 10.0, + horizontal: 15.0, + ), + leading: Container( + width: 40.0, + height: 40.0, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(20.0), + border: Border.all( + color: Colors.black54, + ), + ), + child: Icon( + Icons.play_arrow, + size: 35, + ), + ), + onTap: () { + Navigator.of(context).push( + MaterialPageRoute( + builder: (BuildContext context) => _SharedAxisTransitionDemo(), + ), + ); + }, + title: const Text('Shared Axis'), + subtitle: const Text('Page transition where outgoing and incoming elements share a fade transition'), + ), + ], + ), + ); + } +} + +class _SharedAxisTransitionDemo extends StatefulWidget { + @override + __SharedAxisTransitionDemoState createState() => __SharedAxisTransitionDemoState(); +} + +class __SharedAxisTransitionDemoState extends State<_SharedAxisTransitionDemo> { + SharedAxisTransitionType transitionType = SharedAxisTransitionType.horizontal; + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar(title: const Text('Shared Axis Transition')), + body: LayoutBuilder( + builder: (BuildContext context, BoxConstraints constraints) { + return Column( + children: [ + SizedBox( + height: constraints.maxHeight - 120, + child: _SignInPage(), + ), + Padding( + padding: const EdgeInsets.symmetric( + horizontal: 15.0, + ), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + const FlatButton( + onPressed: null, + child: Text('BACK'), + ), + RaisedButton( + onPressed: () {}, + child: const Text('NEXT'), + ), + ], + ), + ), + const Divider(thickness: 2.0), + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Radio( + value: SharedAxisTransitionType.horizontal, + groupValue: transitionType, + onChanged: (SharedAxisTransitionType newValue) { + setState(() { + transitionType = newValue; + }); + }, + ), + const Text('X'), + Radio( + value: SharedAxisTransitionType.vertical, + groupValue: transitionType, + onChanged: (SharedAxisTransitionType newValue) { + setState(() { + transitionType = newValue; + }); + }, + ), + const Text('Y'), + Radio( + value: SharedAxisTransitionType.scaled, + groupValue: transitionType, + onChanged: (SharedAxisTransitionType newValue) { + setState(() { + transitionType = newValue; + }); + }, + ), + const Text('Z'), + ], + ), + ], + ); + }, + ), + ); + } +} + +class _SignInPage extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Column( + children: [ + const Padding(padding: EdgeInsets.symmetric(vertical: 35.0)), + CircleAvatar( + radius: 28.0, + backgroundColor: Colors.black54, + child: Text( + 'DP', + style: TextStyle( + fontSize: 20.0, + color: Colors.white, + ), + ), + ), + const Padding(padding: EdgeInsets.symmetric(vertical: 8.0)), + Text( + 'Hi David Park', + style: Theme.of(context).textTheme.headline, + ), + const Padding(padding: EdgeInsets.symmetric(vertical: 8.0)), + Text( + 'Sign in with your account', + style: TextStyle( + fontSize: 12.0, + color: Colors.grey, + ), + ), + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const Padding( + padding: EdgeInsets.only( + top: 40.0, + left: 15.0, + right: 15.0, + bottom: 10.0, + ), + child: TextField( + decoration: InputDecoration( + labelText: 'Email or phone number', + border: OutlineInputBorder(), + ), + ), + ), + Padding( + padding: const EdgeInsets.only(left: 10.0), + child: FlatButton( + onPressed: () {}, + child: const Text('FORGOT EMAIL?'), + ), + ), + Padding( + padding: const EdgeInsets.only(left: 10.0), + child: FlatButton( + onPressed: () {}, + child: const Text('CREATE ACCOUNT'), + ), + ), + ], + ), + ], + ); + } +} \ No newline at end of file diff --git a/packages/animations/example/pubspec.yaml b/packages/animations/example/pubspec.yaml index cffb8a5b2ad0..b43616433621 100644 --- a/packages/animations/example/pubspec.yaml +++ b/packages/animations/example/pubspec.yaml @@ -10,6 +10,8 @@ dependencies: flutter: sdk: flutter cupertino_icons: ^0.1.2 + animations: + path: ../../animations dev_dependencies: flutter_test: From 9b4e57aa6d9a65796448e09575793819c7128915 Mon Sep 17 00:00:00 2001 From: Shi Hao Hong Date: Tue, 14 Jan 2020 16:45:42 -0800 Subject: [PATCH 02/17] Complete sign in page --- packages/animations/example/lib/main.dart | 196 +++++++++++++--------- 1 file changed, 116 insertions(+), 80 deletions(-) diff --git a/packages/animations/example/lib/main.dart b/packages/animations/example/lib/main.dart index 55f974ca65c1..b5bd932c3356 100644 --- a/packages/animations/example/lib/main.dart +++ b/packages/animations/example/lib/main.dart @@ -64,17 +64,115 @@ class _SharedAxisTransitionDemo extends StatefulWidget { class __SharedAxisTransitionDemoState extends State<_SharedAxisTransitionDemo> { SharedAxisTransitionType transitionType = SharedAxisTransitionType.horizontal; + @override + Widget build(BuildContext context) { + return MaterialApp( + theme: ThemeData( + pageTransitionsTheme: PageTransitionsTheme( + builders: { + TargetPlatform.android: SharedAxisPageTransitionsBuilder( + transitionType: transitionType, + ), + }, + ), + ), + home: _SignInPage( + transitionType: transitionType, + updateTransitionType: updateTransitionType, + ), + ); + } + + void updateTransitionType(SharedAxisTransitionType newType) { + setState(() { + transitionType = newType; + }); + } +} + +class _SignInPage extends StatelessWidget { + const _SignInPage({ + this.transitionType, + this.updateTransitionType, + }); + + final SharedAxisTransitionType transitionType; + + final Function updateTransitionType; + @override Widget build(BuildContext context) { return Scaffold( + resizeToAvoidBottomPadding: false, appBar: AppBar(title: const Text('Shared Axis Transition')), body: LayoutBuilder( builder: (BuildContext context, BoxConstraints constraints) { - return Column( + return ListView( children: [ SizedBox( height: constraints.maxHeight - 120, - child: _SignInPage(), + child: Column( + children: [ + const Padding(padding: EdgeInsets.symmetric(vertical: 35.0)), + CircleAvatar( + radius: 28.0, + backgroundColor: Colors.black54, + child: Text( + 'DP', + style: TextStyle( + fontSize: 20.0, + color: Colors.white, + ), + ), + ), + const Padding(padding: EdgeInsets.symmetric(vertical: 8.0)), + Text( + 'Hi David Park', + style: Theme.of(context).textTheme.headline, + ), + const Padding(padding: EdgeInsets.symmetric(vertical: 8.0)), + Text( + 'Sign in with your account', + style: TextStyle( + fontSize: 12.0, + color: Colors.grey, + ), + ), + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const Padding( + padding: EdgeInsets.only( + top: 40.0, + left: 15.0, + right: 15.0, + bottom: 10.0, + ), + child: TextField( + decoration: InputDecoration( + labelText: 'Email or phone number', + border: OutlineInputBorder(), + ), + ), + ), + Padding( + padding: const EdgeInsets.only(left: 10.0), + child: FlatButton( + onPressed: () {}, + child: const Text('FORGOT EMAIL?'), + ), + ), + Padding( + padding: const EdgeInsets.only(left: 10.0), + child: FlatButton( + onPressed: () {}, + child: const Text('CREATE ACCOUNT'), + ), + ), + ], + ), + ], + ), ), Padding( padding: const EdgeInsets.symmetric( @@ -88,7 +186,19 @@ class __SharedAxisTransitionDemoState extends State<_SharedAxisTransitionDemo> { child: Text('BACK'), ), RaisedButton( - onPressed: () {}, + onPressed: () { + Navigator.push( + context, + MaterialPageRoute( + builder: (BuildContext context) { + return _SignInPage( + transitionType: transitionType, + updateTransitionType: updateTransitionType, + ); + } + ), + ); + }, child: const Text('NEXT'), ), ], @@ -102,9 +212,7 @@ class __SharedAxisTransitionDemoState extends State<_SharedAxisTransitionDemo> { value: SharedAxisTransitionType.horizontal, groupValue: transitionType, onChanged: (SharedAxisTransitionType newValue) { - setState(() { - transitionType = newValue; - }); + updateTransitionType(newValue); }, ), const Text('X'), @@ -112,9 +220,7 @@ class __SharedAxisTransitionDemoState extends State<_SharedAxisTransitionDemo> { value: SharedAxisTransitionType.vertical, groupValue: transitionType, onChanged: (SharedAxisTransitionType newValue) { - setState(() { - transitionType = newValue; - }); + updateTransitionType(newValue); }, ), const Text('Y'), @@ -122,9 +228,7 @@ class __SharedAxisTransitionDemoState extends State<_SharedAxisTransitionDemo> { value: SharedAxisTransitionType.scaled, groupValue: transitionType, onChanged: (SharedAxisTransitionType newValue) { - setState(() { - transitionType = newValue; - }); + updateTransitionType(newValue); }, ), const Text('Z'), @@ -136,72 +240,4 @@ class __SharedAxisTransitionDemoState extends State<_SharedAxisTransitionDemo> { ), ); } -} - -class _SignInPage extends StatelessWidget { - @override - Widget build(BuildContext context) { - return Column( - children: [ - const Padding(padding: EdgeInsets.symmetric(vertical: 35.0)), - CircleAvatar( - radius: 28.0, - backgroundColor: Colors.black54, - child: Text( - 'DP', - style: TextStyle( - fontSize: 20.0, - color: Colors.white, - ), - ), - ), - const Padding(padding: EdgeInsets.symmetric(vertical: 8.0)), - Text( - 'Hi David Park', - style: Theme.of(context).textTheme.headline, - ), - const Padding(padding: EdgeInsets.symmetric(vertical: 8.0)), - Text( - 'Sign in with your account', - style: TextStyle( - fontSize: 12.0, - color: Colors.grey, - ), - ), - Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - const Padding( - padding: EdgeInsets.only( - top: 40.0, - left: 15.0, - right: 15.0, - bottom: 10.0, - ), - child: TextField( - decoration: InputDecoration( - labelText: 'Email or phone number', - border: OutlineInputBorder(), - ), - ), - ), - Padding( - padding: const EdgeInsets.only(left: 10.0), - child: FlatButton( - onPressed: () {}, - child: const Text('FORGOT EMAIL?'), - ), - ), - Padding( - padding: const EdgeInsets.only(left: 10.0), - child: FlatButton( - onPressed: () {}, - child: const Text('CREATE ACCOUNT'), - ), - ), - ], - ), - ], - ); - } } \ No newline at end of file From 5b5470f19ddae149a63c0aa2a999159540c8f05b Mon Sep 17 00:00:00 2001 From: Shi Hao Hong Date: Tue, 14 Jan 2020 16:57:32 -0800 Subject: [PATCH 03/17] Implement working example; TODO: fill out coursepage --- packages/animations/example/lib/main.dart | 120 ++++++++++++++++++++-- 1 file changed, 111 insertions(+), 9 deletions(-) diff --git a/packages/animations/example/lib/main.dart b/packages/animations/example/lib/main.dart index b5bd932c3356..9deb700be45f 100644 --- a/packages/animations/example/lib/main.dart +++ b/packages/animations/example/lib/main.dart @@ -80,6 +80,28 @@ class __SharedAxisTransitionDemoState extends State<_SharedAxisTransitionDemo> { transitionType: transitionType, updateTransitionType: updateTransitionType, ), + onGenerateRoute: (RouteSettings settings) { + if (settings.name == '/') { + return MaterialPageRoute( + builder: (BuildContext context) { + return _SignInPage( + transitionType: transitionType, + updateTransitionType: updateTransitionType, + ); + } + ); + } else if (settings.name == '/coursepage') { + return MaterialPageRoute( + builder: (BuildContext context) { + return _CoursePage( + transitionType: transitionType, + updateTransitionType: updateTransitionType, + ); + } + ); + } + return null; + }, ); } @@ -90,6 +112,93 @@ class __SharedAxisTransitionDemoState extends State<_SharedAxisTransitionDemo> { } } +class _CoursePage extends StatelessWidget { + const _CoursePage({ + this.transitionType, + this.updateTransitionType, + }); + + final SharedAxisTransitionType transitionType; + + final Function updateTransitionType; + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar(title: const Text('Shared Axis Transition')), + body: LayoutBuilder( + builder: (BuildContext context, BoxConstraints constraints) { + return ListView( + children: [ + SizedBox( + height: constraints.maxHeight - 120, + child: Column( + children: [ + Text( + 'Hello World', + style: Theme.of(context).textTheme.headline, + ), + ], + ), + ), + Padding( + padding: const EdgeInsets.symmetric( + horizontal: 15.0, + ), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + FlatButton( + onPressed: () { + Navigator.of(context).pop(); + }, + child: const Text('BACK'), + ), + const RaisedButton( + onPressed: null, + child: Text('NEXT'), + ), + ], + ), + ), + const Divider(thickness: 2.0), + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Radio( + value: SharedAxisTransitionType.horizontal, + groupValue: transitionType, + onChanged: (SharedAxisTransitionType newValue) { + updateTransitionType(newValue); + }, + ), + const Text('X'), + Radio( + value: SharedAxisTransitionType.vertical, + groupValue: transitionType, + onChanged: (SharedAxisTransitionType newValue) { + updateTransitionType(newValue); + }, + ), + const Text('Y'), + Radio( + value: SharedAxisTransitionType.scaled, + groupValue: transitionType, + onChanged: (SharedAxisTransitionType newValue) { + updateTransitionType(newValue); + }, + ), + const Text('Z'), + ], + ), + ], + ); + }, + ), + ); + } +} + class _SignInPage extends StatelessWidget { const _SignInPage({ this.transitionType, @@ -187,16 +296,9 @@ class _SignInPage extends StatelessWidget { ), RaisedButton( onPressed: () { - Navigator.push( + Navigator.pushNamed( context, - MaterialPageRoute( - builder: (BuildContext context) { - return _SignInPage( - transitionType: transitionType, - updateTransitionType: updateTransitionType, - ); - } - ), + '/coursepage', ); }, child: const Text('NEXT'), From a3d6cbc9396c0f58aa3db96a72f879c4013c74d3 Mon Sep 17 00:00:00 2001 From: Shi Hao Hong Date: Tue, 14 Jan 2020 17:34:31 -0800 Subject: [PATCH 04/17] Code cleanup --- packages/animations/example/lib/main.dart | 60 +++++++++++++++++++++-- 1 file changed, 55 insertions(+), 5 deletions(-) diff --git a/packages/animations/example/lib/main.dart b/packages/animations/example/lib/main.dart index 9deb700be45f..702e841e694b 100644 --- a/packages/animations/example/lib/main.dart +++ b/packages/animations/example/lib/main.dart @@ -4,7 +4,9 @@ import 'package:flutter/material.dart'; import 'package:animations/animations.dart'; void main() => runApp(MaterialApp( - theme: ThemeData( + theme: ThemeData.from( + colorScheme: const ColorScheme.light(), + ).copyWith( pageTransitionsTheme: const PageTransitionsTheme( builders: { TargetPlatform.android: ZoomPageTransitionsBuilder(), @@ -67,7 +69,9 @@ class __SharedAxisTransitionDemoState extends State<_SharedAxisTransitionDemo> { @override Widget build(BuildContext context) { return MaterialApp( - theme: ThemeData( + theme: ThemeData.from( + colorScheme: const ColorScheme.light(), + ).copyWith( pageTransitionsTheme: PageTransitionsTheme( builders: { TargetPlatform.android: SharedAxisPageTransitionsBuilder( @@ -134,10 +138,26 @@ class _CoursePage extends StatelessWidget { height: constraints.maxHeight - 120, child: Column( children: [ + const Padding(padding: EdgeInsets.symmetric(vertical: 8.0)), Text( - 'Hello World', + 'Streamling your courses', style: Theme.of(context).textTheme.headline, ), + const Padding(padding: EdgeInsets.symmetric(vertical: 5.0)), + Text( + 'Bundled categories appear as groups in your feed.' + 'You can always change this later', + style: TextStyle( + fontSize: 12.0, + color: Colors.grey, + ), + textAlign: TextAlign.center, + ), + const _CourseSwitch(course: 'Arts & Crafts'), + const _CourseSwitch(course: 'Business'), + const _CourseSwitch(course: 'Illustration'), + const _CourseSwitch(course: 'Design'), + const _CourseSwitch(course: 'Culinary'), ], ), ), @@ -199,6 +219,35 @@ class _CoursePage extends StatelessWidget { } } +class _CourseSwitch extends StatefulWidget { + const _CourseSwitch({ + this.course, + }); + + final String course; + + @override + __CourseSwitchState createState() => __CourseSwitchState(); +} + +class __CourseSwitchState extends State<_CourseSwitch> { + bool value = true; + + @override + Widget build(BuildContext context) { + return SwitchListTile( + title: Text(widget.course), + subtitle: value ? const Text('Bundled') : const Text('Shown Individually'), + value: value, + onChanged: (bool newValue) { + setState(() { + value = newValue; + }); + }, + ); + } +} + class _SignInPage extends StatelessWidget { const _SignInPage({ this.transitionType, @@ -226,7 +275,7 @@ class _SignInPage extends StatelessWidget { CircleAvatar( radius: 28.0, backgroundColor: Colors.black54, - child: Text( + child: const Text( 'DP', style: TextStyle( fontSize: 20.0, @@ -259,6 +308,7 @@ class _SignInPage extends StatelessWidget { ), child: TextField( decoration: InputDecoration( + isDense: true, labelText: 'Email or phone number', border: OutlineInputBorder(), ), @@ -342,4 +392,4 @@ class _SignInPage extends StatelessWidget { ), ); } -} \ No newline at end of file +} From cb8cb265cf180ea77dc47e46e85dcb93d882b2ec Mon Sep 17 00:00:00 2001 From: Shi Hao Hong Date: Tue, 14 Jan 2020 18:56:10 -0800 Subject: [PATCH 05/17] Code cleanup --- packages/animations/example/lib/main.dart | 382 ++---------------- .../shared_axis_transition.dart | 337 +++++++++++++++ 2 files changed, 370 insertions(+), 349 deletions(-) create mode 100644 packages/animations/example/lib/shared_axis_transition/shared_axis_transition.dart diff --git a/packages/animations/example/lib/main.dart b/packages/animations/example/lib/main.dart index 702e841e694b..ed648f56868e 100644 --- a/packages/animations/example/lib/main.dart +++ b/packages/animations/example/lib/main.dart @@ -1,7 +1,6 @@ -import 'package:flutter/widgets.dart'; import 'package:flutter/material.dart'; -import 'package:animations/animations.dart'; +import 'shared_axis_transition/shared_axis_transition.dart'; void main() => runApp(MaterialApp( theme: ThemeData.from( @@ -23,34 +22,16 @@ class _TransitionsHomePage extends StatelessWidget { appBar: AppBar(title: const Text('Material Transitions')), body: Column( children: [ - ListTile( - contentPadding: const EdgeInsets.symmetric( - vertical: 10.0, - horizontal: 15.0, - ), - leading: Container( - width: 40.0, - height: 40.0, - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(20.0), - border: Border.all( - color: Colors.black54, - ), - ), - child: Icon( - Icons.play_arrow, - size: 35, - ), - ), + _TransitionListTile( + title: 'Shared Axis', + subtitle: 'Page transition where outgoing and incoming elements share a fade transition', onTap: () { Navigator.of(context).push( MaterialPageRoute( - builder: (BuildContext context) => _SharedAxisTransitionDemo(), + builder: (BuildContext context) => SharedAxisTransitionDemo(), ), ); }, - title: const Text('Shared Axis'), - subtitle: const Text('Page transition where outgoing and incoming elements share a fade transition'), ), ], ), @@ -58,338 +39,41 @@ class _TransitionsHomePage extends StatelessWidget { } } -class _SharedAxisTransitionDemo extends StatefulWidget { - @override - __SharedAxisTransitionDemoState createState() => __SharedAxisTransitionDemoState(); -} - -class __SharedAxisTransitionDemoState extends State<_SharedAxisTransitionDemo> { - SharedAxisTransitionType transitionType = SharedAxisTransitionType.horizontal; - - @override - Widget build(BuildContext context) { - return MaterialApp( - theme: ThemeData.from( - colorScheme: const ColorScheme.light(), - ).copyWith( - pageTransitionsTheme: PageTransitionsTheme( - builders: { - TargetPlatform.android: SharedAxisPageTransitionsBuilder( - transitionType: transitionType, - ), - }, - ), - ), - home: _SignInPage( - transitionType: transitionType, - updateTransitionType: updateTransitionType, - ), - onGenerateRoute: (RouteSettings settings) { - if (settings.name == '/') { - return MaterialPageRoute( - builder: (BuildContext context) { - return _SignInPage( - transitionType: transitionType, - updateTransitionType: updateTransitionType, - ); - } - ); - } else if (settings.name == '/coursepage') { - return MaterialPageRoute( - builder: (BuildContext context) { - return _CoursePage( - transitionType: transitionType, - updateTransitionType: updateTransitionType, - ); - } - ); - } - return null; - }, - ); - } - - void updateTransitionType(SharedAxisTransitionType newType) { - setState(() { - transitionType = newType; - }); - } -} - -class _CoursePage extends StatelessWidget { - const _CoursePage({ - this.transitionType, - this.updateTransitionType, +class _TransitionListTile extends StatelessWidget { + const _TransitionListTile({ + this.onTap, + this.title, + this.subtitle, }); - final SharedAxisTransitionType transitionType; - - final Function updateTransitionType; + final Function onTap; + final String title; + final String subtitle; @override Widget build(BuildContext context) { - return Scaffold( - appBar: AppBar(title: const Text('Shared Axis Transition')), - body: LayoutBuilder( - builder: (BuildContext context, BoxConstraints constraints) { - return ListView( - children: [ - SizedBox( - height: constraints.maxHeight - 120, - child: Column( - children: [ - const Padding(padding: EdgeInsets.symmetric(vertical: 8.0)), - Text( - 'Streamling your courses', - style: Theme.of(context).textTheme.headline, - ), - const Padding(padding: EdgeInsets.symmetric(vertical: 5.0)), - Text( - 'Bundled categories appear as groups in your feed.' - 'You can always change this later', - style: TextStyle( - fontSize: 12.0, - color: Colors.grey, - ), - textAlign: TextAlign.center, - ), - const _CourseSwitch(course: 'Arts & Crafts'), - const _CourseSwitch(course: 'Business'), - const _CourseSwitch(course: 'Illustration'), - const _CourseSwitch(course: 'Design'), - const _CourseSwitch(course: 'Culinary'), - ], - ), - ), - Padding( - padding: const EdgeInsets.symmetric( - horizontal: 15.0, - ), - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - FlatButton( - onPressed: () { - Navigator.of(context).pop(); - }, - child: const Text('BACK'), - ), - const RaisedButton( - onPressed: null, - child: Text('NEXT'), - ), - ], - ), - ), - const Divider(thickness: 2.0), - Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Radio( - value: SharedAxisTransitionType.horizontal, - groupValue: transitionType, - onChanged: (SharedAxisTransitionType newValue) { - updateTransitionType(newValue); - }, - ), - const Text('X'), - Radio( - value: SharedAxisTransitionType.vertical, - groupValue: transitionType, - onChanged: (SharedAxisTransitionType newValue) { - updateTransitionType(newValue); - }, - ), - const Text('Y'), - Radio( - value: SharedAxisTransitionType.scaled, - groupValue: transitionType, - onChanged: (SharedAxisTransitionType newValue) { - updateTransitionType(newValue); - }, - ), - const Text('Z'), - ], - ), - ], - ); - }, + return ListTile( + contentPadding: const EdgeInsets.symmetric( + vertical: 10.0, + horizontal: 15.0, ), - ); - } -} - -class _CourseSwitch extends StatefulWidget { - const _CourseSwitch({ - this.course, - }); - - final String course; - - @override - __CourseSwitchState createState() => __CourseSwitchState(); -} - -class __CourseSwitchState extends State<_CourseSwitch> { - bool value = true; - - @override - Widget build(BuildContext context) { - return SwitchListTile( - title: Text(widget.course), - subtitle: value ? const Text('Bundled') : const Text('Shown Individually'), - value: value, - onChanged: (bool newValue) { - setState(() { - value = newValue; - }); - }, - ); - } -} - -class _SignInPage extends StatelessWidget { - const _SignInPage({ - this.transitionType, - this.updateTransitionType, - }); - - final SharedAxisTransitionType transitionType; - - final Function updateTransitionType; - - @override - Widget build(BuildContext context) { - return Scaffold( - resizeToAvoidBottomPadding: false, - appBar: AppBar(title: const Text('Shared Axis Transition')), - body: LayoutBuilder( - builder: (BuildContext context, BoxConstraints constraints) { - return ListView( - children: [ - SizedBox( - height: constraints.maxHeight - 120, - child: Column( - children: [ - const Padding(padding: EdgeInsets.symmetric(vertical: 35.0)), - CircleAvatar( - radius: 28.0, - backgroundColor: Colors.black54, - child: const Text( - 'DP', - style: TextStyle( - fontSize: 20.0, - color: Colors.white, - ), - ), - ), - const Padding(padding: EdgeInsets.symmetric(vertical: 8.0)), - Text( - 'Hi David Park', - style: Theme.of(context).textTheme.headline, - ), - const Padding(padding: EdgeInsets.symmetric(vertical: 8.0)), - Text( - 'Sign in with your account', - style: TextStyle( - fontSize: 12.0, - color: Colors.grey, - ), - ), - Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - const Padding( - padding: EdgeInsets.only( - top: 40.0, - left: 15.0, - right: 15.0, - bottom: 10.0, - ), - child: TextField( - decoration: InputDecoration( - isDense: true, - labelText: 'Email or phone number', - border: OutlineInputBorder(), - ), - ), - ), - Padding( - padding: const EdgeInsets.only(left: 10.0), - child: FlatButton( - onPressed: () {}, - child: const Text('FORGOT EMAIL?'), - ), - ), - Padding( - padding: const EdgeInsets.only(left: 10.0), - child: FlatButton( - onPressed: () {}, - child: const Text('CREATE ACCOUNT'), - ), - ), - ], - ), - ], - ), - ), - Padding( - padding: const EdgeInsets.symmetric( - horizontal: 15.0, - ), - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - const FlatButton( - onPressed: null, - child: Text('BACK'), - ), - RaisedButton( - onPressed: () { - Navigator.pushNamed( - context, - '/coursepage', - ); - }, - child: const Text('NEXT'), - ), - ], - ), - ), - const Divider(thickness: 2.0), - Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Radio( - value: SharedAxisTransitionType.horizontal, - groupValue: transitionType, - onChanged: (SharedAxisTransitionType newValue) { - updateTransitionType(newValue); - }, - ), - const Text('X'), - Radio( - value: SharedAxisTransitionType.vertical, - groupValue: transitionType, - onChanged: (SharedAxisTransitionType newValue) { - updateTransitionType(newValue); - }, - ), - const Text('Y'), - Radio( - value: SharedAxisTransitionType.scaled, - groupValue: transitionType, - onChanged: (SharedAxisTransitionType newValue) { - updateTransitionType(newValue); - }, - ), - const Text('Z'), - ], - ), - ], - ); - }, + leading: Container( + width: 40.0, + height: 40.0, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(20.0), + border: Border.all( + color: Colors.black54, + ), + ), + child: Icon( + Icons.play_arrow, + size: 35, + ), ), + onTap: onTap, + title: Text(title), + subtitle: Text(subtitle), ); } } diff --git a/packages/animations/example/lib/shared_axis_transition/shared_axis_transition.dart b/packages/animations/example/lib/shared_axis_transition/shared_axis_transition.dart new file mode 100644 index 000000000000..766815d03c96 --- /dev/null +++ b/packages/animations/example/lib/shared_axis_transition/shared_axis_transition.dart @@ -0,0 +1,337 @@ +import 'package:flutter/material.dart'; +import 'package:animations/animations.dart'; + +/// The demo page for [SharedAxisPageTransitionsBuilder]. +class SharedAxisTransitionDemo extends StatefulWidget { + @override + _SharedAxisTransitionDemoState createState() => _SharedAxisTransitionDemoState(); +} + +class _SharedAxisTransitionDemoState extends State { + SharedAxisTransitionType transitionType = SharedAxisTransitionType.horizontal; + + @override + Widget build(BuildContext context) { + return MaterialApp( + theme: ThemeData.from( + colorScheme: const ColorScheme.light(), + ).copyWith( + pageTransitionsTheme: PageTransitionsTheme( + builders: { + TargetPlatform.android: SharedAxisPageTransitionsBuilder( + transitionType: transitionType, + ), + }, + ), + ), + home: _SignInPage( + transitionType: transitionType, + updateTransitionType: updateTransitionType, + ), + onGenerateRoute: (RouteSettings settings) { + if (settings.name == '/') { + return MaterialPageRoute( + builder: (BuildContext context) { + return _SignInPage( + transitionType: transitionType, + updateTransitionType: updateTransitionType, + ); + } + ); + } else if (settings.name == '/coursepage') { + return MaterialPageRoute( + builder: (BuildContext context) { + return _CoursePage( + transitionType: transitionType, + updateTransitionType: updateTransitionType, + ); + } + ); + } + return null; + }, + ); + } + + void updateTransitionType(SharedAxisTransitionType newType) { + setState(() { + transitionType = newType; + }); + } +} + +class _CoursePage extends StatelessWidget { + const _CoursePage({ + this.transitionType, + this.updateTransitionType, + }); + + final SharedAxisTransitionType transitionType; + final Function updateTransitionType; + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar(title: const Text('Shared Axis Transition')), + body: LayoutBuilder( + builder: (BuildContext context, BoxConstraints constraints) { + return ListView( + children: [ + SizedBox( + height: constraints.maxHeight - 120, + child: Column( + children: [ + const Padding(padding: EdgeInsets.symmetric(vertical: 8.0)), + Text( + 'Streamling your courses', + style: Theme.of(context).textTheme.headline, + ), + const Padding(padding: EdgeInsets.symmetric(vertical: 5.0)), + Text( + 'Bundled categories appear as groups in your feed.' + 'You can always change this later', + style: TextStyle( + fontSize: 12.0, + color: Colors.grey, + ), + textAlign: TextAlign.center, + ), + const _CourseSwitch(course: 'Arts & Crafts'), + const _CourseSwitch(course: 'Business'), + const _CourseSwitch(course: 'Illustration'), + const _CourseSwitch(course: 'Design'), + const _CourseSwitch(course: 'Culinary'), + ], + ), + ), + Padding( + padding: const EdgeInsets.symmetric( + horizontal: 15.0, + ), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + FlatButton( + onPressed: () { + Navigator.of(context).pop(); + }, + child: const Text('BACK'), + ), + const RaisedButton( + onPressed: null, + child: Text('NEXT'), + ), + ], + ), + ), + const Divider(thickness: 2.0), + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Radio( + value: SharedAxisTransitionType.horizontal, + groupValue: transitionType, + onChanged: (SharedAxisTransitionType newValue) { + updateTransitionType(newValue); + }, + ), + const Text('X'), + Radio( + value: SharedAxisTransitionType.vertical, + groupValue: transitionType, + onChanged: (SharedAxisTransitionType newValue) { + updateTransitionType(newValue); + }, + ), + const Text('Y'), + Radio( + value: SharedAxisTransitionType.scaled, + groupValue: transitionType, + onChanged: (SharedAxisTransitionType newValue) { + updateTransitionType(newValue); + }, + ), + const Text('Z'), + ], + ), + ], + ); + }, + ), + ); + } +} + +class _CourseSwitch extends StatefulWidget { + const _CourseSwitch({ + this.course, + }); + + final String course; + + @override + __CourseSwitchState createState() => __CourseSwitchState(); +} + +class __CourseSwitchState extends State<_CourseSwitch> { + bool value = true; + + @override + Widget build(BuildContext context) { + return SwitchListTile( + title: Text(widget.course), + subtitle: value ? const Text('Bundled') : const Text('Shown Individually'), + value: value, + onChanged: (bool newValue) { + setState(() { + value = newValue; + }); + }, + ); + } +} + +class _SignInPage extends StatelessWidget { + const _SignInPage({ + this.transitionType, + this.updateTransitionType, + }); + + final SharedAxisTransitionType transitionType; + final Function updateTransitionType; + + @override + Widget build(BuildContext context) { + return Scaffold( + resizeToAvoidBottomPadding: false, + appBar: AppBar(title: const Text('Shared Axis Transition')), + body: LayoutBuilder( + builder: (BuildContext context, BoxConstraints constraints) { + return ListView( + children: [ + SizedBox( + height: constraints.maxHeight - 120, + child: Column( + children: [ + const Padding(padding: EdgeInsets.symmetric(vertical: 35.0)), + CircleAvatar( + radius: 28.0, + backgroundColor: Colors.black54, + child: const Text( + 'DP', + style: TextStyle( + fontSize: 20.0, + color: Colors.white, + ), + ), + ), + const Padding(padding: EdgeInsets.symmetric(vertical: 8.0)), + Text( + 'Hi David Park', + style: Theme.of(context).textTheme.headline, + ), + const Padding(padding: EdgeInsets.symmetric(vertical: 8.0)), + Text( + 'Sign in with your account', + style: TextStyle( + fontSize: 12.0, + color: Colors.grey, + ), + ), + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const Padding( + padding: EdgeInsets.only( + top: 40.0, + left: 15.0, + right: 15.0, + bottom: 10.0, + ), + child: TextField( + decoration: InputDecoration( + isDense: true, + labelText: 'Email or phone number', + border: OutlineInputBorder(), + ), + ), + ), + Padding( + padding: const EdgeInsets.only(left: 10.0), + child: FlatButton( + onPressed: () {}, + child: const Text('FORGOT EMAIL?'), + ), + ), + Padding( + padding: const EdgeInsets.only(left: 10.0), + child: FlatButton( + onPressed: () {}, + child: const Text('CREATE ACCOUNT'), + ), + ), + ], + ), + ], + ), + ), + Padding( + padding: const EdgeInsets.symmetric( + horizontal: 15.0, + ), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + const FlatButton( + onPressed: null, + child: Text('BACK'), + ), + RaisedButton( + onPressed: () { + Navigator.pushNamed( + context, + '/coursepage', + ); + }, + child: const Text('NEXT'), + ), + ], + ), + ), + const Divider(thickness: 2.0), + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Radio( + value: SharedAxisTransitionType.horizontal, + groupValue: transitionType, + onChanged: (SharedAxisTransitionType newValue) { + updateTransitionType(newValue); + }, + ), + const Text('X'), + Radio( + value: SharedAxisTransitionType.vertical, + groupValue: transitionType, + onChanged: (SharedAxisTransitionType newValue) { + updateTransitionType(newValue); + }, + ), + const Text('Y'), + Radio( + value: SharedAxisTransitionType.scaled, + groupValue: transitionType, + onChanged: (SharedAxisTransitionType newValue) { + updateTransitionType(newValue); + }, + ), + const Text('Z'), + ], + ), + ], + ); + }, + ), + ); + } +} From 45e590e7da3940c242bbe1f36fd512551fdd20e3 Mon Sep 17 00:00:00 2001 From: Shi Hao Hong Date: Wed, 15 Jan 2020 09:58:49 -0800 Subject: [PATCH 06/17] Refactor to use PageTransitionSwitcher --- .../shared_axis_transition.dart | 336 ++++++------------ 1 file changed, 118 insertions(+), 218 deletions(-) diff --git a/packages/animations/example/lib/shared_axis_transition/shared_axis_transition.dart b/packages/animations/example/lib/shared_axis_transition/shared_axis_transition.dart index 766815d03c96..2c90a1daf08f 100644 --- a/packages/animations/example/lib/shared_axis_transition/shared_axis_transition.dart +++ b/packages/animations/example/lib/shared_axis_transition/shared_axis_transition.dart @@ -8,66 +8,23 @@ class SharedAxisTransitionDemo extends StatefulWidget { } class _SharedAxisTransitionDemoState extends State { - SharedAxisTransitionType transitionType = SharedAxisTransitionType.horizontal; + final Key coursePageKey = const Key('Course Page'); + final Key signInPageKey = const Key('Sign In Page'); - @override - Widget build(BuildContext context) { - return MaterialApp( - theme: ThemeData.from( - colorScheme: const ColorScheme.light(), - ).copyWith( - pageTransitionsTheme: PageTransitionsTheme( - builders: { - TargetPlatform.android: SharedAxisPageTransitionsBuilder( - transitionType: transitionType, - ), - }, - ), - ), - home: _SignInPage( - transitionType: transitionType, - updateTransitionType: updateTransitionType, - ), - onGenerateRoute: (RouteSettings settings) { - if (settings.name == '/') { - return MaterialPageRoute( - builder: (BuildContext context) { - return _SignInPage( - transitionType: transitionType, - updateTransitionType: updateTransitionType, - ); - } - ); - } else if (settings.name == '/coursepage') { - return MaterialPageRoute( - builder: (BuildContext context) { - return _CoursePage( - transitionType: transitionType, - updateTransitionType: updateTransitionType, - ); - } - ); - } - return null; - }, - ); - } + SharedAxisTransitionType transitionType = SharedAxisTransitionType.horizontal; + bool isLoggedIn = false; void updateTransitionType(SharedAxisTransitionType newType) { setState(() { transitionType = newType; }); } -} -class _CoursePage extends StatelessWidget { - const _CoursePage({ - this.transitionType, - this.updateTransitionType, - }); - - final SharedAxisTransitionType transitionType; - final Function updateTransitionType; + void toggleLoginStatus() { + setState(() { + isLoggedIn = !isLoggedIn; + }); + } @override Widget build(BuildContext context) { @@ -79,47 +36,36 @@ class _CoursePage extends StatelessWidget { children: [ SizedBox( height: constraints.maxHeight - 120, - child: Column( - children: [ - const Padding(padding: EdgeInsets.symmetric(vertical: 8.0)), - Text( - 'Streamling your courses', - style: Theme.of(context).textTheme.headline, - ), - const Padding(padding: EdgeInsets.symmetric(vertical: 5.0)), - Text( - 'Bundled categories appear as groups in your feed.' - 'You can always change this later', - style: TextStyle( - fontSize: 12.0, - color: Colors.grey, - ), - textAlign: TextAlign.center, - ), - const _CourseSwitch(course: 'Arts & Crafts'), - const _CourseSwitch(course: 'Business'), - const _CourseSwitch(course: 'Illustration'), - const _CourseSwitch(course: 'Design'), - const _CourseSwitch(course: 'Culinary'), - ], + child: PageTransitionSwitcher( + duration: const Duration(milliseconds: 300), + reverse: isLoggedIn, + transitionBuilder: ( + Widget child, + Animation animation, + Animation secondaryAnimation, + ) { + return SharedAxisTransition( + child: child, + animation: animation, + secondaryAnimation: secondaryAnimation, + transitionType: transitionType, + ); + }, + child: isLoggedIn ? _CoursePage() : _SignInPage(), ), ), Padding( - padding: const EdgeInsets.symmetric( - horizontal: 15.0, - ), + padding: const EdgeInsets.symmetric(horizontal: 15.0), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ FlatButton( - onPressed: () { - Navigator.of(context).pop(); - }, + onPressed: isLoggedIn ? toggleLoginStatus : null, child: const Text('BACK'), ), - const RaisedButton( - onPressed: null, - child: Text('NEXT'), + RaisedButton( + onPressed: isLoggedIn ? null : toggleLoginStatus, + child: const Text('NEXT'), ), ], ), @@ -162,6 +108,36 @@ class _CoursePage extends StatelessWidget { } } +class _CoursePage extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Column( + children: [ + const Padding(padding: EdgeInsets.symmetric(vertical: 8.0)), + Text( + 'Streamling your courses', + style: Theme.of(context).textTheme.headline, + ), + const Padding(padding: EdgeInsets.symmetric(vertical: 5.0)), + Text( + 'Bundled categories appear as groups in your feed.' + 'You can always change this later', + style: TextStyle( + fontSize: 12.0, + color: Colors.grey, + ), + textAlign: TextAlign.center, + ), + const _CourseSwitch(course: 'Arts & Crafts'), + const _CourseSwitch(course: 'Business'), + const _CourseSwitch(course: 'Illustration'), + const _CourseSwitch(course: 'Design'), + const _CourseSwitch(course: 'Culinary'), + ], + ); + } +} + class _CourseSwitch extends StatefulWidget { const _CourseSwitch({ this.course, @@ -192,146 +168,70 @@ class __CourseSwitchState extends State<_CourseSwitch> { } class _SignInPage extends StatelessWidget { - const _SignInPage({ - this.transitionType, - this.updateTransitionType, - }); - - final SharedAxisTransitionType transitionType; - final Function updateTransitionType; - @override Widget build(BuildContext context) { - return Scaffold( - resizeToAvoidBottomPadding: false, - appBar: AppBar(title: const Text('Shared Axis Transition')), - body: LayoutBuilder( - builder: (BuildContext context, BoxConstraints constraints) { - return ListView( - children: [ - SizedBox( - height: constraints.maxHeight - 120, - child: Column( - children: [ - const Padding(padding: EdgeInsets.symmetric(vertical: 35.0)), - CircleAvatar( - radius: 28.0, - backgroundColor: Colors.black54, - child: const Text( - 'DP', - style: TextStyle( - fontSize: 20.0, - color: Colors.white, - ), - ), - ), - const Padding(padding: EdgeInsets.symmetric(vertical: 8.0)), - Text( - 'Hi David Park', - style: Theme.of(context).textTheme.headline, - ), - const Padding(padding: EdgeInsets.symmetric(vertical: 8.0)), - Text( - 'Sign in with your account', - style: TextStyle( - fontSize: 12.0, - color: Colors.grey, - ), - ), - Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - const Padding( - padding: EdgeInsets.only( - top: 40.0, - left: 15.0, - right: 15.0, - bottom: 10.0, - ), - child: TextField( - decoration: InputDecoration( - isDense: true, - labelText: 'Email or phone number', - border: OutlineInputBorder(), - ), - ), - ), - Padding( - padding: const EdgeInsets.only(left: 10.0), - child: FlatButton( - onPressed: () {}, - child: const Text('FORGOT EMAIL?'), - ), - ), - Padding( - padding: const EdgeInsets.only(left: 10.0), - child: FlatButton( - onPressed: () {}, - child: const Text('CREATE ACCOUNT'), - ), - ), - ], - ), - ], - ), + return Column( + children: [ + const Padding(padding: EdgeInsets.symmetric(vertical: 35.0)), + CircleAvatar( + radius: 28.0, + backgroundColor: Colors.black54, + child: const Text( + 'DP', + style: TextStyle( + fontSize: 20.0, + color: Colors.white, + ), + ), + ), + const Padding(padding: EdgeInsets.symmetric(vertical: 8.0)), + Text( + 'Hi David Park', + style: Theme.of(context).textTheme.headline, + ), + const Padding(padding: EdgeInsets.symmetric(vertical: 8.0)), + Text( + 'Sign in with your account', + style: TextStyle( + fontSize: 12.0, + color: Colors.grey, + ), + ), + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const Padding( + padding: EdgeInsets.only( + top: 40.0, + left: 15.0, + right: 15.0, + bottom: 10.0, ), - Padding( - padding: const EdgeInsets.symmetric( - horizontal: 15.0, - ), - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - const FlatButton( - onPressed: null, - child: Text('BACK'), - ), - RaisedButton( - onPressed: () { - Navigator.pushNamed( - context, - '/coursepage', - ); - }, - child: const Text('NEXT'), - ), - ], + child: TextField( + decoration: InputDecoration( + isDense: true, + labelText: 'Email or phone number', + border: OutlineInputBorder(), ), ), - const Divider(thickness: 2.0), - Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Radio( - value: SharedAxisTransitionType.horizontal, - groupValue: transitionType, - onChanged: (SharedAxisTransitionType newValue) { - updateTransitionType(newValue); - }, - ), - const Text('X'), - Radio( - value: SharedAxisTransitionType.vertical, - groupValue: transitionType, - onChanged: (SharedAxisTransitionType newValue) { - updateTransitionType(newValue); - }, - ), - const Text('Y'), - Radio( - value: SharedAxisTransitionType.scaled, - groupValue: transitionType, - onChanged: (SharedAxisTransitionType newValue) { - updateTransitionType(newValue); - }, - ), - const Text('Z'), - ], + ), + Padding( + padding: const EdgeInsets.only(left: 10.0), + child: FlatButton( + onPressed: () {}, + child: const Text('FORGOT EMAIL?'), ), - ], - ); - }, - ), + ), + Padding( + padding: const EdgeInsets.only(left: 10.0), + child: FlatButton( + onPressed: () {}, + child: const Text('CREATE ACCOUNT'), + ), + ), + ], + ), + ], ); } } From efe33f3782abbfb7358becb54bee479a84c1414b Mon Sep 17 00:00:00 2001 From: Shi Hao Hong Date: Wed, 15 Jan 2020 10:19:42 -0800 Subject: [PATCH 07/17] styling --- .../shared_axis_transition.dart | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/animations/example/lib/shared_axis_transition/shared_axis_transition.dart b/packages/animations/example/lib/shared_axis_transition/shared_axis_transition.dart index 2c90a1daf08f..8b18c11b536c 100644 --- a/packages/animations/example/lib/shared_axis_transition/shared_axis_transition.dart +++ b/packages/animations/example/lib/shared_axis_transition/shared_axis_transition.dart @@ -29,6 +29,7 @@ class _SharedAxisTransitionDemoState extends State { @override Widget build(BuildContext context) { return Scaffold( + resizeToAvoidBottomPadding: false, appBar: AppBar(title: const Text('Shared Axis Transition')), body: LayoutBuilder( builder: (BuildContext context, BoxConstraints constraints) { @@ -61,10 +62,14 @@ class _SharedAxisTransitionDemoState extends State { children: [ FlatButton( onPressed: isLoggedIn ? toggleLoginStatus : null, + textColor: Theme.of(context).colorScheme.primary, child: const Text('BACK'), ), RaisedButton( onPressed: isLoggedIn ? null : toggleLoginStatus, + color: Theme.of(context).colorScheme.primary, + textColor: Theme.of(context).colorScheme.onPrimary, + disabledColor: Colors.black12, child: const Text('NEXT'), ), ], @@ -209,6 +214,11 @@ class _SignInPage extends StatelessWidget { ), child: TextField( decoration: InputDecoration( + suffixIcon: Icon( + Icons.visibility, + size: 20, + color: Colors.black54, + ), isDense: true, labelText: 'Email or phone number', border: OutlineInputBorder(), @@ -219,6 +229,7 @@ class _SignInPage extends StatelessWidget { padding: const EdgeInsets.only(left: 10.0), child: FlatButton( onPressed: () {}, + textColor: Theme.of(context).colorScheme.primary, child: const Text('FORGOT EMAIL?'), ), ), @@ -226,6 +237,7 @@ class _SignInPage extends StatelessWidget { padding: const EdgeInsets.only(left: 10.0), child: FlatButton( onPressed: () {}, + textColor: Theme.of(context).colorScheme.primary, child: const Text('CREATE ACCOUNT'), ), ), From 96839d27e003d81494c4d36e5d028983fc01e7cb Mon Sep 17 00:00:00 2001 From: Shi Hao Hong Date: Wed, 15 Jan 2020 10:25:48 -0800 Subject: [PATCH 08/17] Formatting fixes --- packages/animations/example/lib/main.dart | 29 +++++++++++-------- .../shared_axis_transition.dart | 11 ++++--- 2 files changed, 24 insertions(+), 16 deletions(-) diff --git a/packages/animations/example/lib/main.dart b/packages/animations/example/lib/main.dart index ed648f56868e..4a5f3f98f3c0 100644 --- a/packages/animations/example/lib/main.dart +++ b/packages/animations/example/lib/main.dart @@ -2,18 +2,22 @@ import 'package:flutter/material.dart'; import 'shared_axis_transition/shared_axis_transition.dart'; -void main() => runApp(MaterialApp( - theme: ThemeData.from( - colorScheme: const ColorScheme.light(), - ).copyWith( - pageTransitionsTheme: const PageTransitionsTheme( - builders: { - TargetPlatform.android: ZoomPageTransitionsBuilder(), - }, +void main() { + runApp( + MaterialApp( + theme: ThemeData.from( + colorScheme: const ColorScheme.light(), + ).copyWith( + pageTransitionsTheme: const PageTransitionsTheme( + builders: { + TargetPlatform.android: ZoomPageTransitionsBuilder(), + }, + ), + ), + home: _TransitionsHomePage(), ), - ), - home: _TransitionsHomePage(), -)); + ); +} class _TransitionsHomePage extends StatelessWidget { @override @@ -24,7 +28,8 @@ class _TransitionsHomePage extends StatelessWidget { children: [ _TransitionListTile( title: 'Shared Axis', - subtitle: 'Page transition where outgoing and incoming elements share a fade transition', + subtitle: 'Page transition where outgoing and incoming ' + 'elements share a fade transition', onTap: () { Navigator.of(context).push( MaterialPageRoute( diff --git a/packages/animations/example/lib/shared_axis_transition/shared_axis_transition.dart b/packages/animations/example/lib/shared_axis_transition/shared_axis_transition.dart index 8b18c11b536c..899d8af1d2b7 100644 --- a/packages/animations/example/lib/shared_axis_transition/shared_axis_transition.dart +++ b/packages/animations/example/lib/shared_axis_transition/shared_axis_transition.dart @@ -4,7 +4,9 @@ import 'package:animations/animations.dart'; /// The demo page for [SharedAxisPageTransitionsBuilder]. class SharedAxisTransitionDemo extends StatefulWidget { @override - _SharedAxisTransitionDemoState createState() => _SharedAxisTransitionDemoState(); + _SharedAxisTransitionDemoState createState() { + return _SharedAxisTransitionDemoState(); + } } class _SharedAxisTransitionDemoState extends State { @@ -159,9 +161,10 @@ class __CourseSwitchState extends State<_CourseSwitch> { @override Widget build(BuildContext context) { + final String subtitle = value ? 'Bundled' : 'Shown Individually'; return SwitchListTile( title: Text(widget.course), - subtitle: value ? const Text('Bundled') : const Text('Shown Individually'), + subtitle: Text(subtitle), value: value, onChanged: (bool newValue) { setState(() { @@ -178,10 +181,10 @@ class _SignInPage extends StatelessWidget { return Column( children: [ const Padding(padding: EdgeInsets.symmetric(vertical: 35.0)), - CircleAvatar( + const CircleAvatar( radius: 28.0, backgroundColor: Colors.black54, - child: const Text( + child: Text( 'DP', style: TextStyle( fontSize: 20.0, From 3ebaa4df1bf17eb324704e0c103f9e5f378dc8c6 Mon Sep 17 00:00:00 2001 From: Shi Hao Hong Date: Wed, 15 Jan 2020 10:54:07 -0800 Subject: [PATCH 09/17] Code review feedback --- packages/animations/example/lib/main.dart | 4 + .../shared_axis_transition.dart | 166 +++++++++--------- 2 files changed, 85 insertions(+), 85 deletions(-) diff --git a/packages/animations/example/lib/main.dart b/packages/animations/example/lib/main.dart index 4a5f3f98f3c0..9f4b3817d85d 100644 --- a/packages/animations/example/lib/main.dart +++ b/packages/animations/example/lib/main.dart @@ -1,3 +1,7 @@ +// Copyright 2019 The Flutter Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + import 'package:flutter/material.dart'; import 'shared_axis_transition/shared_axis_transition.dart'; diff --git a/packages/animations/example/lib/shared_axis_transition/shared_axis_transition.dart b/packages/animations/example/lib/shared_axis_transition/shared_axis_transition.dart index 899d8af1d2b7..d5d79277a8d6 100644 --- a/packages/animations/example/lib/shared_axis_transition/shared_axis_transition.dart +++ b/packages/animations/example/lib/shared_axis_transition/shared_axis_transition.dart @@ -1,3 +1,7 @@ +// Copyright 2019 The Flutter Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + import 'package:flutter/material.dart'; import 'package:animations/animations.dart'; @@ -10,21 +14,18 @@ class SharedAxisTransitionDemo extends StatefulWidget { } class _SharedAxisTransitionDemoState extends State { - final Key coursePageKey = const Key('Course Page'); - final Key signInPageKey = const Key('Sign In Page'); - - SharedAxisTransitionType transitionType = SharedAxisTransitionType.horizontal; - bool isLoggedIn = false; + SharedAxisTransitionType _transitionType = SharedAxisTransitionType.horizontal; + bool _isLoggedIn = false; void updateTransitionType(SharedAxisTransitionType newType) { setState(() { - transitionType = newType; + _transitionType = newType; }); } void toggleLoginStatus() { setState(() { - isLoggedIn = !isLoggedIn; + _isLoggedIn = !_isLoggedIn; }); } @@ -33,83 +34,78 @@ class _SharedAxisTransitionDemoState extends State { return Scaffold( resizeToAvoidBottomPadding: false, appBar: AppBar(title: const Text('Shared Axis Transition')), - body: LayoutBuilder( - builder: (BuildContext context, BoxConstraints constraints) { - return ListView( - children: [ - SizedBox( - height: constraints.maxHeight - 120, - child: PageTransitionSwitcher( - duration: const Duration(milliseconds: 300), - reverse: isLoggedIn, - transitionBuilder: ( - Widget child, - Animation animation, - Animation secondaryAnimation, - ) { - return SharedAxisTransition( - child: child, - animation: animation, - secondaryAnimation: secondaryAnimation, - transitionType: transitionType, - ); - }, - child: isLoggedIn ? _CoursePage() : _SignInPage(), + body: Column( + children: [ + Expanded( + child: PageTransitionSwitcher( + duration: const Duration(milliseconds: 300), + reverse: _isLoggedIn, + transitionBuilder: ( + Widget child, + Animation animation, + Animation secondaryAnimation, + ) { + return SharedAxisTransition( + child: child, + animation: animation, + secondaryAnimation: secondaryAnimation, + transitionType: _transitionType, + ); + }, + child: _isLoggedIn ? _CoursePage() : _SignInPage(), + ), + ), + Padding( + padding: const EdgeInsets.symmetric(horizontal: 15.0), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + FlatButton( + onPressed: _isLoggedIn ? toggleLoginStatus : null, + textColor: Theme.of(context).colorScheme.primary, + child: const Text('BACK'), ), - ), - Padding( - padding: const EdgeInsets.symmetric(horizontal: 15.0), - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - FlatButton( - onPressed: isLoggedIn ? toggleLoginStatus : null, - textColor: Theme.of(context).colorScheme.primary, - child: const Text('BACK'), - ), - RaisedButton( - onPressed: isLoggedIn ? null : toggleLoginStatus, - color: Theme.of(context).colorScheme.primary, - textColor: Theme.of(context).colorScheme.onPrimary, - disabledColor: Colors.black12, - child: const Text('NEXT'), - ), - ], + RaisedButton( + onPressed: _isLoggedIn ? null : toggleLoginStatus, + color: Theme.of(context).colorScheme.primary, + textColor: Theme.of(context).colorScheme.onPrimary, + disabledColor: Colors.black12, + child: const Text('NEXT'), ), + ], + ), + ), + const Divider(thickness: 2.0), + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Radio( + value: SharedAxisTransitionType.horizontal, + groupValue: _transitionType, + onChanged: (SharedAxisTransitionType newValue) { + updateTransitionType(newValue); + }, ), - const Divider(thickness: 2.0), - Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Radio( - value: SharedAxisTransitionType.horizontal, - groupValue: transitionType, - onChanged: (SharedAxisTransitionType newValue) { - updateTransitionType(newValue); - }, - ), - const Text('X'), - Radio( - value: SharedAxisTransitionType.vertical, - groupValue: transitionType, - onChanged: (SharedAxisTransitionType newValue) { - updateTransitionType(newValue); - }, - ), - const Text('Y'), - Radio( - value: SharedAxisTransitionType.scaled, - groupValue: transitionType, - onChanged: (SharedAxisTransitionType newValue) { - updateTransitionType(newValue); - }, - ), - const Text('Z'), - ], + const Text('X'), + Radio( + value: SharedAxisTransitionType.vertical, + groupValue: _transitionType, + onChanged: (SharedAxisTransitionType newValue) { + updateTransitionType(newValue); + }, + ), + const Text('Y'), + Radio( + value: SharedAxisTransitionType.scaled, + groupValue: _transitionType, + onChanged: (SharedAxisTransitionType newValue) { + updateTransitionType(newValue); + }, ), + const Text('Z'), ], - ); - }, + ), + ], ), ); } @@ -153,22 +149,22 @@ class _CourseSwitch extends StatefulWidget { final String course; @override - __CourseSwitchState createState() => __CourseSwitchState(); + _CourseSwitchState createState() => _CourseSwitchState(); } -class __CourseSwitchState extends State<_CourseSwitch> { - bool value = true; +class _CourseSwitchState extends State<_CourseSwitch> { + bool _value = true; @override Widget build(BuildContext context) { - final String subtitle = value ? 'Bundled' : 'Shown Individually'; + final String subtitle = _value ? 'Bundled' : 'Shown Individually'; return SwitchListTile( title: Text(widget.course), subtitle: Text(subtitle), - value: value, + value: _value, onChanged: (bool newValue) { setState(() { - value = newValue; + _value = newValue; }); }, ); From 504d3e20fe6df1159395c13be78e14cc496437fe Mon Sep 17 00:00:00 2001 From: Shi Hao Hong Date: Wed, 15 Jan 2020 10:55:10 -0800 Subject: [PATCH 10/17] Fix unhappy formatter --- .../lib/shared_axis_transition/shared_axis_transition.dart | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/animations/example/lib/shared_axis_transition/shared_axis_transition.dart b/packages/animations/example/lib/shared_axis_transition/shared_axis_transition.dart index d5d79277a8d6..89ec6b7b9f62 100644 --- a/packages/animations/example/lib/shared_axis_transition/shared_axis_transition.dart +++ b/packages/animations/example/lib/shared_axis_transition/shared_axis_transition.dart @@ -14,7 +14,8 @@ class SharedAxisTransitionDemo extends StatefulWidget { } class _SharedAxisTransitionDemoState extends State { - SharedAxisTransitionType _transitionType = SharedAxisTransitionType.horizontal; + SharedAxisTransitionType _transitionType = + SharedAxisTransitionType.horizontal; bool _isLoggedIn = false; void updateTransitionType(SharedAxisTransitionType newType) { From 6adff2a4945db79d8d7654614362f11d23b4e028 Mon Sep 17 00:00:00 2001 From: Shi Hao Hong Date: Wed, 15 Jan 2020 11:06:16 -0800 Subject: [PATCH 11/17] Remove subdirectory --- packages/animations/example/lib/main.dart | 2 +- .../{shared_axis_transition => }/shared_axis_transition.dart | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename packages/animations/example/lib/{shared_axis_transition => }/shared_axis_transition.dart (100%) diff --git a/packages/animations/example/lib/main.dart b/packages/animations/example/lib/main.dart index 9f4b3817d85d..0844916731cd 100644 --- a/packages/animations/example/lib/main.dart +++ b/packages/animations/example/lib/main.dart @@ -4,7 +4,7 @@ import 'package:flutter/material.dart'; -import 'shared_axis_transition/shared_axis_transition.dart'; +import 'shared_axis_transition.dart'; void main() { runApp( diff --git a/packages/animations/example/lib/shared_axis_transition/shared_axis_transition.dart b/packages/animations/example/lib/shared_axis_transition.dart similarity index 100% rename from packages/animations/example/lib/shared_axis_transition/shared_axis_transition.dart rename to packages/animations/example/lib/shared_axis_transition.dart From d46e8d7c8926713cd7eb67d50c2a9ca600df24ce Mon Sep 17 00:00:00 2001 From: Shi Hao Hong Date: Wed, 15 Jan 2020 11:14:42 -0800 Subject: [PATCH 12/17] Make demo look less awkward with smaller devices --- .../example/lib/shared_axis_transition.dart | 148 ++++++++++-------- 1 file changed, 79 insertions(+), 69 deletions(-) diff --git a/packages/animations/example/lib/shared_axis_transition.dart b/packages/animations/example/lib/shared_axis_transition.dart index 89ec6b7b9f62..0a207f3739f1 100644 --- a/packages/animations/example/lib/shared_axis_transition.dart +++ b/packages/animations/example/lib/shared_axis_transition.dart @@ -115,22 +115,26 @@ class _SharedAxisTransitionDemoState extends State { class _CoursePage extends StatelessWidget { @override Widget build(BuildContext context) { - return Column( + return ListView( children: [ const Padding(padding: EdgeInsets.symmetric(vertical: 8.0)), Text( 'Streamling your courses', style: Theme.of(context).textTheme.headline, + textAlign: TextAlign.center, ), const Padding(padding: EdgeInsets.symmetric(vertical: 5.0)), - Text( - 'Bundled categories appear as groups in your feed.' - 'You can always change this later', - style: TextStyle( - fontSize: 12.0, - color: Colors.grey, + Padding( + padding: const EdgeInsets.symmetric(horizontal: 4.0), + child: Text( + 'Bundled categories appear as groups in your feed. ' + 'You can always change this later', + style: TextStyle( + fontSize: 12.0, + color: Colors.grey, + ), + textAlign: TextAlign.center, ), - textAlign: TextAlign.center, ), const _CourseSwitch(course: 'Arts & Crafts'), const _CourseSwitch(course: 'Business'), @@ -175,75 +179,81 @@ class _CourseSwitchState extends State<_CourseSwitch> { class _SignInPage extends StatelessWidget { @override Widget build(BuildContext context) { - return Column( - children: [ - const Padding(padding: EdgeInsets.symmetric(vertical: 35.0)), - const CircleAvatar( - radius: 28.0, - backgroundColor: Colors.black54, - child: Text( - 'DP', - style: TextStyle( - fontSize: 20.0, - color: Colors.white, - ), - ), - ), - const Padding(padding: EdgeInsets.symmetric(vertical: 8.0)), - Text( - 'Hi David Park', - style: Theme.of(context).textTheme.headline, - ), - const Padding(padding: EdgeInsets.symmetric(vertical: 8.0)), - Text( - 'Sign in with your account', - style: TextStyle( - fontSize: 12.0, - color: Colors.grey, - ), - ), - Column( - crossAxisAlignment: CrossAxisAlignment.start, + return LayoutBuilder( + builder: (BuildContext context, BoxConstraints constraints) { + final double maxHeight = constraints.maxHeight; + print(maxHeight); + return Column( children: [ - const Padding( - padding: EdgeInsets.only( - top: 40.0, - left: 15.0, - right: 15.0, - bottom: 10.0, - ), - child: TextField( - decoration: InputDecoration( - suffixIcon: Icon( - Icons.visibility, - size: 20, - color: Colors.black54, - ), - isDense: true, - labelText: 'Email or phone number', - border: OutlineInputBorder(), + Padding(padding: EdgeInsets.symmetric(vertical: maxHeight / 20)), + const CircleAvatar( + radius: 28.0, + backgroundColor: Colors.black54, + child: Text( + 'DP', + style: TextStyle( + fontSize: 20.0, + color: Colors.white, ), ), ), - Padding( - padding: const EdgeInsets.only(left: 10.0), - child: FlatButton( - onPressed: () {}, - textColor: Theme.of(context).colorScheme.primary, - child: const Text('FORGOT EMAIL?'), - ), + Padding(padding: EdgeInsets.symmetric(vertical: maxHeight / 50)), + Text( + 'Hi David Park', + style: Theme.of(context).textTheme.headline, ), - Padding( - padding: const EdgeInsets.only(left: 10.0), - child: FlatButton( - onPressed: () {}, - textColor: Theme.of(context).colorScheme.primary, - child: const Text('CREATE ACCOUNT'), + Padding(padding: EdgeInsets.symmetric(vertical: maxHeight / 50)), + Text( + 'Sign in with your account', + style: TextStyle( + fontSize: 12.0, + color: Colors.grey, ), ), + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const Padding( + padding: EdgeInsets.only( + top: 40.0, + left: 15.0, + right: 15.0, + bottom: 10.0, + ), + child: TextField( + decoration: InputDecoration( + suffixIcon: Icon( + Icons.visibility, + size: 20, + color: Colors.black54, + ), + isDense: true, + labelText: 'Email or phone number', + border: OutlineInputBorder(), + ), + ), + ), + Padding( + padding: const EdgeInsets.only(left: 10.0), + child: FlatButton( + onPressed: () {}, + textColor: Theme.of(context).colorScheme.primary, + child: const Text('FORGOT EMAIL?'), + ), + ), + Padding( + padding: const EdgeInsets.only(left: 10.0), + child: FlatButton( + onPressed: () {}, + textColor: Theme.of(context).colorScheme.primary, + child: const Text('CREATE ACCOUNT'), + ), + ), + ], + ), ], - ), - ], + ); + }, ); } } From f415676c9b97ea6d00565235b069bc9bf95ae7b9 Mon Sep 17 00:00:00 2001 From: Shi Hao Hong Date: Wed, 15 Jan 2020 11:18:29 -0800 Subject: [PATCH 13/17] Slight padding change --- packages/animations/example/lib/shared_axis_transition.dart | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/animations/example/lib/shared_axis_transition.dart b/packages/animations/example/lib/shared_axis_transition.dart index 0a207f3739f1..e5b3cd2b3c39 100644 --- a/packages/animations/example/lib/shared_axis_transition.dart +++ b/packages/animations/example/lib/shared_axis_transition.dart @@ -125,10 +125,10 @@ class _CoursePage extends StatelessWidget { ), const Padding(padding: EdgeInsets.symmetric(vertical: 5.0)), Padding( - padding: const EdgeInsets.symmetric(horizontal: 4.0), + padding: const EdgeInsets.symmetric(horizontal: 10.0), child: Text( 'Bundled categories appear as groups in your feed. ' - 'You can always change this later', + 'You can always change this later.', style: TextStyle( fontSize: 12.0, color: Colors.grey, From ee7337e21d81bdd35078c908445711a58371cf26 Mon Sep 17 00:00:00 2001 From: Shi Hao Hong Date: Wed, 15 Jan 2020 15:06:25 -0800 Subject: [PATCH 14/17] WIP - fade through demo --- .../example/assets/placeholder_image.png | Bin 0 -> 10319 bytes .../example/lib/fade_through_transition.dart | 149 ++++++++++++++++++ packages/animations/example/lib/main.dart | 13 ++ packages/animations/example/pubspec.yaml | 3 +- 4 files changed, 164 insertions(+), 1 deletion(-) create mode 100644 packages/animations/example/assets/placeholder_image.png create mode 100644 packages/animations/example/lib/fade_through_transition.dart diff --git a/packages/animations/example/assets/placeholder_image.png b/packages/animations/example/assets/placeholder_image.png new file mode 100644 index 0000000000000000000000000000000000000000..913c40e00e3def99ac1b165c5feb64d40b2195c9 GIT binary patch literal 10319 zcmXY1by(Bi_a9@z1|MKS3>-0Pbay+D7LbsX1_kLxLcq~AMY;t7 zo+3U-d<`|QfSL)^HUPi_(Neo*97M90Pw98xBzq{gR7;1q$pP(W8@W8EcE6cmZx_j% zblMX|&-`HUHZzJgW~jg3!mVej^v zH_vIxUqZap<|d;oIg643YF_^LKwL&&2Rq-+Q`o9o5QkpVVZ=EiVI23W&AfLaNy(d4 zuE>4~CsEMcGd9j!oSQr6_i0E3Xy5`ap3chXsr1vZ2Yokyy>O+woH%lo_Y99dk+i*` z+070_9^D7|ZqSKrx5TnMerOpI^1GH2)mLlCE%I=yz~`$#3aFjE?(r|zR_eJ(?K=X7 z^~^qmwaTiRdGj@y@O(H)0aH0BXW(2Pz&@8`L65jaB3l3c{crwjgm-xi3f4y8w{R6D zSzxQ!-rf#o;?DTFEa8#&W60&_Z*PK{I{r#rH-ZD(M{Ro)4(+Cb$FuQjfyxG3ybZIp z2;_jFN4L;^3y~5_3MBEEn7R+~uJNUIC?8|j5tKe!H-_Jr3fCPGWdE5-oZ37+Z_tkx zn=F!T5(H{E>aUa>dhG>2HhY~@u>BLd`~j|r%GQYh#S9{<*lke_e6nHNGVGs*p3B}) z2c(Ww_r}$D8b-^QWGWzIQL(mHO(@vlgJBeq6E9p~Mt6gNHyPR18iEzGq>OX10g*lH z$(VZsc(sDcW?WWE{UG{rzJJQ?A{-IR6=Q6*wve-20n-p@c+CzL2i32pi18k-T(d7F zRCxavq|3w-2_^#ca&+DmuHtr+OCSM-!hNB0A#-LoXs>aZLKv z3FOjx$k=KMeNpCU0~jhT`nHN>fmu4d-)o}5X-uh-=;KRR5mcQpP(sSdcGQogvQ7*5 zjE*rq2^-!vD2Kl4%Py1A1srg8qBg#i-oF7x6Yxe+6S-Wxk_*sIxt%}Gks*!YP?B>7;&1dR{T&f z`i(wMQV#q*g?hew3o>>@z3sql9^8%P!>T%PDYJgHHiP{zk;kCm>AT>Qh?V_1a8?55 zUfF-5j{js)L|NG)FVi59F44>9F;JpnI_ng_cJt??6oJvVyZwlY-T%S5SwJLYMYjbb z0(?b?H}Q5b=J6hWWIQ8&UzsEY{M+1%Uj^9QkEnY2;Gb_j#92d)KP?2ZN5Il0i7wBT zQ75V1EBjJNjFCSAEp$i{N}?7;uZ5>HO6S;rYt2L)tjMgNtm;V;IlHtPWN(rxLUa-} zee_9&Oo7`!QzbAk5K&#YVWv1GC$%4l2cfEG#UzSLWwE@8*!Mc!Z;803q1ZvR25u;q3l@3g zB@JmI#-(*W@G1_LEeF-h33BZIRGZ7`+QjPfusSLX|dOU&xI+qkJH=!LC+7 zPL@?}5*i|H%snz|>}x@;Rv>6sKxRZN(b|M9$_M5{j0ckbTB5B-3iXxJ$XKf^lm;&P z;?Ob>62z!qy+dt_W2lMJD1(-<`@sDCe4B`0lKZo4=3{7F8q~Lg?W^I!SiZE*!U?0`geqH8(5eD5 zVc!{b?4^c+Q9tNaOo4Y3#P~&5Wqa?Q7>QdVi9|p3_EnR~B3G8xX8S~BGfPDP_zK*?+I(Rv%OAQ}% z7QWhK7v*s1J**(9_x^Lef*^>q0LhqN#U<{{E*x7(`id1ocOzQFcv9ZVa}a^qXn(Z! zeKLOC!+VfJu=zvCOzB7T{z?A&`Z{K{g9-Dp7g4V}ETFMsYSH|c?2DJWT?lP+m80eC zc_?&OD0DILLkDTI(~?K%V&tE1^&QN+nFfQW2?+^%2SG#f&0ju$-s?G=xE3vtVf<2@ z??}L#VvM3XT92KzC^}u--I==r4;Dv)BK#?szR||b{5JTZWtKAV0HHLO((r^_K0Md_ z@BT1H>eZjCi<70^2UUNO`gzqMQ``Y5Op=waIy=KP8o0iu%WL3r{-8_RQ&Lil*t}*O zZ}rIqZ%*V7(FlP=MNQhPRH9kZp}=hJ4&^$$et zY&*pm_487b3jQ2Ek)pnsdF{KfMKZ$|ZMOZ>TU*?(C)aFV874K`ePJde8e z)>aQ~FPs^(8ml^~8hZuGsNmv0ITi84lfKT&!!F%m36zwSRLpdA>iLUZFlgf)5z9Ig z0cJ`_OFs#jv!)3&08`5N4kYq5xyBZa;NNYW7^1xxW6SvIFy)uZe0M?H{m5`AX4@*UY*_ zUhg&F+pf3kF91mFw1SQhpSY^O6A|y(dEqQB)+JT}bQ{U!$VUNZdN=?3&F&Y(bN zcW0*!Skg7weaB(XKRqp@gHl;&tX?3d=zAPflX^!680M%@Z~kSBW=hhmo%+Fl0ctI- zpDPik2TL}oDFKi?g?Tqi$`ZdMfie;bO;lkwDsRP~sRF{4MAoT3+ zRooxWi|6Anpn1^I3VH)++g1Q`!}Nav83`$G8PQK{26<0ZTOSUeWD9p)HRQp+tX&rT zp5_8PQ8co&{C(Z(yBSb!=_6Nm!`HRlZ+m*g%bBC!Q)tSkA>MD^bkT4*mazpTN~)}@ z+#}f^GmyxTxW#-KvYu`#G(?`TjAnP1UKXw;;5%4h&U%rx>f)C&dD~%O9|9QGr$f*& z(j5Nc`x2ggyhoxfHRu0b(TzUc8C{;%jf=#+^B!KLQ04yVj+RSXxModrerjhv3Tne2 zcYR#p?)Lm!oJWb^RtI#pGJc^D)~yDpGKO5x%O~-?I+%aEJG7;{`INtwl*!eKVqml^ zC*fm>hD}T^=aa-eUW#B5ttb#1&S*kzx4O_{zG-^^l&GcnsI~^?{OX}atlrOqiZsW_ zdPq^4R^8vLaase0<;#^j=c2#K#KHrAjAuvE0}nM$!-lN~&>`NgNfotxB0bv=R!W@? zPoG&ROz0Y705Gf6nVLj$`u6ZYmmj}1yIUrO{W3c@_@yF4_HLyrai!`P*_|nirW0(O zS4#!7TS|a+N;@XI?9Q^Ff}YXS_d~*)e8`f%GyAS2=+nYOc80>Hvs+*rb*tcHVejDy zYYw$oo}02hYbIt-Xp&X9nbr&YKvVVfgp{MOi^{3R#cMv6-cCq~s!OBTLCJ~o>c!5^ z@OAy~)4i%FoA8aejvF8R8bse%zT1DT7;-vHpl_s{O|fai77-K=f+yDuS!V~#yOmdu zat>blU|I}s>F@m*v~?6?NjUK82%k_iOB#Vq^#4{a00ku!?Yb(hr zLU|c~YzLDVh1vGLnzcU$vh&eA9nz1YVTl#aW1*Atb`?OBvZHkLqDy;DCRu@E12ezT zxXJ#C>Ctq4<+#%$)hiVi1`O*f6Al2Y9BZuGp9)d6L)C|CK76_`<45JQudw9LU0Utq zi;QcEi&yTpM;+6;jmqCS&lDrM0yq)RlS1Y;-uEcc+}h{*R!`?}JI6J3N`>E^&!kjV zR<5@tJ&UdL?pyDJnr5HjpKK${1W2g18LGB2jzf#Yzli>7;moqC>0Q#x zf17?&2x(`X06{6y+IhX22wT zTO@etChsjdN_DrBG}>DgNZhH0S^m>?!He;(HAvBtGXekRrY&7nha}kp>#ygkNQK6% zk5`NLfzWQdqkgSfGI3ab((d@#%cLF7F}uY-pk;^6Rs0(ytmgjvW~N%VE1RNH@aa3u zLG#otNBhY^3I3S5b&Np`ZcVY!xfPum{cMGTajvDmy9K(+SQm&kT(j$z|H|dnWD?(P zDrV%y%XRM#XX@6n-_?I$`yU$q#_nK&?`r?Kb*>raCsP#1u@%6sWFx#gWiu_3bKWq2 z{`~n%1y^z*gRxbbyEYcUy@i?3Nh5l!pFZnSD2?+c^0%9 z;`SQ;(x6~~gQd|{r=05a+>Nx~i<-sZGLF(;_da+X#;6d)>s{Q=y@jQW_jHhMFheTe z43k}!eW#55ZxWkQyE~RHyN>os{&}IWWZo!mg2tVvJ81v0GzeK_Zhi&f^ca5Y)5v~g z$W9;eenfwTY}763-kG}YXdeeurLgeR$B#$RV67xnj_Wy7&15K*t&o_Z5xr|vH?@M0 z@8X}cCE*h6?zNQX;??SSw)kIg-$bAN2l2PFkqMqtE{zW+t)DD~o$VzQnuy7kO0mC~ zvx{TnP=9_@@}|`_6*GJP?t)4yqNLZj(EZbW@^2@qUGJ2rWz%hLW#1;7aBci<*QC!M z*-wb~w@93t_?312mpwmNtTr5YUSBUqEqeqj9>;*eHU}ELf=dw15`B&WGt5v9Xf6YjL**}W`+e%~+&)7AULRKw@{z;C?kyq92 zttC|j+$WJjW{k0UbDD1&8X92f8IPV`QN{sqjt~}$>+C9%!Thzomb5GSd7-7}SxJZ? z_SI6ja7deQ_K(j#cO2E?j8?@z;xj6<`;Dm)TitJ^9FF?iT2`8@ci4=2kAxY4vjgZy z4A|fcIoiKcU_1Mg500UIRs?vri+AZ6Vn|SUcq5 z2_p05sfil?tFB=^?jS<46)ovKY=MJTT1W0iNf+gCkej9#0@;Y^^5QjM6qO)zyAv7y z1Ja#YVG6Tv>5n->KZ0S$g+yuSE>(7D&5Ni&)v1^iO5T&jw71?Tc9$!lqMP^n(L?mu zyS{n5Cvu}+tRY?Gc_WFvtcwLE+>9t$nCwp`+$5A~HJ^;fQYjsJYjC~$B?_j6X6 zmb7r_2tU`jQ~|IDLB}?o_Ef_XKHFViUHleFUKl9;^bSdrzvN(S7IXX6mW~rV%c^+@ zj$ODepe871^E>RH6h!zQ^?NHuWxsjHmYPf0==<3RQPD^mMDtVHSz20h>BZNwT666m zUHf08)ciug0cw{E(? znC8Be&r)-%#Z(CIiZ@@?I$q$sK3AGxR6xl{Hz0frrPiGow0cW2;e6$=kH#jJ^{G27 z?dWhCjEq;k2gkOjnt9-pc;8qnjADRLfG06`{}Z*{c52U7rzxp8L&s^$NiBPPpGo(< zGGqRV^h5Bo8Tx9aF2Bg`?;k#V&}%Q3a><&$K4M{M4fb)Jc8bnYwtjaBQ|Jl~wD3<= zV8?++6`s=eG$}ah%UTl)I;*#p@qu2UTK`mY;{#AWoalbxWzM+egSO!;^{U z(a^wzT|2X~jpOY6bi|!wvLD+UbcrFnY{7nOpAA(tRUEe_d)n@Y=7adxl zaQ4jb;-R_AQRnk(=d;FZF2RDz*U;7A0y#(V=Ae5Dy%^xurye4!=P+^egP!4ac|Moy zSDe83K{Nv`R_5N|Rc3}GH_dUp%HdHz-$Z|C^pb(rkOUV(Q-Hd)2)f!7M2|Zxeg0uB z(i+I_l7hrEglRooL( z<)a~OR9lSAGX;w>DKJHc3vdos?}CZ(>jrv|=RKIp7E{|l9y3A-)nuoZt%a`s$`iZs z#DpZ|JpBm>sgIf||ChA&09GfmzKR5s0GF#2|B3Zd>(v-^GqQva1lixw8;Cm$xMMDw zs{mq)u^`}mDbQGp6pf4W&HBjqik!r(J4|mtb&H1m9rLA+qn;{61^jjpy-ACu6=R^> zM4_~oW+st6A_Zn8o;{5WW6VsAj`vz24--`=S%@ZYZC5m2!L8Im(835hG<*J~S~x%e0fNUh4RA5DY6 zF60y_7NI;I>jKz^gH~}@xr{F5rxVGz$`$SAdICNcf_4p0;eT76e*`XSBx?2l)VU9`A41c>dz+h^wPidrgm$x1KNH!>s|)eU_YzOoy3>Mm{woz}<~{rrSJ&9+ z%QVr7$lZxyX^aJgAO4e*_sT!4UA{8w9T55b4$_~X%EF0*_B3iqf`LgGy~z&>ihA*q zKXqiOgYnSbMRB8s?13zfspRdK^f~-W)z7^j>!Ni(u7jyMo%>>_o~b^iffRENid?^- zb$7l?2JRlR8SuNyOqM|1FbqL(4?9SNL{+zEYkzV3-uCPG^=(#o@4tjyqzOeQNy>6S z8_Ap%UU;x_=c7|r>tp5c&;reRO?pXtwX}9GA&NLvEEtwY&xKC)PX!R-Kb-#;mME=j zs7AB+jDY9G@yZQ5-bJR16wKw3vPhfy)p2Pgs48*dws}B*Dv((ALfrhxUx4`$K@-3vfgXNY?7}sKK7*|6e}7*N z(&CHI)*)Z}9sfa&NeRF8+$Q%e``on7KQ&mM%{5!m3!9^i%ge`laM#7jcD;v#$&civ zA>Fk}nC5=}t)xi{d+j)9+T?#G@GCkCijP>JJt4&N#r{#Xg^=myq|nWSw!L$7&Qplh z=313TFt^abTqwC$R~o1dMriBS8dH>PYiql_aV5ii*z{P>n9_bON0_=5=81}HJ&^Fn=uZ4kk4r=tkdz*TSv zn=Kd1toi&08)8s+VKc86an#=&!sEcIfjgC@xctHpE5OnF@ibc_QJX7bVjyVM(2h|l zL_m9{aHN$-`_LkoB)Bx$95rIQ+!XP+@iacaY3h-6v%t(j8>Z zIv266Rpvp5Ua+fhmq-MKa&&h(S7@x?IGD6_z4?Kiq?V}u>+Zzy;^N}wo@8pqvk2w? z!Ep+9ci*$IwXW^po)&{2MyYtdstvx&xWso?DR6(mLt*LXb5A;lFwJgm;Pg;w?N>*H z`!`DKECx%o`q2Rx$75# zWFM*FhtB}Nv%XvJA$k)MC@6}*hrjesLD;f3ev1sl2F=;UD!RYRZb|_yaCa*?zx#WM z^XiGZ;c2_o`N6};g&ESKrE;0^Q&jp5P2Y|Z`bFic{XW9ZIQuPUq#vZtvuw<=tVtCc zXY(f3M9h|nh@clV_m1MEe#Mfan990{${JAwoj+Jq#hMuzogh(z46eR$AA-iR8o~ z2R;1;yymrlLQva6pB^0!_5a|#J3BkED=qmRS$h0h-5$W{%u@ZY?p$vWK;l+jQ{$nm zmwJHthwU6xDy&tQP>Ar=%;{!BkJFyclu|lfb3%b6N#Fyj;sT{l-dWJq4hp{lngS>0 zBt!(%$G~oZvW!tg7n~_z-athiTH3UxkO0zTV<6d9ozC8e1hyG zfnXJ|XW)>9MUD}8rJu@-8cqYjtM~!4JAE~NzRvYz|QhtR{R0{kIP-5l9~mEur)?e?|7 z>B-<_DR$^co=8UL?#|>2_sEi+@i0aR^$2=H1Gj1*u;f#%Cy@zCg5o=|Fo`IofZ`j` z20la4OH$PV148kP_=qJ?fYW8d(%YX+0k@-}4BzaxTLoYjjz?N1W&7B2=`nW;Qlmq+gUgQ23NwB1}f$v~+1I zH10h}8;-58c5+&0lF3WcZQFfhQ2-#>Mode?hjYwdX%;!6t(qQwq^#S`pmld3Y6V7G ziiP#vuyk=?0di5=asSb-4mnvH_|6GsBH5;##++};L~3H^K7IQ6pWY1_(_(^N`Nd~DRJT~DvW3fcKLnj>zu+3;h`)>b_5-*23%nmT^oP`xu9wGh~{fWmlK!tA)jdu zs1A5w{BDW*$Zf*AY4L2XXAv-DEKkpd%>9Sj3x@P6Kr)D}L<T6%U+ITGS0)uEy|C&bp<#h9-M~}KZO1TJ^r3)%T?>Y; z${Y+S)hN=KZ*DsJnc%49f_Ob;vb^yj*CtQYA*P)?IHN`(n+B4_4S>0+DToqw@5r;S z98-1<2)TZZ>kxS4;?jC^+ganz7(uHW3p~SuCZmyJ&5PL0EeWl$3h!Aq7ZHcSqzj2z zVdpdNJ3t{gUMkOJjP@1-GxDSJ8!V5LP4Iep?Z1Y8YE1tlK3INF-yR#AyXkyglasu_ zOFAvYR6w#=uXCj~5Jlp?A_$$n+pNEk?p;ZCHQh8)wgN9rTBSX%_RbE~rCEb?g50^`%@$TNF-dOGBNqPBQ08MYO8r3-vToS8WDvs}wN-+GQez%*}z z%N|4f$k8zx4!)JGI}MI-B=PJUr09_%z|@{uh~>b~-6vSFd0*b`Brfj*hcN4!gVt2g zG$#PoPMSJ$b#pe5sJ<{7%q2PSZ1cBj-Z%`mkrCk`suL5$+ft_fkMe>15C$2W7kr?6*nI!T{M zapR(@h$T~Vh5pB6Qh(RDl`Qt4k;+<@X;Pc`4-%4Gz(Kua@>zYowD)ao`vc$C(#ZcI z-eP0>0@6rjQOxDI#Vqk>yl*Q`B+;1Zp^3@o*rV*gv_^xL+1s{hO@awULV4jE4gUfaF|1^T^&dCjOles>}kw}tsYH-McMY4@?P(|Vt-VC6BKsMaA;oz zv`YCM0X*VRF}{qN{XDMR#PRKaa4&0cG&A;uPfkv5hR8S7^ofETaEcrZ7%M;)EQ>#;CDVkTz=oVB4EpJva~J}{@n-K zpN-0RuhPwr9tRFNNX>}KwX;N>Fa8rl14yn&)gw<1&2-<(-!_W#|mCz47}P%pQ_!Ww@C zxKJIX#TFm*OI(@?STt?j$aE`z6AlHdBQu2V%P}(7!0crhY8sWArcyUdn&>+YN65|{ zZ*Xe|wQYS=hycOap-E8Zi?>Zpy1fCU8I)5b{Efd`^-=--`g$RrJq_>~C&e`D5rKG+ z4+5+QZbXWej~}a?a?MH0y)WEVgZSM7dG_-jG8F(ZquJRSoX~2hv+M|mbddKay7MbW z0SBVCS#4VepZ6rf25mX1y${z%$0cB3Yj7hCfE8 zPqXOYBTGu~zcwjJRFDMdC=|Sk@tWIae}03S=Cmql&b{X{0KDuD?KX{y?n#i>ieP@P z_Rh{HmVm|`Z+)<;F3-ps-|b@y6(i{-tCqGE!?|0VW~86w0En&M4)z2j@2FMWrV7aU z7Bbafc(9f8^{(EhU*X7Wqok|-vUAx@EK^=AAX0CwiZ^jSt6Q@Qq7ui!^lQ4rlPj(jo9-+yb2J+gM+9r=Qurjw0r*jeV~5iuwim@&4 z-Ptz>{lA(KN7%|VHq9Zn5s-j}(-&yf(OkwbLvT_##n7-z;OVmhkI*ifLZ?sMiE18k zSse+t3%>1I60$OnUY2Zn-9Nb?=EYrJFUZBNI3h_v*Q|TZB5XPxX&~YaL4ek6J+&IF HZPfn(wICfc literal 0 HcmV?d00001 diff --git a/packages/animations/example/lib/fade_through_transition.dart b/packages/animations/example/lib/fade_through_transition.dart new file mode 100644 index 000000000000..3744938eb94a --- /dev/null +++ b/packages/animations/example/lib/fade_through_transition.dart @@ -0,0 +1,149 @@ +// Copyright 2019 The Flutter Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +import 'package:flutter/material.dart'; +import 'package:animations/animations.dart'; + +/// The demo page for [FadeThroughTransition]. +class FadeThroughTransitionDemo extends StatefulWidget { + @override + _FadeThroughTransitionDemoState createState() => + _FadeThroughTransitionDemoState(); +} + +class _FadeThroughTransitionDemoState extends State { + int pageIndex = 0; + + List pageList = [ + _FirstPage(), + const Placeholder(), + Container( + color: Colors.orange, + ), + ]; + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar(title: const Text('Fade Through Transition')), + body: PageTransitionSwitcher( + transitionBuilder: ( + Widget child, + Animation animation, + Animation secondaryAnimation, + ) { + return FadeThroughTransition( + animation: animation, + secondaryAnimation: secondaryAnimation, + child: child, + ); + }, + child: pageList[pageIndex], + ), + bottomNavigationBar: BottomNavigationBar( + currentIndex: pageIndex, + onTap: (int newValue) { + setState(() { + pageIndex = newValue; + }); + }, + items: [ + BottomNavigationBarItem( + icon: Icon(Icons.photo_library), + title: const Text('Albums'), + ), + BottomNavigationBarItem( + icon: Icon(Icons.photo), + title: const Text('Photos'), + ), + BottomNavigationBarItem( + icon: Icon(Icons.search), + title: const Text('Search'), + ), + ], + ), + ); + } +} + +class _FirstPage extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Column( + children: [ + Expanded( + child: Row( + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + _ExampleCard(), + _ExampleCard(), + ], + ), + ), + Expanded( + child: Row( + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + _ExampleCard(), + _ExampleCard(), + ], + ), + ), + Expanded( + child: Row( + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + _ExampleCard(), + _ExampleCard(), + ], + ), + ), + ], + ); + } +} + +class _ExampleCard extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Expanded( + child: Card( + child: Stack( + children: [ + Column( + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + Expanded( + child: Container( + color: Colors.black26, + child: Padding( + padding: const EdgeInsets.all(30.0), + child: Ink.image( + image: const AssetImage('assets/placeholder_image.png'), + ), + ), + ), + ), + Padding( + padding: const EdgeInsets.all(8.0), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text('123 photos', style: Theme.of(context).textTheme.body2), + Text('123 photos', style: Theme.of(context).textTheme.caption), + ], + ), + ), + ], + ), + InkWell( + splashColor: Colors.black38, + onTap: () {}, + ), + ], + ), + ), + ); + } +} \ No newline at end of file diff --git a/packages/animations/example/lib/main.dart b/packages/animations/example/lib/main.dart index 0844916731cd..9e1b35257675 100644 --- a/packages/animations/example/lib/main.dart +++ b/packages/animations/example/lib/main.dart @@ -4,6 +4,7 @@ import 'package:flutter/material.dart'; +import 'fade_through_transition.dart'; import 'shared_axis_transition.dart'; void main() { @@ -42,6 +43,18 @@ class _TransitionsHomePage extends StatelessWidget { ); }, ), + _TransitionListTile( + title: 'Fade Through', + subtitle: 'Page transition outgoing elements first fade ' + 'out and then incoming elements fade in while scaling', + onTap: () { + Navigator.of(context).push( + MaterialPageRoute( + builder: (BuildContext context) => FadeThroughTransitionDemo(), + ), + ); + }, + ), ], ), ); diff --git a/packages/animations/example/pubspec.yaml b/packages/animations/example/pubspec.yaml index b43616433621..bfb09114a74f 100644 --- a/packages/animations/example/pubspec.yaml +++ b/packages/animations/example/pubspec.yaml @@ -19,4 +19,5 @@ dev_dependencies: flutter: uses-material-design: true - + assets: + - assets/placeholder_image.png From 0d88731d34c1bd4d199f2269c38f730bfb659473 Mon Sep 17 00:00:00 2001 From: Shi Hao Hong Date: Thu, 16 Jan 2020 09:55:40 -0800 Subject: [PATCH 15/17] Add second page --- .../example/lib/fade_through_transition.dart | 92 +++++++++++-------- 1 file changed, 52 insertions(+), 40 deletions(-) diff --git a/packages/animations/example/lib/fade_through_transition.dart b/packages/animations/example/lib/fade_through_transition.dart index 3744938eb94a..c1100779cf28 100644 --- a/packages/animations/example/lib/fade_through_transition.dart +++ b/packages/animations/example/lib/fade_through_transition.dart @@ -15,9 +15,9 @@ class FadeThroughTransitionDemo extends StatefulWidget { class _FadeThroughTransitionDemoState extends State { int pageIndex = 0; - List pageList = [ + List pageList = [ _FirstPage(), - const Placeholder(), + _SecondPage(), Container( color: Colors.orange, ), @@ -67,43 +67,6 @@ class _FadeThroughTransitionDemoState extends State { } } -class _FirstPage extends StatelessWidget { - @override - Widget build(BuildContext context) { - return Column( - children: [ - Expanded( - child: Row( - crossAxisAlignment: CrossAxisAlignment.stretch, - children: [ - _ExampleCard(), - _ExampleCard(), - ], - ), - ), - Expanded( - child: Row( - crossAxisAlignment: CrossAxisAlignment.stretch, - children: [ - _ExampleCard(), - _ExampleCard(), - ], - ), - ), - Expanded( - child: Row( - crossAxisAlignment: CrossAxisAlignment.stretch, - children: [ - _ExampleCard(), - _ExampleCard(), - ], - ), - ), - ], - ); - } -} - class _ExampleCard extends StatelessWidget { @override Widget build(BuildContext context) { @@ -146,4 +109,53 @@ class _ExampleCard extends StatelessWidget { ), ); } -} \ No newline at end of file +} + +class _FirstPage extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Column( + children: [ + Expanded( + child: Row( + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + _ExampleCard(), + _ExampleCard(), + ], + ), + ), + Expanded( + child: Row( + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + _ExampleCard(), + _ExampleCard(), + ], + ), + ), + Expanded( + child: Row( + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + _ExampleCard(), + _ExampleCard(), + ], + ), + ), + ], + ); + } +} + +class _SecondPage extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Column( + children: [ + _ExampleCard(), + _ExampleCard(), + ], + ); + } +} From 065be89f6197d1d4ac307301da50d1ee90437a2f Mon Sep 17 00:00:00 2001 From: Shi Hao Hong Date: Thu, 16 Jan 2020 10:06:59 -0800 Subject: [PATCH 16/17] Complete third page, add avatar png --- .../animations/example/assets/avatar_logo.png | Bin 0 -> 1322 bytes .../example/lib/fade_through_transition.dart | 23 +++++++++++++++--- .../example/lib/shared_axis_transition.dart | 13 +++------- packages/animations/example/pubspec.yaml | 1 + 4 files changed, 24 insertions(+), 13 deletions(-) create mode 100755 packages/animations/example/assets/avatar_logo.png diff --git a/packages/animations/example/assets/avatar_logo.png b/packages/animations/example/assets/avatar_logo.png new file mode 100755 index 0000000000000000000000000000000000000000..a5d394f376f9aa6249a19f15d27409ab821c53bb GIT binary patch literal 1322 zcmV+_1=aeAP)Nkly&1q%0Y{|Wb?R0Uae7w7fS{+`Z9G5ep? zaJ{ImsS1Xm4~B5{RlR7_5rOGAtCM&HPQW9b#M!C2!7biAZsRXd$X~ea&2vk*#&1;z z;er-%)d6k|$M|hHt=gb{R2!$cEnxH2eyoE5vaa?AX8d=b;|7LczzlKY+s^_pUoT<+ zhQvTGST%li2QGu5GQ_3T9hS`Z=1>5qK;D~+$-n+?`~psipY<;3%Kr+#gHz-;{gvd< zJc#??l)0}COltlCJO*cg$Lhdji|0N#Biz?tnQz_S!5QLrz02(2`~{pbe(~n~Ut0xG zPK$L`o=|7Y(!JpGYQrT^MwhEh(s_*}SJ@?`T=b=RWP(kx#5kSz5NC->C@}QGrixQ0 z*?P>;`2ab3LYep7=O11^H^9m9n4z-?8L11`KOC-zmQR6>4+_F%r1p&s7G=>^jgC)h zgoM(Vz!Rrsn>Xd#fs}AFt5fg&|FTfMLC1gwA)&>s?^B+XuxjMMDk0(>dB-i%JWs~R zfeay|{I>d;2W2FU97qyEy!kgAz->@Q+{l4AA?4PaDOz!kGhyUFf{^mpYiVJe1qF!q zfPgcv1Y8o7vSQ@G3Lz))Y5_e0rPPfas1tG?jTVt!1m!4$b0|qgSYRZs^;OUY8@?Ub zAnb7EnFFc<+CVYq%lsS_VF&lw4zQOp@A(jPX?lb$hEH}ue-CJnE;E}PpIyQt{oOHr z6ts!Qm9a7L3O&LuM`Ab++NRASm)Nr_?hYX=XT|2InRcIkwKPpy6+;puo`x#euqUfy1E0v=+GeCG!%KNs&)6AE^0xD)Sqc0 zw=N3`-J_lq0rEZ;b>MwN4Q>A}#VRT zZ@Ubl@l~J+zy^(?~yxS&PK`WtSIh5LE)xMk&Gj9cFP zG@m9pgT$mylOTaJGxEZUUeH(J`hFayj4OI!CSSSf@5T|F(|3@83l9U_f5HGBTx9ee goWqg+Zo7v63r@_Nw6*FiqW}N^07*qoM6N<$g7AWN(f|Me literal 0 HcmV?d00001 diff --git a/packages/animations/example/lib/fade_through_transition.dart b/packages/animations/example/lib/fade_through_transition.dart index c1100779cf28..274f010a4611 100644 --- a/packages/animations/example/lib/fade_through_transition.dart +++ b/packages/animations/example/lib/fade_through_transition.dart @@ -18,9 +18,7 @@ class _FadeThroughTransitionDemoState extends State { List pageList = [ _FirstPage(), _SecondPage(), - Container( - color: Colors.orange, - ), + _ThirdPage(), ]; @override @@ -159,3 +157,22 @@ class _SecondPage extends StatelessWidget { ); } } + +class _ThirdPage extends StatelessWidget { + @override + Widget build(BuildContext context) { + return ListView.builder( + itemBuilder: (BuildContext context, int index) { + return ListTile( + leading: Image.asset( + 'assets/avatar_logo.png', + width: 40, + ), + title: Text('List item ${index + 1}'), + subtitle: const Text('Secondary text'), + ); + }, + itemCount: 10, + ); + } +} diff --git a/packages/animations/example/lib/shared_axis_transition.dart b/packages/animations/example/lib/shared_axis_transition.dart index e5b3cd2b3c39..c82fc305bb9d 100644 --- a/packages/animations/example/lib/shared_axis_transition.dart +++ b/packages/animations/example/lib/shared_axis_transition.dart @@ -186,16 +186,9 @@ class _SignInPage extends StatelessWidget { return Column( children: [ Padding(padding: EdgeInsets.symmetric(vertical: maxHeight / 20)), - const CircleAvatar( - radius: 28.0, - backgroundColor: Colors.black54, - child: Text( - 'DP', - style: TextStyle( - fontSize: 20.0, - color: Colors.white, - ), - ), + Image.asset( + 'assets/avatar_logo.png', + width: 80, ), Padding(padding: EdgeInsets.symmetric(vertical: maxHeight / 50)), Text( diff --git a/packages/animations/example/pubspec.yaml b/packages/animations/example/pubspec.yaml index bfb09114a74f..0dad08e5f743 100644 --- a/packages/animations/example/pubspec.yaml +++ b/packages/animations/example/pubspec.yaml @@ -20,4 +20,5 @@ dev_dependencies: flutter: uses-material-design: true assets: + - assets/avatar_logo.png - assets/placeholder_image.png From d96f29b53e3697504ba107e2f7fea0b014269c64 Mon Sep 17 00:00:00 2001 From: Shi Hao Hong Date: Thu, 16 Jan 2020 10:43:53 -0800 Subject: [PATCH 17/17] Make formatter happy --- .../example/lib/fade_through_transition.dart | 10 ++++++++-- packages/animations/example/lib/main.dart | 8 ++++++-- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/packages/animations/example/lib/fade_through_transition.dart b/packages/animations/example/lib/fade_through_transition.dart index 274f010a4611..0357652657ce 100644 --- a/packages/animations/example/lib/fade_through_transition.dart +++ b/packages/animations/example/lib/fade_through_transition.dart @@ -91,8 +91,14 @@ class _ExampleCard extends StatelessWidget { child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - Text('123 photos', style: Theme.of(context).textTheme.body2), - Text('123 photos', style: Theme.of(context).textTheme.caption), + Text( + '123 photos', + style: Theme.of(context).textTheme.body2, + ), + Text( + '123 photos', + style: Theme.of(context).textTheme.caption, + ), ], ), ), diff --git a/packages/animations/example/lib/main.dart b/packages/animations/example/lib/main.dart index 722e38e3464e..caa4275d402e 100644 --- a/packages/animations/example/lib/main.dart +++ b/packages/animations/example/lib/main.dart @@ -38,7 +38,9 @@ class _TransitionsHomePage extends StatelessWidget { onTap: () { Navigator.of(context).push( MaterialPageRoute( - builder: (BuildContext context) => SharedAxisTransitionDemo(), + builder: (BuildContext context) { + return SharedAxisTransitionDemo(); + }, ), ); }, @@ -50,7 +52,9 @@ class _TransitionsHomePage extends StatelessWidget { onTap: () { Navigator.of(context).push( MaterialPageRoute( - builder: (BuildContext context) => FadeThroughTransitionDemo(), + builder: (BuildContext context) { + return FadeThroughTransitionDemo(); + }, ), ); },