From e16bf97398249e15342a276f2497a94bd94c32bc Mon Sep 17 00:00:00 2001 From: 28JayG Date: Sat, 23 Feb 2019 23:54:57 +0530 Subject: [PATCH 01/26] Animated Container is ready --- lib/main.dart | 108 +++++++++++++++++++------------------------------- 1 file changed, 40 insertions(+), 68 deletions(-) diff --git a/lib/main.dart b/lib/main.dart index 94b23e9..71ec1db 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -2,108 +2,80 @@ import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); +const Duration duration = Duration( + milliseconds: 500, +); + class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo', - theme: new ThemeData( - // This is the theme of your application. - // - // Try running your application with "flutter run". You'll see the - // application has a blue toolbar. Then, without quitting the app, try - // changing the primarySwatch below to Colors.green and then invoke - // "hot reload" (press "r" in the console where you ran "flutter run", - // or press Run > Flutter Hot Reload in IntelliJ). Notice that the - // counter didn't reset back to zero; the application is not restarted. - primarySwatch: Colors.blue, - ), - home: new MyHomePage(title: 'Flutter Demo Home Page'), + home: new MyHomePage(title: 'Animations'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); - - // This widget is the home page of your application. It is stateful, meaning - // that it has a State object (defined below) that contains fields that affect - // how it looks. - - // This class is the configuration for the state. It holds the values (in this - // case the title) provided by the parent (in this case the App widget) and - // used by the build method of the State. Fields in a Widget subclass are - // always marked "final". - final String title; @override _MyHomePageState createState() => new _MyHomePageState(); } -class _MyHomePageState extends State { - int _counter = 0; +class _MyHomePageState extends State with TickerProviderStateMixin { + double height; + double width; + Color color; + BoxShape boxShape = BoxShape.rectangle; + bool isCircle; - void _incrementCounter() { + @override + void initState() { + super.initState(); + height = 100.0; + width = 100.0; + color = Colors.blue; + isCircle = false; + } + + _toggle() { setState(() { - // This call to setState tells the Flutter framework that something has - // changed in this State, which causes it to rerun the build method below - // so that the display can reflect the updated values. If we changed - // _counter without calling setState(), then the build method would not be - // called again, and so nothing would appear to happen. - _counter++; + boxShape = isCircle ? BoxShape.circle : BoxShape.rectangle; + height = isCircle ? 400.0 : 100.0; + width = isCircle ? 400.0 : 100.0; + color = isCircle ? Colors.red : Colors.blue; }); } @override Widget build(BuildContext context) { - // This method is rerun every time setState is called, for instance as done - // by the _incrementCounter method above. - // - // The Flutter framework has been optimized to make rerunning build methods - // fast, so that you can just rebuild anything that needs updating rather - // than having to individually change instances of widgets. return new Scaffold( appBar: new AppBar( - // Here we take the value from the MyHomePage object that was created by - // the App.build method, and use it to set our appbar title. title: new Text(widget.title), ), body: new Center( - // Center is a layout widget. It takes a single child and positions it - // in the middle of the parent. - child: new Column( - // Column is also layout widget. It takes a list of children and - // arranges them vertically. By default, it sizes itself to fit its - // children horizontally, and tries to be as tall as its parent. - // - // Invoke "debug paint" (press "p" in the console where you ran - // "flutter run", or select "Toggle Debug Paint" from the Flutter tool - // window in IntelliJ) to see the wireframe for each widget. - // - // Column has various properties to control how it sizes itself and - // how it positions its children. Here we use mainAxisAlignment to - // center the children vertically; the main axis here is the vertical - // axis because Columns are vertical (the cross axis would be - // horizontal). - mainAxisAlignment: MainAxisAlignment.center, - children: [ - new Text( - 'You have pushed the button this many times:', - ), - new Text( - '$_counter', - style: Theme.of(context).textTheme.display1, - ), - ], + child: AnimatedContainer( + curve: Curves.decelerate, + duration: duration, + width: width, + height: height, + decoration: BoxDecoration( + color: color, + shape: boxShape, + ), ), ), floatingActionButton: new FloatingActionButton( - onPressed: _incrementCounter, - tooltip: 'Increment', + onPressed: () { + isCircle = !isCircle; + _toggle(); + }, + tooltip: 'Animate', child: new Icon(Icons.add), - ), // This trailing comma makes auto-formatting nicer for build methods. + ), ); } } From 35360157737e1fa5f0f9d1d84622d96c031626ac Mon Sep 17 00:00:00 2001 From: 28JayG Date: Sun, 24 Feb 2019 00:33:14 +0530 Subject: [PATCH 02/26] abstracts the code --- lib/main.dart | 67 +--------------------------------------- lib/res/home_page.dart | 69 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 70 insertions(+), 66 deletions(-) create mode 100644 lib/res/home_page.dart diff --git a/lib/main.dart b/lib/main.dart index 71ec1db..4e305b7 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -1,13 +1,10 @@ +import 'package:animations/res/home_page.dart'; import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); -const Duration duration = Duration( - milliseconds: 500, -); class MyApp extends StatelessWidget { - // This widget is the root of your application. @override Widget build(BuildContext context) { return new MaterialApp( @@ -17,65 +14,3 @@ class MyApp extends StatelessWidget { } } -class MyHomePage extends StatefulWidget { - MyHomePage({Key key, this.title}) : super(key: key); - final String title; - - @override - _MyHomePageState createState() => new _MyHomePageState(); -} - -class _MyHomePageState extends State with TickerProviderStateMixin { - double height; - double width; - Color color; - BoxShape boxShape = BoxShape.rectangle; - bool isCircle; - - @override - void initState() { - super.initState(); - height = 100.0; - width = 100.0; - color = Colors.blue; - isCircle = false; - } - - _toggle() { - setState(() { - boxShape = isCircle ? BoxShape.circle : BoxShape.rectangle; - height = isCircle ? 400.0 : 100.0; - width = isCircle ? 400.0 : 100.0; - color = isCircle ? Colors.red : Colors.blue; - }); - } - - @override - Widget build(BuildContext context) { - return new Scaffold( - appBar: new AppBar( - title: new Text(widget.title), - ), - body: new Center( - child: AnimatedContainer( - curve: Curves.decelerate, - duration: duration, - width: width, - height: height, - decoration: BoxDecoration( - color: color, - shape: boxShape, - ), - ), - ), - floatingActionButton: new FloatingActionButton( - onPressed: () { - isCircle = !isCircle; - _toggle(); - }, - tooltip: 'Animate', - child: new Icon(Icons.add), - ), - ); - } -} diff --git a/lib/res/home_page.dart b/lib/res/home_page.dart new file mode 100644 index 0000000..37bc4bc --- /dev/null +++ b/lib/res/home_page.dart @@ -0,0 +1,69 @@ +import 'package:flutter/material.dart'; + + +const Duration duration = Duration( + milliseconds: 600, +); + +class MyHomePage extends StatefulWidget { + MyHomePage({Key key, this.title}) : super(key: key); + final String title; + + @override + _MyHomePageState createState() => new _MyHomePageState(); +} + +class _MyHomePageState extends State with TickerProviderStateMixin { + double height; + double width; + Color color; + BoxShape boxShape = BoxShape.rectangle; + bool isCircle; + + @override + void initState() { + super.initState(); + height = 100.0; + width = 100.0; + color = Colors.blue; + isCircle = false; + } + + _toggle() { + setState(() { + boxShape = isCircle ? BoxShape.circle : BoxShape.rectangle; + height = isCircle ? 400.0 : 100.0; + width = isCircle ? 400.0 : 100.0; + color = isCircle ? Colors.red : Colors.blue; + }); + } + + @override + Widget build(BuildContext context) { + return new Scaffold( + appBar: new AppBar( + title: new Text(widget.title), + ), + body: new Center( + child: AnimatedContainer( + curve: Curves.fastOutSlowIn, + duration: duration, + width: width, + height: height, + decoration: BoxDecoration( + color: color, +// shape: boxShape, + ), + ), + ), + floatingActionButton: new FloatingActionButton( + onPressed: () { + isCircle = !isCircle; + _toggle(); + }, + tooltip: 'Animate', + child: new Icon(Icons.add), + ), + ); + } +} From 26bbf6050b40fa312adc5451c6d1ddb4787845e2 Mon Sep 17 00:00:00 2001 From: 28JayG Date: Sun, 24 Feb 2019 12:38:43 +0530 Subject: [PATCH 03/26] finishes up cross-fade animation tutorial [with commenting] --- lib/res/home_page.dart | 71 +++++++++++++++++++++--------------------- 1 file changed, 35 insertions(+), 36 deletions(-) diff --git a/lib/res/home_page.dart b/lib/res/home_page.dart index 37bc4bc..406f558 100644 --- a/lib/res/home_page.dart +++ b/lib/res/home_page.dart @@ -1,6 +1,5 @@ import 'package:flutter/material.dart'; - const Duration duration = Duration( milliseconds: 600, ); @@ -14,29 +13,14 @@ class MyHomePage extends StatefulWidget { } class _MyHomePageState extends State with TickerProviderStateMixin { - double height; - double width; - Color color; - BoxShape boxShape = BoxShape.rectangle; - bool isCircle; - - @override - void initState() { - super.initState(); - height = 100.0; - width = 100.0; - color = Colors.blue; - isCircle = false; - } - - _toggle() { - setState(() { - boxShape = isCircle ? BoxShape.circle : BoxShape.rectangle; - height = isCircle ? 400.0 : 100.0; - width = isCircle ? 400.0 : 100.0; - color = isCircle ? Colors.red : Colors.blue; - }); - } +// bool isFirstVisible; +// +// @override +// void initState() { +// super.initState(); +// +// isFirstVisible = true; +// } @override Widget build(BuildContext context) { @@ -45,21 +29,36 @@ class _MyHomePageState extends State with TickerProviderStateMixin { title: new Text(widget.title), ), body: new Center( - child: AnimatedContainer( - curve: Curves.fastOutSlowIn, - duration: duration, - width: width, - height: height, - decoration: BoxDecoration( - color: color, -// shape: boxShape, - ), - ), +// child: AnimatedCrossFade( +//// layoutBuilder: (Widget firstChild, Key firstChildKey, Widget secondChild, Key secondChildKey,){ +//// +//// return Stack( +//// alignment: Alignment.center, +//// children: [ +//// firstChild, +//// secondChild, +//// ], +//// ); +//// +//// }, +// firstChild: FlutterLogo( +// size: 100.0, +// ), +// secondChild: Container( +// color: Colors.purple, +// height: 200.0, +// width: 150.0, +// ), +// crossFadeState: isFirstVisible +// ? CrossFadeState.showFirst +// : CrossFadeState.showSecond, +// duration: duration, +// ), ), floatingActionButton: new FloatingActionButton( onPressed: () { - isCircle = !isCircle; - _toggle(); +// isFirstVisible = !isFirstVisible; +// setState(() {}); }, tooltip: 'Animate', child: new Icon(Icons.add), From d7792ec8df47227eab7f12f7aa80655cf89c4175 Mon Sep 17 00:00:00 2001 From: 28JayG Date: Sun, 24 Feb 2019 13:50:32 +0530 Subject: [PATCH 04/26] navigator added to a secondary page --- lib/res/home_page.dart | 47 +++++++------------------------------ lib/res/secondary_page.dart | 18 ++++++++++++++ 2 files changed, 27 insertions(+), 38 deletions(-) create mode 100644 lib/res/secondary_page.dart diff --git a/lib/res/home_page.dart b/lib/res/home_page.dart index 406f558..e8aa621 100644 --- a/lib/res/home_page.dart +++ b/lib/res/home_page.dart @@ -1,3 +1,4 @@ +import 'package:animations/res/secondary_page.dart'; import 'package:flutter/material.dart'; const Duration duration = Duration( @@ -13,52 +14,22 @@ class MyHomePage extends StatefulWidget { } class _MyHomePageState extends State with TickerProviderStateMixin { -// bool isFirstVisible; -// -// @override -// void initState() { -// super.initState(); -// -// isFirstVisible = true; -// } - @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text(widget.title), ), - body: new Center( -// child: AnimatedCrossFade( -//// layoutBuilder: (Widget firstChild, Key firstChildKey, Widget secondChild, Key secondChildKey,){ -//// -//// return Stack( -//// alignment: Alignment.center, -//// children: [ -//// firstChild, -//// secondChild, -//// ], -//// ); -//// -//// }, -// firstChild: FlutterLogo( -// size: 100.0, -// ), -// secondChild: Container( -// color: Colors.purple, -// height: 200.0, -// width: 150.0, -// ), -// crossFadeState: isFirstVisible -// ? CrossFadeState.showFirst -// : CrossFadeState.showSecond, -// duration: duration, -// ), - ), + body: new Center(), floatingActionButton: new FloatingActionButton( onPressed: () { -// isFirstVisible = !isFirstVisible; -// setState(() {}); + Navigator.of(context).push( + MaterialPageRoute( + builder: (BuildContext context) { + return SecondaryPage(title: 'Secondary Page',); + }, + ), + ); }, tooltip: 'Animate', child: new Icon(Icons.add), diff --git a/lib/res/secondary_page.dart b/lib/res/secondary_page.dart new file mode 100644 index 0000000..fe68904 --- /dev/null +++ b/lib/res/secondary_page.dart @@ -0,0 +1,18 @@ +import 'package:flutter/material.dart'; + + +class SecondaryPage extends StatelessWidget { + SecondaryPage({Key key, this.title}) : super(key: key); + final String title; + + @override + Widget build(BuildContext context) { + return new Scaffold( + appBar: new AppBar( + title: new Text(title), + ), + body: new Center( + ), + ); + } +} From 36f07ebe479688b4a90f1f29c30a41a61943748b Mon Sep 17 00:00:00 2001 From: 28JayG Date: Sun, 24 Feb 2019 14:24:07 +0530 Subject: [PATCH 05/26] hero-animation ready --- lib/res/home_page.dart | 31 +++++++++++++++++++++++++++++-- lib/res/secondary_page.dart | 27 +++++++++++++++++++++++++-- pubspec.yaml | 1 + 3 files changed, 55 insertions(+), 4 deletions(-) diff --git a/lib/res/home_page.dart b/lib/res/home_page.dart index e8aa621..a4b23be 100644 --- a/lib/res/home_page.dart +++ b/lib/res/home_page.dart @@ -1,5 +1,6 @@ import 'package:animations/res/secondary_page.dart'; import 'package:flutter/material.dart'; +import 'package:material_design_icons_flutter/material_design_icons_flutter.dart'; const Duration duration = Duration( milliseconds: 600, @@ -20,13 +21,39 @@ class _MyHomePageState extends State with TickerProviderStateMixin { appBar: new AppBar( title: new Text(widget.title), ), - body: new Center(), + body: new Stack( + children: [ + + Align( + alignment: Alignment.topRight, + child: Hero( + tag: 'flutter logo', + child: FlutterLogo( + size: 100.0, + ), + ), + ), + Align( + alignment: Alignment.bottomLeft, + child: Hero( + tag: 'some logo', + child: Icon( + MdiIcons.firebase, + size: 100.0, + color: Colors.yellow, + ), + ), + ), + ], + ), floatingActionButton: new FloatingActionButton( onPressed: () { Navigator.of(context).push( MaterialPageRoute( builder: (BuildContext context) { - return SecondaryPage(title: 'Secondary Page',); + return SecondaryPage( + title: 'Secondary Page', + ); }, ), ); diff --git a/lib/res/secondary_page.dart b/lib/res/secondary_page.dart index fe68904..c52b8bc 100644 --- a/lib/res/secondary_page.dart +++ b/lib/res/secondary_page.dart @@ -1,5 +1,5 @@ import 'package:flutter/material.dart'; - +import 'package:material_design_icons_flutter/material_design_icons_flutter.dart'; class SecondaryPage extends StatelessWidget { SecondaryPage({Key key, this.title}) : super(key: key); @@ -11,7 +11,30 @@ class SecondaryPage extends StatelessWidget { appBar: new AppBar( title: new Text(title), ), - body: new Center( + body: Stack( + children: [ + + Align( + alignment: Alignment.bottomLeft, + child: Hero( + tag: 'flutter logo', + child: FlutterLogo( + size: 200.0, + ), + ), + ), + Align( + alignment: Alignment.topRight, + child: Hero( + tag: 'some logo', + child: Icon( + MdiIcons.firebase, + size: 200.0, + color: Colors.yellow, + ), + ), + ), + ], ), ); } diff --git a/pubspec.yaml b/pubspec.yaml index 2162312..f26cf78 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -19,6 +19,7 @@ dependencies: # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^0.1.2 + material_design_icons_flutter: any dev_dependencies: flutter_test: From 1b9cd5cdef77bf846a8aa1f4240f28803ae2883a Mon Sep 17 00:00:00 2001 From: 28JayG Date: Sun, 24 Feb 2019 14:26:22 +0530 Subject: [PATCH 06/26] commenting done --- lib/res/home_page.dart | 68 +++++++++++++++--------------- lib/res/secondary_page.dart | 82 ++++++++++++++++++------------------- 2 files changed, 75 insertions(+), 75 deletions(-) diff --git a/lib/res/home_page.dart b/lib/res/home_page.dart index a4b23be..4a433ca 100644 --- a/lib/res/home_page.dart +++ b/lib/res/home_page.dart @@ -21,42 +21,42 @@ class _MyHomePageState extends State with TickerProviderStateMixin { appBar: new AppBar( title: new Text(widget.title), ), - body: new Stack( - children: [ - - Align( - alignment: Alignment.topRight, - child: Hero( - tag: 'flutter logo', - child: FlutterLogo( - size: 100.0, - ), - ), - ), - Align( - alignment: Alignment.bottomLeft, - child: Hero( - tag: 'some logo', - child: Icon( - MdiIcons.firebase, - size: 100.0, - color: Colors.yellow, - ), - ), - ), - ], - ), +// body: new Stack( +// children: [ +// +// Align( +// alignment: Alignment.topRight, +// child: Hero( +// tag: 'flutter logo', +// child: FlutterLogo( +// size: 100.0, +// ), +// ), +// ), +// Align( +// alignment: Alignment.bottomLeft, +// child: Hero( +// tag: 'some logo', +// child: Icon( +// MdiIcons.firebase, +// size: 100.0, +// color: Colors.yellow, +// ), +// ), +// ), +// ], +// ), floatingActionButton: new FloatingActionButton( onPressed: () { - Navigator.of(context).push( - MaterialPageRoute( - builder: (BuildContext context) { - return SecondaryPage( - title: 'Secondary Page', - ); - }, - ), - ); +// Navigator.of(context).push( +// MaterialPageRoute( +// builder: (BuildContext context) { +// return SecondaryPage( +// title: 'Secondary Page', +// ); +// }, +// ), +// ); }, tooltip: 'Animate', child: new Icon(Icons.add), diff --git a/lib/res/secondary_page.dart b/lib/res/secondary_page.dart index c52b8bc..6c572ce 100644 --- a/lib/res/secondary_page.dart +++ b/lib/res/secondary_page.dart @@ -1,41 +1,41 @@ -import 'package:flutter/material.dart'; -import 'package:material_design_icons_flutter/material_design_icons_flutter.dart'; - -class SecondaryPage extends StatelessWidget { - SecondaryPage({Key key, this.title}) : super(key: key); - final String title; - - @override - Widget build(BuildContext context) { - return new Scaffold( - appBar: new AppBar( - title: new Text(title), - ), - body: Stack( - children: [ - - Align( - alignment: Alignment.bottomLeft, - child: Hero( - tag: 'flutter logo', - child: FlutterLogo( - size: 200.0, - ), - ), - ), - Align( - alignment: Alignment.topRight, - child: Hero( - tag: 'some logo', - child: Icon( - MdiIcons.firebase, - size: 200.0, - color: Colors.yellow, - ), - ), - ), - ], - ), - ); - } -} +//import 'package:flutter/material.dart'; +//import 'package:material_design_icons_flutter/material_design_icons_flutter.dart'; +// +//class SecondaryPage extends StatelessWidget { +// SecondaryPage({Key key, this.title}) : super(key: key); +// final String title; +// +// @override +// Widget build(BuildContext context) { +// return new Scaffold( +// appBar: new AppBar( +// title: new Text(title), +// ), +// body: Stack( +// children: [ +// +// Align( +// alignment: Alignment.bottomLeft, +// child: Hero( +// tag: 'flutter logo', +// child: FlutterLogo( +// size: 200.0, +// ), +// ), +// ), +// Align( +// alignment: Alignment.topRight, +// child: Hero( +// tag: 'some logo', +// child: Icon( +// MdiIcons.firebase, +// size: 200.0, +// color: Colors.yellow, +// ), +// ), +// ), +// ], +// ), +// ); +// } +//} From 4c3e6afb865d0e66582919e48cf446bac7b84111 Mon Sep 17 00:00:00 2001 From: 28JayG Date: Mon, 25 Feb 2019 22:09:31 +0530 Subject: [PATCH 07/26] Adds todo --- lib/res/home_page.dart | 72 ++++++++++++++++---------------- lib/res/secondary_page.dart | 82 ++++++++++++++++++------------------- 2 files changed, 77 insertions(+), 77 deletions(-) diff --git a/lib/res/home_page.dart b/lib/res/home_page.dart index 4a433ca..938478c 100644 --- a/lib/res/home_page.dart +++ b/lib/res/home_page.dart @@ -1,7 +1,7 @@ import 'package:animations/res/secondary_page.dart'; import 'package:flutter/material.dart'; import 'package:material_design_icons_flutter/material_design_icons_flutter.dart'; - +//TODO:Add more to hero const Duration duration = Duration( milliseconds: 600, ); @@ -21,45 +21,45 @@ class _MyHomePageState extends State with TickerProviderStateMixin { appBar: new AppBar( title: new Text(widget.title), ), -// body: new Stack( -// children: [ -// -// Align( -// alignment: Alignment.topRight, -// child: Hero( -// tag: 'flutter logo', -// child: FlutterLogo( -// size: 100.0, -// ), -// ), -// ), -// Align( -// alignment: Alignment.bottomLeft, -// child: Hero( -// tag: 'some logo', -// child: Icon( -// MdiIcons.firebase, -// size: 100.0, -// color: Colors.yellow, -// ), -// ), -// ), -// ], -// ), + body: new Stack( + children: [ + + Align( + alignment: Alignment.topRight, + child: Hero( + tag: 'flutter logo', + child: FlutterLogo( + size: 100.0, + ), + ), + ), + Align( + alignment: Alignment.bottomLeft, + child: Hero( + tag: 'some logo', + child: Icon( + MdiIcons.firebase, + size: 100.0, + color: Colors.yellow, + ), + ), + ), + ], + ), floatingActionButton: new FloatingActionButton( onPressed: () { -// Navigator.of(context).push( -// MaterialPageRoute( -// builder: (BuildContext context) { -// return SecondaryPage( -// title: 'Secondary Page', -// ); -// }, -// ), -// ); + Navigator.of(context).push( + MaterialPageRoute( + builder: (BuildContext context) { + return SecondaryPage( + title: 'Secondary Page', + ); + }, + ), + ); }, tooltip: 'Animate', - child: new Icon(Icons.add), + child: new Icon(Icons.add ), ), ); } diff --git a/lib/res/secondary_page.dart b/lib/res/secondary_page.dart index 6c572ce..c52b8bc 100644 --- a/lib/res/secondary_page.dart +++ b/lib/res/secondary_page.dart @@ -1,41 +1,41 @@ -//import 'package:flutter/material.dart'; -//import 'package:material_design_icons_flutter/material_design_icons_flutter.dart'; -// -//class SecondaryPage extends StatelessWidget { -// SecondaryPage({Key key, this.title}) : super(key: key); -// final String title; -// -// @override -// Widget build(BuildContext context) { -// return new Scaffold( -// appBar: new AppBar( -// title: new Text(title), -// ), -// body: Stack( -// children: [ -// -// Align( -// alignment: Alignment.bottomLeft, -// child: Hero( -// tag: 'flutter logo', -// child: FlutterLogo( -// size: 200.0, -// ), -// ), -// ), -// Align( -// alignment: Alignment.topRight, -// child: Hero( -// tag: 'some logo', -// child: Icon( -// MdiIcons.firebase, -// size: 200.0, -// color: Colors.yellow, -// ), -// ), -// ), -// ], -// ), -// ); -// } -//} +import 'package:flutter/material.dart'; +import 'package:material_design_icons_flutter/material_design_icons_flutter.dart'; + +class SecondaryPage extends StatelessWidget { + SecondaryPage({Key key, this.title}) : super(key: key); + final String title; + + @override + Widget build(BuildContext context) { + return new Scaffold( + appBar: new AppBar( + title: new Text(title), + ), + body: Stack( + children: [ + + Align( + alignment: Alignment.bottomLeft, + child: Hero( + tag: 'flutter logo', + child: FlutterLogo( + size: 200.0, + ), + ), + ), + Align( + alignment: Alignment.topRight, + child: Hero( + tag: 'some logo', + child: Icon( + MdiIcons.firebase, + size: 200.0, + color: Colors.yellow, + ), + ), + ), + ], + ), + ); + } +} From 5cc17049e1328c0dc128dfa628ca703a435c899c Mon Sep 17 00:00:00 2001 From: 28JayG Date: Mon, 25 Feb 2019 23:09:14 +0530 Subject: [PATCH 08/26] boxTransition Over --- lib/res/home_page.dart | 73 ++++++++++++++++++++++-------------------- 1 file changed, 39 insertions(+), 34 deletions(-) diff --git a/lib/res/home_page.dart b/lib/res/home_page.dart index 938478c..0a1e3f0 100644 --- a/lib/res/home_page.dart +++ b/lib/res/home_page.dart @@ -1,7 +1,7 @@ import 'package:animations/res/secondary_page.dart'; import 'package:flutter/material.dart'; import 'package:material_design_icons_flutter/material_design_icons_flutter.dart'; -//TODO:Add more to hero + const Duration duration = Duration( milliseconds: 600, ); @@ -15,51 +15,56 @@ class MyHomePage extends StatefulWidget { } class _MyHomePageState extends State with TickerProviderStateMixin { + Animation animation; + AnimationController controller; + + @override + void initState() { + super.initState(); + + controller = AnimationController(vsync: this, duration: duration) + ..addListener(() => setState(() {})); + animation = DecorationTween( + begin: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(30), + boxShadow: [ + BoxShadow(color: Colors.black54, blurRadius: 30, spreadRadius: 15), + BoxShadow(color: Colors.blue, blurRadius: 15, spreadRadius: 7), + ], + ), + end: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(0.0), + boxShadow: [ + BoxShadow(color: Colors.blue, blurRadius: 15, spreadRadius: 7), + ] + ),) + .animate(controller); + } + @override Widget build(BuildContext context) { return new Scaffold( + backgroundColor: Colors.white, appBar: new AppBar( title: new Text(widget.title), ), - body: new Stack( - children: [ - - Align( - alignment: Alignment.topRight, - child: Hero( - tag: 'flutter logo', - child: FlutterLogo( - size: 100.0, - ), - ), + body: Center( + child: DecoratedBoxTransition( + position: DecorationPosition.background, + decoration: animation, + child: FlutterLogo( + size: 200, ), - Align( - alignment: Alignment.bottomLeft, - child: Hero( - tag: 'some logo', - child: Icon( - MdiIcons.firebase, - size: 100.0, - color: Colors.yellow, - ), - ), - ), - ], + ), ), floatingActionButton: new FloatingActionButton( onPressed: () { - Navigator.of(context).push( - MaterialPageRoute( - builder: (BuildContext context) { - return SecondaryPage( - title: 'Secondary Page', - ); - }, - ), - ); + controller.isCompleted?controller.reverse():controller.forward(); }, tooltip: 'Animate', - child: new Icon(Icons.add ), + child: new Icon(Icons.add), ), ); } From ae49bccf9c4f44584b202cb804cf9fd894bec006 Mon Sep 17 00:00:00 2001 From: 28JayG Date: Mon, 25 Feb 2019 23:35:28 +0530 Subject: [PATCH 09/26] Commenting done --- lib/res/home_page.dart | 76 +++++++++++++++++++------------------ lib/res/secondary_page.dart | 41 -------------------- 2 files changed, 40 insertions(+), 77 deletions(-) delete mode 100644 lib/res/secondary_page.dart diff --git a/lib/res/home_page.dart b/lib/res/home_page.dart index 0a1e3f0..d2dadfe 100644 --- a/lib/res/home_page.dart +++ b/lib/res/home_page.dart @@ -1,6 +1,5 @@ -import 'package:animations/res/secondary_page.dart'; + import 'package:flutter/material.dart'; -import 'package:material_design_icons_flutter/material_design_icons_flutter.dart'; const Duration duration = Duration( milliseconds: 600, @@ -15,33 +14,36 @@ class MyHomePage extends StatefulWidget { } class _MyHomePageState extends State with TickerProviderStateMixin { - Animation animation; - AnimationController controller; - @override - void initState() { - super.initState(); + //TODO: [2] Declare and initialize animation and controller + // {Hint: DecoratedBoxTransition will take animation of type Decoration} +// Animation animation; +// AnimationController controller; - controller = AnimationController(vsync: this, duration: duration) - ..addListener(() => setState(() {})); - animation = DecorationTween( - begin: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.circular(30), - boxShadow: [ - BoxShadow(color: Colors.black54, blurRadius: 30, spreadRadius: 15), - BoxShadow(color: Colors.blue, blurRadius: 15, spreadRadius: 7), - ], - ), - end: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.circular(0.0), - boxShadow: [ - BoxShadow(color: Colors.blue, blurRadius: 15, spreadRadius: 7), - ] - ),) - .animate(controller); - } +// @override +// void initState() { +// super.initState(); +// +// controller = AnimationController(vsync: this, duration: duration) +// ..addListener(() => setState(() {})); +// animation = DecorationTween( +// begin: BoxDecoration( +// color: Colors.white, +// borderRadius: BorderRadius.circular(30), +// boxShadow: [ +// BoxShadow(color: Colors.black54, blurRadius: 30, spreadRadius: 15), +// BoxShadow(color: Colors.blue, blurRadius: 15, spreadRadius: 7), +// ], +// ), +// end: BoxDecoration( +// color: Colors.white, +// borderRadius: BorderRadius.circular(0.0), +// boxShadow: [ +// BoxShadow(color: Colors.blue, blurRadius: 15, spreadRadius: 7), +// ] +// ),) +// .animate(controller); +// } @override Widget build(BuildContext context) { @@ -51,20 +53,22 @@ class _MyHomePageState extends State with TickerProviderStateMixin { title: new Text(widget.title), ), body: Center( - child: DecoratedBoxTransition( - position: DecorationPosition.background, - decoration: animation, - child: FlutterLogo( - size: 200, - ), - ), +//TODO:[3] give the DecoratedBoxTransition its decoration and child + //TODO:[1] Bring in the DecoratedBoxTransition +// child: DecoratedBoxTransition( +//// position: DecorationPosition.background, +//// decoration: animation, +//// child: FlutterLogo( +//// size: 200, +//// ), +// ), ), floatingActionButton: new FloatingActionButton( onPressed: () { - controller.isCompleted?controller.reverse():controller.forward(); +// controller.isCompleted?controller.reverse():controller.forward(); }, tooltip: 'Animate', - child: new Icon(Icons.add), + child: new Icon(Icons.play_arrow), ), ); } diff --git a/lib/res/secondary_page.dart b/lib/res/secondary_page.dart deleted file mode 100644 index c52b8bc..0000000 --- a/lib/res/secondary_page.dart +++ /dev/null @@ -1,41 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:material_design_icons_flutter/material_design_icons_flutter.dart'; - -class SecondaryPage extends StatelessWidget { - SecondaryPage({Key key, this.title}) : super(key: key); - final String title; - - @override - Widget build(BuildContext context) { - return new Scaffold( - appBar: new AppBar( - title: new Text(title), - ), - body: Stack( - children: [ - - Align( - alignment: Alignment.bottomLeft, - child: Hero( - tag: 'flutter logo', - child: FlutterLogo( - size: 200.0, - ), - ), - ), - Align( - alignment: Alignment.topRight, - child: Hero( - tag: 'some logo', - child: Icon( - MdiIcons.firebase, - size: 200.0, - color: Colors.yellow, - ), - ), - ), - ], - ), - ); - } -} From 55a7afa7b2513d07c46dd4826f41f95b5ff1e011 Mon Sep 17 00:00:00 2001 From: 28JayG Date: Tue, 26 Feb 2019 00:50:21 +0530 Subject: [PATCH 10/26] fade transition done along with commenting --- lib/res/home_page.dart | 38 ++++++++++---------------------------- 1 file changed, 10 insertions(+), 28 deletions(-) diff --git a/lib/res/home_page.dart b/lib/res/home_page.dart index d2dadfe..bc8bb0d 100644 --- a/lib/res/home_page.dart +++ b/lib/res/home_page.dart @@ -1,4 +1,3 @@ - import 'package:flutter/material.dart'; const Duration duration = Duration( @@ -14,35 +13,18 @@ class MyHomePage extends StatefulWidget { } class _MyHomePageState extends State with TickerProviderStateMixin { - //TODO: [2] Declare and initialize animation and controller - // {Hint: DecoratedBoxTransition will take animation of type Decoration} -// Animation animation; + // {Hint: FadeTransition will take animation of type double for its opacity} +// Animation animation; // AnimationController controller; - +// // @override // void initState() { // super.initState(); // // controller = AnimationController(vsync: this, duration: duration) // ..addListener(() => setState(() {})); -// animation = DecorationTween( -// begin: BoxDecoration( -// color: Colors.white, -// borderRadius: BorderRadius.circular(30), -// boxShadow: [ -// BoxShadow(color: Colors.black54, blurRadius: 30, spreadRadius: 15), -// BoxShadow(color: Colors.blue, blurRadius: 15, spreadRadius: 7), -// ], -// ), -// end: BoxDecoration( -// color: Colors.white, -// borderRadius: BorderRadius.circular(0.0), -// boxShadow: [ -// BoxShadow(color: Colors.blue, blurRadius: 15, spreadRadius: 7), -// ] -// ),) -// .animate(controller); +// animation = CurvedAnimation(parent: controller, curve: Curves.decelerate); // } @override @@ -53,19 +35,19 @@ class _MyHomePageState extends State with TickerProviderStateMixin { title: new Text(widget.title), ), body: Center( -//TODO:[3] give the DecoratedBoxTransition its decoration and child - //TODO:[1] Bring in the DecoratedBoxTransition -// child: DecoratedBoxTransition( -//// position: DecorationPosition.background, -//// decoration: animation, +//TODO:[3] give the FadeTransition its decoration and child + //TODO:[1] Time for FadeTransition +// child: FadeTransition( +//// opacity: animation, //// child: FlutterLogo( +//// style: FlutterLogoStyle.stacked, //// size: 200, //// ), // ), ), floatingActionButton: new FloatingActionButton( onPressed: () { -// controller.isCompleted?controller.reverse():controller.forward(); +// controller.isCompleted ? controller.reverse() : controller.forward(); }, tooltip: 'Animate', child: new Icon(Icons.play_arrow), From e40057094d1ac02940f096964a225e630bc16851 Mon Sep 17 00:00:00 2001 From: 28JayG Date: Tue, 26 Feb 2019 14:01:59 +0530 Subject: [PATCH 11/26] Positioned Transition done .. still finding a way to not hardcode the positions --- lib/res/home_page.dart | 49 +++++++++++++++++++++++------------------- 1 file changed, 27 insertions(+), 22 deletions(-) diff --git a/lib/res/home_page.dart b/lib/res/home_page.dart index bc8bb0d..261e17a 100644 --- a/lib/res/home_page.dart +++ b/lib/res/home_page.dart @@ -14,18 +14,22 @@ class MyHomePage extends StatefulWidget { class _MyHomePageState extends State with TickerProviderStateMixin { //TODO: [2] Declare and initialize animation and controller - // {Hint: FadeTransition will take animation of type double for its opacity} -// Animation animation; -// AnimationController controller; -// -// @override -// void initState() { -// super.initState(); -// -// controller = AnimationController(vsync: this, duration: duration) -// ..addListener(() => setState(() {})); -// animation = CurvedAnimation(parent: controller, curve: Curves.decelerate); -// } + // {Hint: PositionedTransition will take animation of type RelativeRect and should have Stack as a parent} + Animation animation; + AnimationController controller; + + @override + void initState() { + super.initState(); + + controller = AnimationController(vsync: this, duration: duration) + ..addListener(() => setState(() {})); + + animation = RelativeRectTween( + begin: RelativeRect.fromLTRB(0, 0, 300, 300), + end: RelativeRect.fromLTRB(30, 30, 30, 30), + ).chain(CurveTween(curve: Curves.elasticInOut)).animate(controller); + } @override Widget build(BuildContext context) { @@ -35,19 +39,20 @@ class _MyHomePageState extends State with TickerProviderStateMixin { title: new Text(widget.title), ), body: Center( -//TODO:[3] give the FadeTransition its decoration and child - //TODO:[1] Time for FadeTransition -// child: FadeTransition( -//// opacity: animation, -//// child: FlutterLogo( -//// style: FlutterLogoStyle.stacked, -//// size: 200, -//// ), -// ), +//TODO:[3] give the PositionedTransition its rect and child + //TODO:[1] Have your PositionedTransition + child: Stack( + children: [ + PositionedTransition( + rect: animation, + child: FlutterLogo(), + ), + ], + ), ), floatingActionButton: new FloatingActionButton( onPressed: () { -// controller.isCompleted ? controller.reverse() : controller.forward(); + controller.isCompleted ? controller.reverse() : controller.forward(); }, tooltip: 'Animate', child: new Icon(Icons.play_arrow), From 93906d2b296809a1718e6753bb6b83469120bf56 Mon Sep 17 00:00:00 2001 From: 28JayG Date: Tue, 26 Feb 2019 14:03:49 +0530 Subject: [PATCH 12/26] Commenting done for tutorial --- lib/res/home_page.dart | 42 +++++++++++++++++++++--------------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/lib/res/home_page.dart b/lib/res/home_page.dart index 261e17a..d210eb6 100644 --- a/lib/res/home_page.dart +++ b/lib/res/home_page.dart @@ -15,21 +15,21 @@ class MyHomePage extends StatefulWidget { class _MyHomePageState extends State with TickerProviderStateMixin { //TODO: [2] Declare and initialize animation and controller // {Hint: PositionedTransition will take animation of type RelativeRect and should have Stack as a parent} - Animation animation; - AnimationController controller; - - @override - void initState() { - super.initState(); - - controller = AnimationController(vsync: this, duration: duration) - ..addListener(() => setState(() {})); - - animation = RelativeRectTween( - begin: RelativeRect.fromLTRB(0, 0, 300, 300), - end: RelativeRect.fromLTRB(30, 30, 30, 30), - ).chain(CurveTween(curve: Curves.elasticInOut)).animate(controller); - } +// Animation animation; +// AnimationController controller; +// +// @override +// void initState() { +// super.initState(); +// +// controller = AnimationController(vsync: this, duration: duration) +// ..addListener(() => setState(() {})); +// +// animation = RelativeRectTween( +// begin: RelativeRect.fromLTRB(0, 0, 300, 300), +// end: RelativeRect.fromLTRB(30, 30, 30, 30), +// ).chain(CurveTween(curve: Curves.elasticInOut)).animate(controller); +// } @override Widget build(BuildContext context) { @@ -40,19 +40,19 @@ class _MyHomePageState extends State with TickerProviderStateMixin { ), body: Center( //TODO:[3] give the PositionedTransition its rect and child - //TODO:[1] Have your PositionedTransition +// TODO:[1] Have your PositionedTransition child: Stack( children: [ - PositionedTransition( - rect: animation, - child: FlutterLogo(), - ), +// PositionedTransition( +//// rect: animation, +//// child: FlutterLogo(), +// ), ], ), ), floatingActionButton: new FloatingActionButton( onPressed: () { - controller.isCompleted ? controller.reverse() : controller.forward(); +// controller.isCompleted ? controller.reverse() : controller.forward(); }, tooltip: 'Animate', child: new Icon(Icons.play_arrow), From 268f9e11ba90a29158511a22852f6476feaa7f3c Mon Sep 17 00:00:00 2001 From: 28JayG Date: Tue, 26 Feb 2019 14:38:23 +0530 Subject: [PATCH 13/26] rotationTransition done --- lib/res/home_page.dart | 76 +++++++++++++++++++++++++----------------- 1 file changed, 46 insertions(+), 30 deletions(-) diff --git a/lib/res/home_page.dart b/lib/res/home_page.dart index d210eb6..aa70464 100644 --- a/lib/res/home_page.dart +++ b/lib/res/home_page.dart @@ -1,7 +1,7 @@ import 'package:flutter/material.dart'; const Duration duration = Duration( - milliseconds: 600, + milliseconds: 700, ); class MyHomePage extends StatefulWidget { @@ -14,22 +14,29 @@ class MyHomePage extends StatefulWidget { class _MyHomePageState extends State with TickerProviderStateMixin { //TODO: [2] Declare and initialize animation and controller - // {Hint: PositionedTransition will take animation of type RelativeRect and should have Stack as a parent} -// Animation animation; -// AnimationController controller; -// -// @override -// void initState() { -// super.initState(); -// -// controller = AnimationController(vsync: this, duration: duration) -// ..addListener(() => setState(() {})); -// -// animation = RelativeRectTween( -// begin: RelativeRect.fromLTRB(0, 0, 300, 300), -// end: RelativeRect.fromLTRB(30, 30, 30, 30), -// ).chain(CurveTween(curve: Curves.elasticInOut)).animate(controller); -// } + // {Hint: RotationTransition will take animation of type double for the turns} + Animation animation; + AnimationController controller; + + @override + void initState() { + super.initState(); + + controller = AnimationController(vsync: this, duration: duration) + ..addListener(() => setState(() {})); +//Tip: you may also give this +// animation = CurvedAnimation(parent: controller, curve: Curves.elasticOut); + animation = Tween(begin: -0.1, end: 0.1).animate(controller); + controller.forward(); + controller.addStatusListener((AnimationStatus status) { + if (status == AnimationStatus.completed) { + controller.reverse(); + } + if (status == AnimationStatus.dismissed) { + controller.forward(); + } + }); + } @override Widget build(BuildContext context) { @@ -39,24 +46,33 @@ class _MyHomePageState extends State with TickerProviderStateMixin { title: new Text(widget.title), ), body: Center( -//TODO:[3] give the PositionedTransition its rect and child -// TODO:[1] Have your PositionedTransition +//TODO:[3] give the RotationTransition its turns, child and alignment +// TODO:[1] Have your RotationTransition child: Stack( children: [ -// PositionedTransition( -//// rect: animation, -//// child: FlutterLogo(), -// ), + RotationTransition( + turns: animation, + alignment: Alignment(0, -1), + child: Container( + height: 300, + child: Column( + children: [ + Expanded( + child: Container( + width: 2, + color: Colors.black, + ), + ), + FlutterLogo( + size: 150, + ), + ], + ), + ), + ), ], ), ), - floatingActionButton: new FloatingActionButton( - onPressed: () { -// controller.isCompleted ? controller.reverse() : controller.forward(); - }, - tooltip: 'Animate', - child: new Icon(Icons.play_arrow), - ), ); } } From f6431580388e824f9d0c299435239f4094b06b34 Mon Sep 17 00:00:00 2001 From: 28JayG Date: Tue, 26 Feb 2019 14:39:48 +0530 Subject: [PATCH 14/26] ready for tutorial --- lib/res/home_page.dart | 84 +++++++++++++++++++++--------------------- 1 file changed, 42 insertions(+), 42 deletions(-) diff --git a/lib/res/home_page.dart b/lib/res/home_page.dart index aa70464..bede9d9 100644 --- a/lib/res/home_page.dart +++ b/lib/res/home_page.dart @@ -15,28 +15,28 @@ class MyHomePage extends StatefulWidget { class _MyHomePageState extends State with TickerProviderStateMixin { //TODO: [2] Declare and initialize animation and controller // {Hint: RotationTransition will take animation of type double for the turns} - Animation animation; - AnimationController controller; - - @override - void initState() { - super.initState(); - - controller = AnimationController(vsync: this, duration: duration) - ..addListener(() => setState(() {})); -//Tip: you may also give this -// animation = CurvedAnimation(parent: controller, curve: Curves.elasticOut); - animation = Tween(begin: -0.1, end: 0.1).animate(controller); - controller.forward(); - controller.addStatusListener((AnimationStatus status) { - if (status == AnimationStatus.completed) { - controller.reverse(); - } - if (status == AnimationStatus.dismissed) { - controller.forward(); - } - }); - } +// Animation animation; +// AnimationController controller; +// +// @override +// void initState() { +// super.initState(); +// +// controller = AnimationController(vsync: this, duration: duration) +// ..addListener(() => setState(() {})); +////Tip: you may also give this a try +//// animation = CurvedAnimation(parent: controller, curve: Curves.elasticOut); +// animation = Tween(begin: -0.1, end: 0.1).animate(controller); +// controller.forward(); +// controller.addStatusListener((AnimationStatus status) { +// if (status == AnimationStatus.completed) { +// controller.reverse(); +// } +// if (status == AnimationStatus.dismissed) { +// controller.forward(); +// } +// }); +// } @override Widget build(BuildContext context) { @@ -50,26 +50,26 @@ class _MyHomePageState extends State with TickerProviderStateMixin { // TODO:[1] Have your RotationTransition child: Stack( children: [ - RotationTransition( - turns: animation, - alignment: Alignment(0, -1), - child: Container( - height: 300, - child: Column( - children: [ - Expanded( - child: Container( - width: 2, - color: Colors.black, - ), - ), - FlutterLogo( - size: 150, - ), - ], - ), - ), - ), +// RotationTransition( +//// turns: animation, +//// alignment: Alignment(0, -1), +//// child: Container( +//// height: 300, +//// child: Column( +//// children: [ +//// Expanded( +//// child: Container( +//// width: 2, +//// color: Colors.black, +//// ), +//// ), +//// FlutterLogo( +//// size: 150, +//// ), +//// ], +//// ), +//// ), +// ), ], ), ), From 87989e0298cbf57b952e3e2c2b4907d44572bd9d Mon Sep 17 00:00:00 2001 From: 28JayG Date: Wed, 27 Feb 2019 08:49:39 +0530 Subject: [PATCH 15/26] scaling done --- lib/res/home_page.dart | 77 ++++++++++++++++-------------------------- 1 file changed, 29 insertions(+), 48 deletions(-) diff --git a/lib/res/home_page.dart b/lib/res/home_page.dart index bede9d9..58f0425 100644 --- a/lib/res/home_page.dart +++ b/lib/res/home_page.dart @@ -14,29 +14,21 @@ class MyHomePage extends StatefulWidget { class _MyHomePageState extends State with TickerProviderStateMixin { //TODO: [2] Declare and initialize animation and controller - // {Hint: RotationTransition will take animation of type double for the turns} -// Animation animation; -// AnimationController controller; -// -// @override -// void initState() { -// super.initState(); -// -// controller = AnimationController(vsync: this, duration: duration) -// ..addListener(() => setState(() {})); -////Tip: you may also give this a try -//// animation = CurvedAnimation(parent: controller, curve: Curves.elasticOut); -// animation = Tween(begin: -0.1, end: 0.1).animate(controller); -// controller.forward(); -// controller.addStatusListener((AnimationStatus status) { -// if (status == AnimationStatus.completed) { -// controller.reverse(); -// } -// if (status == AnimationStatus.dismissed) { -// controller.forward(); -// } -// }); -// } + // {Hint: ScaleTransition will take animation of type double to scale its child} + Animation animation; + AnimationController controller; + + @override + void initState() { + super.initState(); + + controller = AnimationController(vsync: this, duration: duration) + ..addListener(() => setState(() {})); +//Tip: you may also give this a try + animation = CurvedAnimation(parent: controller, curve: Curves.elasticOut); + //Tip: not a good option to use it as it will go from 0-1 unless if you wish to tweak the begin & end +// animation = Tween(begin: 0, end: 1).animate(controller); + } @override Widget build(BuildContext context) { @@ -46,33 +38,22 @@ class _MyHomePageState extends State with TickerProviderStateMixin { title: new Text(widget.title), ), body: Center( -//TODO:[3] give the RotationTransition its turns, child and alignment -// TODO:[1] Have your RotationTransition - child: Stack( - children: [ -// RotationTransition( -//// turns: animation, -//// alignment: Alignment(0, -1), -//// child: Container( -//// height: 300, -//// child: Column( -//// children: [ -//// Expanded( -//// child: Container( -//// width: 2, -//// color: Colors.black, -//// ), -//// ), -//// FlutterLogo( -//// size: 150, -//// ), -//// ], -//// ), -//// ), -// ), - ], +//TODO:[3] give the ScaleTransition its scale, child and alignment +// TODO:[1] Time to Scale + child: ScaleTransition( + alignment: Alignment.centerLeft, + scale: animation, + child: FlutterLogo( + size: 200, + ), ), ), + floatingActionButton: FloatingActionButton( + onPressed: () { + controller.isCompleted ? controller.reverse() : controller.forward(); + }, + child: Icon(Icons.play_arrow), + ), ); } } From 4d68d782d3c5afcb637756ae468ad9e386cd0a75 Mon Sep 17 00:00:00 2001 From: 28JayG Date: Wed, 27 Feb 2019 08:51:18 +0530 Subject: [PATCH 16/26] ready for tutorial --- lib/res/home_page.dart | 44 +++++++++++++++++++++--------------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/lib/res/home_page.dart b/lib/res/home_page.dart index 58f0425..9cbd92e 100644 --- a/lib/res/home_page.dart +++ b/lib/res/home_page.dart @@ -15,20 +15,20 @@ class MyHomePage extends StatefulWidget { class _MyHomePageState extends State with TickerProviderStateMixin { //TODO: [2] Declare and initialize animation and controller // {Hint: ScaleTransition will take animation of type double to scale its child} - Animation animation; - AnimationController controller; - - @override - void initState() { - super.initState(); - - controller = AnimationController(vsync: this, duration: duration) - ..addListener(() => setState(() {})); -//Tip: you may also give this a try - animation = CurvedAnimation(parent: controller, curve: Curves.elasticOut); - //Tip: not a good option to use it as it will go from 0-1 unless if you wish to tweak the begin & end -// animation = Tween(begin: 0, end: 1).animate(controller); - } +// Animation animation; +// AnimationController controller; +// +// @override +// void initState() { +// super.initState(); +// +// controller = AnimationController(vsync: this, duration: duration) +// ..addListener(() => setState(() {})); +////Tip: you may also give this a try +// animation = CurvedAnimation(parent: controller, curve: Curves.elasticOut); +// //Tip: not a good option to use it as it will go from 0-1 unless if you wish to tweak the begin & end +//// animation = Tween(begin: 0, end: 1).animate(controller); +// } @override Widget build(BuildContext context) { @@ -40,17 +40,17 @@ class _MyHomePageState extends State with TickerProviderStateMixin { body: Center( //TODO:[3] give the ScaleTransition its scale, child and alignment // TODO:[1] Time to Scale - child: ScaleTransition( - alignment: Alignment.centerLeft, - scale: animation, - child: FlutterLogo( - size: 200, +// child: ScaleTransition( +//// alignment: Alignment.centerLeft, +//// scale: animation, +//// child: FlutterLogo( +//// size: 200, +//// ), +// ), ), - ), - ), floatingActionButton: FloatingActionButton( onPressed: () { - controller.isCompleted ? controller.reverse() : controller.forward(); +// controller.isCompleted ? controller.reverse() : controller.forward(); }, child: Icon(Icons.play_arrow), ), From 21655189493258e89638ff20957bc1ad6a63ccf7 Mon Sep 17 00:00:00 2001 From: 28JayG Date: Wed, 27 Feb 2019 09:29:39 +0530 Subject: [PATCH 17/26] ready for tutorial --- lib/res/home_page.dart | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/lib/res/home_page.dart b/lib/res/home_page.dart index 9cbd92e..321701e 100644 --- a/lib/res/home_page.dart +++ b/lib/res/home_page.dart @@ -14,7 +14,7 @@ class MyHomePage extends StatefulWidget { class _MyHomePageState extends State with TickerProviderStateMixin { //TODO: [2] Declare and initialize animation and controller - // {Hint: ScaleTransition will take animation of type double to scale its child} + // {Hint: SizeTransition will take animation of type double to change the sizeFactor} // Animation animation; // AnimationController controller; // @@ -25,9 +25,9 @@ class _MyHomePageState extends State with TickerProviderStateMixin { // controller = AnimationController(vsync: this, duration: duration) // ..addListener(() => setState(() {})); ////Tip: you may also give this a try -// animation = CurvedAnimation(parent: controller, curve: Curves.elasticOut); -// //Tip: not a good option to use it as it will go from 0-1 unless if you wish to tweak the begin & end -//// animation = Tween(begin: 0, end: 1).animate(controller); +//// animation = CurvedAnimation(parent: controller, curve: Curves.easeOut); +//// Tip: not a good option to use it as it will go from 0-1 unless if you wish to tweak the begin & end +// animation = Tween(begin: 0.2, end: 0.5).animate(controller); // } @override @@ -38,11 +38,12 @@ class _MyHomePageState extends State with TickerProviderStateMixin { title: new Text(widget.title), ), body: Center( -//TODO:[3] give the ScaleTransition its scale, child and alignment -// TODO:[1] Time to Scale -// child: ScaleTransition( -//// alignment: Alignment.centerLeft, -//// scale: animation, +//TODO:[3] give the SizeTransition its properties +// TODO:[1] Time to Size +// child: SizeTransition( +//// axis: Axis.vertical, +//// axisAlignment: 0, +//// sizeFactor: animation, //// child: FlutterLogo( //// size: 200, //// ), From d1dc4181bfab21a67d7b0636cc4eb7c8314034e1 Mon Sep 17 00:00:00 2001 From: 28JayG Date: Wed, 27 Feb 2019 22:51:32 +0530 Subject: [PATCH 18/26] ready for tutorial --- lib/res/home_page.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/res/home_page.dart b/lib/res/home_page.dart index 321701e..f30d07c 100644 --- a/lib/res/home_page.dart +++ b/lib/res/home_page.dart @@ -29,7 +29,7 @@ class _MyHomePageState extends State with TickerProviderStateMixin { //// Tip: not a good option to use it as it will go from 0-1 unless if you wish to tweak the begin & end // animation = Tween(begin: 0.2, end: 0.5).animate(controller); // } - ++ @override Widget build(BuildContext context) { return new Scaffold( From d1ae54721da27134bf571202e92b86ce84eb0ad0 Mon Sep 17 00:00:00 2001 From: 28JayG Date: Wed, 27 Feb 2019 22:52:32 +0530 Subject: [PATCH 19/26] ready for tutorial[corrected] --- lib/res/home_page.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/res/home_page.dart b/lib/res/home_page.dart index f30d07c..321701e 100644 --- a/lib/res/home_page.dart +++ b/lib/res/home_page.dart @@ -29,7 +29,7 @@ class _MyHomePageState extends State with TickerProviderStateMixin { //// Tip: not a good option to use it as it will go from 0-1 unless if you wish to tweak the begin & end // animation = Tween(begin: 0.2, end: 0.5).animate(controller); // } -+ + @override Widget build(BuildContext context) { return new Scaffold( From b93346449f071128f11b1f8291d5376888583625 Mon Sep 17 00:00:00 2001 From: 28JayG Date: Thu, 28 Feb 2019 00:26:10 +0530 Subject: [PATCH 20/26] slide transition done --- lib/res/home_page.dart | 51 +++++++++++++++++++++--------------------- 1 file changed, 25 insertions(+), 26 deletions(-) diff --git a/lib/res/home_page.dart b/lib/res/home_page.dart index 321701e..9ba49d9 100644 --- a/lib/res/home_page.dart +++ b/lib/res/home_page.dart @@ -14,21 +14,20 @@ class MyHomePage extends StatefulWidget { class _MyHomePageState extends State with TickerProviderStateMixin { //TODO: [2] Declare and initialize animation and controller - // {Hint: SizeTransition will take animation of type double to change the sizeFactor} -// Animation animation; -// AnimationController controller; -// -// @override -// void initState() { -// super.initState(); -// -// controller = AnimationController(vsync: this, duration: duration) -// ..addListener(() => setState(() {})); -////Tip: you may also give this a try -//// animation = CurvedAnimation(parent: controller, curve: Curves.easeOut); -//// Tip: not a good option to use it as it will go from 0-1 unless if you wish to tweak the begin & end -// animation = Tween(begin: 0.2, end: 0.5).animate(controller); -// } + // {Hint: SizeTransition will take animation of type offsets} + Animation animation; + AnimationController controller; + + @override + void initState() { + super.initState(); + + controller = AnimationController(vsync: this, duration: duration) + ..addListener(() => setState(() {})); + animation = Tween(begin: Offset(0.5, 1), end: Offset(-1.5, 0)) + .chain(CurveTween(curve: Curves.elasticIn)) + .animate(controller); + } @override Widget build(BuildContext context) { @@ -38,20 +37,20 @@ class _MyHomePageState extends State with TickerProviderStateMixin { title: new Text(widget.title), ), body: Center( -//TODO:[3] give the SizeTransition its properties -// TODO:[1] Time to Size -// child: SizeTransition( -//// axis: Axis.vertical, -//// axisAlignment: 0, -//// sizeFactor: animation, -//// child: FlutterLogo( -//// size: 200, -//// ), -// ), +//TODO:[3] give the SlideTransition its properties +// TODO:[1] Time to Slide + child: SlideTransition( + position: animation, + textDirection: TextDirection.rtl, + transformHitTests: true, + child: FlutterLogo( + size: 200, ), + ), + ), floatingActionButton: FloatingActionButton( onPressed: () { -// controller.isCompleted ? controller.reverse() : controller.forward(); + controller.isCompleted ? controller.reverse() : controller.forward(); }, child: Icon(Icons.play_arrow), ), From ffce04878708ddbc953ac17560b441ee51ce8199 Mon Sep 17 00:00:00 2001 From: 28JayG Date: Thu, 28 Feb 2019 00:27:21 +0530 Subject: [PATCH 21/26] ready for tutorial --- lib/res/home_page.dart | 44 +++++++++++++++++++++--------------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/lib/res/home_page.dart b/lib/res/home_page.dart index 9ba49d9..2651a45 100644 --- a/lib/res/home_page.dart +++ b/lib/res/home_page.dart @@ -14,20 +14,20 @@ class MyHomePage extends StatefulWidget { class _MyHomePageState extends State with TickerProviderStateMixin { //TODO: [2] Declare and initialize animation and controller - // {Hint: SizeTransition will take animation of type offsets} - Animation animation; - AnimationController controller; + // {Hint: SlideTransition will take animation of type offsets} +// Animation animation; +// AnimationController controller; - @override - void initState() { - super.initState(); - - controller = AnimationController(vsync: this, duration: duration) - ..addListener(() => setState(() {})); - animation = Tween(begin: Offset(0.5, 1), end: Offset(-1.5, 0)) - .chain(CurveTween(curve: Curves.elasticIn)) - .animate(controller); - } +// @override +// void initState() { +// super.initState(); +// +// controller = AnimationController(vsync: this, duration: duration) +// ..addListener(() => setState(() {})); +// animation = Tween(begin: Offset(0.5, 1), end: Offset(-1.5, 0)) +// .chain(CurveTween(curve: Curves.elasticIn)) +// .animate(controller); +// } @override Widget build(BuildContext context) { @@ -39,18 +39,18 @@ class _MyHomePageState extends State with TickerProviderStateMixin { body: Center( //TODO:[3] give the SlideTransition its properties // TODO:[1] Time to Slide - child: SlideTransition( - position: animation, - textDirection: TextDirection.rtl, - transformHitTests: true, - child: FlutterLogo( - size: 200, +// child: SlideTransition( +//// position: animation, +//// textDirection: TextDirection.rtl, +//// transformHitTests: true, +//// child: FlutterLogo( +//// size: 200, +//// ), +// ), ), - ), - ), floatingActionButton: FloatingActionButton( onPressed: () { - controller.isCompleted ? controller.reverse() : controller.forward(); +// controller.isCompleted ? controller.reverse() : controller.forward(); }, child: Icon(Icons.play_arrow), ), From 6d13411744af7b4f9b768491e13667f07b18a57c Mon Sep 17 00:00:00 2001 From: 28JayG Date: Thu, 28 Feb 2019 00:52:36 +0530 Subject: [PATCH 22/26] ready for tutorial --- lib/res/home_page.dart | 47 +++++++++++++++++++++--------------------- 1 file changed, 23 insertions(+), 24 deletions(-) diff --git a/lib/res/home_page.dart b/lib/res/home_page.dart index 2651a45..2cbc3a8 100644 --- a/lib/res/home_page.dart +++ b/lib/res/home_page.dart @@ -13,21 +13,21 @@ class MyHomePage extends StatefulWidget { } class _MyHomePageState extends State with TickerProviderStateMixin { - //TODO: [2] Declare and initialize animation and controller - // {Hint: SlideTransition will take animation of type offsets} -// Animation animation; -// AnimationController controller; -// @override -// void initState() { -// super.initState(); + //TODO:[2] Declare required variables + +// bool isBefore = true; // -// controller = AnimationController(vsync: this, duration: duration) -// ..addListener(() => setState(() {})); -// animation = Tween(begin: Offset(0.5, 1), end: Offset(-1.5, 0)) -// .chain(CurveTween(curve: Curves.elasticIn)) -// .animate(controller); -// } +// TextStyle beforeStyle = TextStyle( +// color: Colors.black, +// fontSize: 40, +// fontWeight: FontWeight.bold, +// ); +// TextStyle afterStyle = TextStyle( +// color: Colors.blue, +// fontSize: 50, +// fontWeight: FontWeight.w100, +// ); @override Widget build(BuildContext context) { @@ -36,21 +36,20 @@ class _MyHomePageState extends State with TickerProviderStateMixin { appBar: new AppBar( title: new Text(widget.title), ), + //TODO:[1] AnimatedDefaultTextStyle and set its property body: Center( -//TODO:[3] give the SlideTransition its properties -// TODO:[1] Time to Slide -// child: SlideTransition( -//// position: animation, -//// textDirection: TextDirection.rtl, -//// transformHitTests: true, -//// child: FlutterLogo( -//// size: 200, -//// ), +// child: AnimatedDefaultTextStyle( +// child: Text('CookyTech'), +// style: isBefore ? beforeStyle : afterStyle, +// duration: duration, +// curve: Curves.linear, // ), - ), + ), floatingActionButton: FloatingActionButton( onPressed: () { -// controller.isCompleted ? controller.reverse() : controller.forward(); + //TODO:[3] SetState and change the considerate variable +// isBefore = !isBefore; +// setState(() {}); }, child: Icon(Icons.play_arrow), ), From b264afc8e3728d73d00228c3360e2072ba3e11a8 Mon Sep 17 00:00:00 2001 From: 28JayG Date: Thu, 28 Feb 2019 00:54:58 +0530 Subject: [PATCH 23/26] ready for tutorial --- lib/res/home_page.dart | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/lib/res/home_page.dart b/lib/res/home_page.dart index 2cbc3a8..be1a73e 100644 --- a/lib/res/home_page.dart +++ b/lib/res/home_page.dart @@ -13,7 +13,6 @@ class MyHomePage extends StatefulWidget { } class _MyHomePageState extends State with TickerProviderStateMixin { - //TODO:[2] Declare required variables // bool isBefore = true; @@ -42,12 +41,12 @@ class _MyHomePageState extends State with TickerProviderStateMixin { // child: Text('CookyTech'), // style: isBefore ? beforeStyle : afterStyle, // duration: duration, -// curve: Curves.linear, +// curve: Curves.linear, <-you don't need it actually // ), - ), + ), floatingActionButton: FloatingActionButton( onPressed: () { - //TODO:[3] SetState and change the considerate variable + //TODO:[3] change the considerate variable(s) and set state // isBefore = !isBefore; // setState(() {}); }, From cf62553f840a990e298048605edd106ca9c562ef Mon Sep 17 00:00:00 2001 From: 28JayG Date: Thu, 28 Feb 2019 03:03:00 +0530 Subject: [PATCH 24/26] ready for tutorial --- lib/res/home_page.dart | 33 +++++++++++++-------------------- 1 file changed, 13 insertions(+), 20 deletions(-) diff --git a/lib/res/home_page.dart b/lib/res/home_page.dart index be1a73e..6ae381b 100644 --- a/lib/res/home_page.dart +++ b/lib/res/home_page.dart @@ -14,19 +14,7 @@ class MyHomePage extends StatefulWidget { class _MyHomePageState extends State with TickerProviderStateMixin { //TODO:[2] Declare required variables - -// bool isBefore = true; -// -// TextStyle beforeStyle = TextStyle( -// color: Colors.black, -// fontSize: 40, -// fontWeight: FontWeight.bold, -// ); -// TextStyle afterStyle = TextStyle( -// color: Colors.blue, -// fontSize: 50, -// fontWeight: FontWeight.w100, -// ); +// bool isOpaque = true; @override Widget build(BuildContext context) { @@ -35,19 +23,24 @@ class _MyHomePageState extends State with TickerProviderStateMixin { appBar: new AppBar( title: new Text(widget.title), ), - //TODO:[1] AnimatedDefaultTextStyle and set its property body: Center( -// child: AnimatedDefaultTextStyle( -// child: Text('CookyTech'), -// style: isBefore ? beforeStyle : afterStyle, + //TODO:[1] AnimatedOpacity and the properties +// child: AnimatedOpacity( +// opacity: isOpaque ? 1.0 : 0.4, // duration: duration, -// curve: Curves.linear, <-you don't need it actually +// child: Text( +// 'CookyTech', +// style: TextStyle( +// fontWeight: FontWeight.bold, +// fontSize: 20, +// ), +// ), // ), ), floatingActionButton: FloatingActionButton( onPressed: () { - //TODO:[3] change the considerate variable(s) and set state -// isBefore = !isBefore; + //TODO:[3] change what's needed to be and set the state +// isOpaque = !isOpaque; // setState(() {}); }, child: Icon(Icons.play_arrow), From 2d7fccfb5d7727204ffaaf970b067d2e86993b19 Mon Sep 17 00:00:00 2001 From: 28JayG Date: Thu, 28 Feb 2019 03:27:30 +0530 Subject: [PATCH 25/26] ready for tutorial --- lib/res/home_page.dart | 57 ++++++++++++++++++++++++++++++------------ 1 file changed, 41 insertions(+), 16 deletions(-) diff --git a/lib/res/home_page.dart b/lib/res/home_page.dart index 6ae381b..b40c346 100644 --- a/lib/res/home_page.dart +++ b/lib/res/home_page.dart @@ -13,34 +13,59 @@ class MyHomePage extends StatefulWidget { } class _MyHomePageState extends State with TickerProviderStateMixin { - //TODO:[2] Declare required variables -// bool isOpaque = true; + //TODO:[1.2] Declare required variables +// bool isPrevious = true; @override Widget build(BuildContext context) { + //TODO:[1.2] +// double height = MediaQuery.of(context).size.height; +// double width = MediaQuery.of(context).size.width; + return new Scaffold( backgroundColor: Colors.white, appBar: new AppBar( title: new Text(widget.title), ), - body: Center( - //TODO:[1] AnimatedOpacity and the properties -// child: AnimatedOpacity( -// opacity: isOpaque ? 1.0 : 0.4, -// duration: duration, -// child: Text( -// 'CookyTech', -// style: TextStyle( -// fontWeight: FontWeight.bold, -// fontSize: 20, + body: Stack( + //TODO:[1.1] AnimatedPositioned and the properties + children: [ +// AnimatedPositioned( +// child: Container( +// color: Colors.blue, // ), +// duration: duration, +// height: isPrevious ? 300 : 100, +// //child's height +// width: isPrevious ? 50 : 200, +// //child's width +// top: isPrevious ? height * 0.5 : height * 0.01, +// left: isPrevious ? width * 0.05 : width * 0.4, // ), -// ), - ), + + //OR + //TODO:[3.1] AnimatedPositioned of another kind and the properties +// AnimatedPositioned.fromRect( +// duration: duration, +// child: Container( +// color: Colors.yellow, +// ), +// rect: Rect.fromLTWH( +// isPrevious ? width * 0.4 : width * 0.05, +// //left +// isPrevious ? height * 0.01 : height * 0.5, +// //top +// isPrevious ? 200 : 50, +// //width +// isPrevious ? 100 : 300, +// //height +// )), + ], + ), floatingActionButton: FloatingActionButton( onPressed: () { - //TODO:[3] change what's needed to be and set the state -// isOpaque = !isOpaque; + //TODO:[2] change what's needed to be and set the state +// isPrevious = !isPrevious; // setState(() {}); }, child: Icon(Icons.play_arrow), From 5223f3704883b960359c91ab7c621ade881f0312 Mon Sep 17 00:00:00 2001 From: 28JayG Date: Thu, 28 Feb 2019 03:33:26 +0530 Subject: [PATCH 26/26] ready for tutorial --- lib/res/home_page.dart | 50 ++++++++++-------------------------------- 1 file changed, 11 insertions(+), 39 deletions(-) diff --git a/lib/res/home_page.dart b/lib/res/home_page.dart index b40c346..8e32d3d 100644 --- a/lib/res/home_page.dart +++ b/lib/res/home_page.dart @@ -13,58 +13,30 @@ class MyHomePage extends StatefulWidget { } class _MyHomePageState extends State with TickerProviderStateMixin { - //TODO:[1.2] Declare required variables + //TODO:[2] Declare required variables // bool isPrevious = true; @override Widget build(BuildContext context) { - //TODO:[1.2] -// double height = MediaQuery.of(context).size.height; -// double width = MediaQuery.of(context).size.width; - return new Scaffold( backgroundColor: Colors.white, appBar: new AppBar( title: new Text(widget.title), ), - body: Stack( - //TODO:[1.1] AnimatedPositioned and the properties - children: [ -// AnimatedPositioned( -// child: Container( -// color: Colors.blue, -// ), -// duration: duration, -// height: isPrevious ? 300 : 100, -// //child's height -// width: isPrevious ? 50 : 200, -// //child's width -// top: isPrevious ? height * 0.5 : height * 0.01, -// left: isPrevious ? width * 0.05 : width * 0.4, + body: Center( + //TODO:[1] AnimatedSize and its properties +// child: AnimatedSize( +// child: FlutterLogo( +// size: isPrevious ? 40 : 200, // ), - - //OR - //TODO:[3.1] AnimatedPositioned of another kind and the properties -// AnimatedPositioned.fromRect( -// duration: duration, -// child: Container( -// color: Colors.yellow, -// ), -// rect: Rect.fromLTWH( -// isPrevious ? width * 0.4 : width * 0.05, -// //left -// isPrevious ? height * 0.01 : height * 0.5, -// //top -// isPrevious ? 200 : 50, -// //width -// isPrevious ? 100 : 300, -// //height -// )), - ], +// vsync: this, +// duration: duration, +// curve: Curves.bounceOut, +// ), ), floatingActionButton: FloatingActionButton( onPressed: () { - //TODO:[2] change what's needed to be and set the state + //TODO:[3] change what's needed to be and set the state // isPrevious = !isPrevious; // setState(() {}); },