From b0352d597efecdb4e935d0bb3a888024db5a2b99 Mon Sep 17 00:00:00 2001 From: nb312 Date: Sun, 9 Jun 2019 17:10:58 +0800 Subject: [PATCH 1/4] add the RotationTransition,ScaleTransition,SlidTransition,SizeTransition, they are all in the RotationPage. --- lib/const/page_item_const.dart | 5 ++ lib/const/page_name_const.dart | 1 + lib/main.dart | 1 + lib/page/anim/RotationPage.dart | 108 ++++++++++++++++++++++++++++++++ lib/page/anim/_anim.dart | 1 + 5 files changed, 116 insertions(+) create mode 100644 lib/page/anim/RotationPage.dart diff --git a/lib/const/page_item_const.dart b/lib/const/page_item_const.dart index f430376..afbbc6b 100644 --- a/lib/const/page_item_const.dart +++ b/lib/const/page_item_const.dart @@ -212,4 +212,9 @@ const PAGE_ITEMS = [ "img": PageImage.FLUTTER_OPEN, "click": PageName.ANIM_POSITION_TRANS, }, + { + "title": PageName.ANIM_ROTATION, + "img": PageImage.FLUTTER_OPEN, + "click": PageName.ANIM_ROTATION, + }, ]; diff --git a/lib/const/page_name_const.dart b/lib/const/page_name_const.dart index 8296b63..5ac3ce6 100644 --- a/lib/const/page_name_const.dart +++ b/lib/const/page_name_const.dart @@ -47,4 +47,5 @@ class PageName { static const ANIM_HERO = "HeroPage"; static const ANIM_FADE_TRANS = "FadeTranstion"; static const ANIM_POSITION_TRANS = "PositionTransition"; + static const ANIM_ROTATION = "RotationTransition"; } diff --git a/lib/main.dart b/lib/main.dart index c6782bb..f3d1c82 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -61,6 +61,7 @@ class FlutterOpenApp extends StatelessWidget { PageName.ANIM_HERO: (context) => HeroPage(), PageName.ANIM_FADE_TRANS: (context) => FadeTransitionPage(), PageName.ANIM_POSITION_TRANS: (context) => PositionTransitionPage(), + PageName.ANIM_ROTATION: (context) => RotationPage(), }, ); } diff --git a/lib/page/anim/RotationPage.dart b/lib/page/anim/RotationPage.dart new file mode 100644 index 0000000..413a79c --- /dev/null +++ b/lib/page/anim/RotationPage.dart @@ -0,0 +1,108 @@ +/// +/// Created by NieBin on 2019/6/9 +/// Github: https://github.com/nb312 +/// Email: niebin312@gmail.com +/// +import 'package:flutter/material.dart'; +import 'package:flutter_widgets/const/_const.dart'; +import 'dart:math'; + +class RotationPage extends StatefulWidget { + @override + _RotationState createState() => _RotationState(); +} + +class _RotationState extends State + with SingleTickerProviderStateMixin { + AnimationController _controller; + Animation _rotationAnim; + Animation _offsetAnim; + Animation _decorationAnim; + + Widget _rotation() => RotationTransition( + turns: _rotationAnim, + alignment: Alignment.center, + child: Text( + "This is my first rotation transition.", + style: TextStyle(color: BLUE_DEEP, fontSize: 10), + ), + ); + + Widget _scale() => ScaleTransition( + scale: _rotationAnim, + child: Text("Scale transition."), + ); + + Widget _slide() => SlideTransition( + position: _offsetAnim, + child: Text( + "Offset", + style: TextStyle(color: PURPLE), + ), + ); + + Widget _sizeTrans() => SizeTransition( + sizeFactor: _rotationAnim, + child: Container( + width: 100, + height: 100, + color: RED_LIGHT, + ), + ); + + Widget _decoratedTrans() => DecoratedBoxTransition( + decoration: _decorationAnim, + child: Container( + constraints: BoxConstraints.expand(height: 100, width: 200), + child: InkWell( + child: Center( + child: Text("Click Me"), + ), + onTap: () { + _controller.reset(); + _controller.forward(); + }, + ), + )); + + @override + void initState() { + _controller = AnimationController( + vsync: this, + duration: Duration(seconds: 3), + ); + CurvedAnimation _curve = + CurvedAnimation(parent: _controller, curve: Curves.elasticIn); + _rotationAnim = Tween(begin: 0.0, end: pi).animate(_curve); + _offsetAnim = + Tween(begin: Offset(0.0, 0.0), end: Offset(5.0, 1.0)).animate(_curve); + _decorationAnim = DecorationTween( + begin: ShapeDecoration( + shape: StadiumBorder( + side: BorderSide(color: RED_LIGHT, width: 1))), + end: ShapeDecoration( + shape: CircleBorder(side: BorderSide(color: BLUE, width: 4)))) + .animate(_curve); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + title: Text(PageName.ANIM_ROTATION), + ), + body: Column( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + _rotation(), + _scale(), + _slide(), + _sizeTrans(), + _decoratedTrans(), + ], + ), + ); + } +} diff --git a/lib/page/anim/_anim.dart b/lib/page/anim/_anim.dart index a3682ad..4e48db4 100644 --- a/lib/page/anim/_anim.dart +++ b/lib/page/anim/_anim.dart @@ -8,3 +8,4 @@ export 'AnimCrossFadePage.dart'; export 'HeroPage.dart'; export 'FadeTransitionPage.dart'; export 'PositionTransitionPage.dart'; +export 'RotationPage.dart'; From 7537fd476a6cf3426b991d89fc8eae5f33a0c944 Mon Sep 17 00:00:00 2001 From: nb312 Date: Sun, 9 Jun 2019 17:39:40 +0800 Subject: [PATCH 2/4] add the AnimatedDefaultTextStyle; --- lib/const/page_item_const.dart | 5 +++ lib/const/page_name_const.dart | 1 + lib/main.dart | 1 + lib/page/anim/DefaultTextPage.dart | 55 ++++++++++++++++++++++++++++++ lib/page/anim/_anim.dart | 1 + 5 files changed, 63 insertions(+) create mode 100644 lib/page/anim/DefaultTextPage.dart diff --git a/lib/const/page_item_const.dart b/lib/const/page_item_const.dart index afbbc6b..bacfdf6 100644 --- a/lib/const/page_item_const.dart +++ b/lib/const/page_item_const.dart @@ -217,4 +217,9 @@ const PAGE_ITEMS = [ "img": PageImage.FLUTTER_OPEN, "click": PageName.ANIM_ROTATION, }, + { + "title": PageName.ANIM_DEFAULT_TEXT, + "img": PageImage.FLUTTER_OPEN, + "click": PageName.ANIM_DEFAULT_TEXT, + }, ]; diff --git a/lib/const/page_name_const.dart b/lib/const/page_name_const.dart index 5ac3ce6..859dfb6 100644 --- a/lib/const/page_name_const.dart +++ b/lib/const/page_name_const.dart @@ -48,4 +48,5 @@ class PageName { static const ANIM_FADE_TRANS = "FadeTranstion"; static const ANIM_POSITION_TRANS = "PositionTransition"; static const ANIM_ROTATION = "RotationTransition"; + static const ANIM_DEFAULT_TEXT = "DefaultText"; } diff --git a/lib/main.dart b/lib/main.dart index f3d1c82..0d8a09c 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -62,6 +62,7 @@ class FlutterOpenApp extends StatelessWidget { PageName.ANIM_FADE_TRANS: (context) => FadeTransitionPage(), PageName.ANIM_POSITION_TRANS: (context) => PositionTransitionPage(), PageName.ANIM_ROTATION: (context) => RotationPage(), + PageName.ANIM_DEFAULT_TEXT: (context) => DefaultTextPage(), }, ); } diff --git a/lib/page/anim/DefaultTextPage.dart b/lib/page/anim/DefaultTextPage.dart new file mode 100644 index 0000000..1ff8015 --- /dev/null +++ b/lib/page/anim/DefaultTextPage.dart @@ -0,0 +1,55 @@ +/// +/// Created by NieBin on 2019/6/9 +/// Github: https://github.com/nb312 +/// Email: niebin312@gmail.com +/// +import "package:flutter/material.dart"; +import 'package:flutter_widgets/const/_const.dart'; + +class DefaultTextPage extends StatefulWidget { + @override + DefaultState createState() => DefaultState(); +} + +class DefaultState extends State { + Color _color = RED_LIGHT; + + Widget _defaultText() => Column( + children: [ + AnimatedDefaultTextStyle( + child: Text( + "Default Text", + style: TextStyle(fontSize: 20), + ), + style: TextStyle(color: _color), + duration: Duration(seconds: 1), + ), + FloatingActionButton( + child: Text("Click"), + onPressed: () { + setState(() { + if (_color == RED_LIGHT) { + _color = BLUE_DEEP; + } else { + _color = RED_LIGHT; + } + }); + }, + ) + ], + ); + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + title: Text(PageName.ANIM_DEFAULT_TEXT), + ), + body: Column( + children: [ + _defaultText(), + ], + ), + ); + } +} diff --git a/lib/page/anim/_anim.dart b/lib/page/anim/_anim.dart index 4e48db4..afc795c 100644 --- a/lib/page/anim/_anim.dart +++ b/lib/page/anim/_anim.dart @@ -9,3 +9,4 @@ export 'HeroPage.dart'; export 'FadeTransitionPage.dart'; export 'PositionTransitionPage.dart'; export 'RotationPage.dart'; +export 'DefaultTextPage.dart'; From 27f21f4ef8224bb045654a55b900826a0112279a Mon Sep 17 00:00:00 2001 From: nb312 Date: Sun, 9 Jun 2019 18:50:53 +0800 Subject: [PATCH 3/4] add the AnimationList; --- lib/const/page_item_const.dart | 5 +++ lib/const/page_name_const.dart | 1 + lib/main.dart | 1 + lib/page/anim/AnimListPage.dart | 72 +++++++++++++++++++++++++++++++++ lib/page/anim/_anim.dart | 1 + 5 files changed, 80 insertions(+) create mode 100644 lib/page/anim/AnimListPage.dart diff --git a/lib/const/page_item_const.dart b/lib/const/page_item_const.dart index bacfdf6..ceede19 100644 --- a/lib/const/page_item_const.dart +++ b/lib/const/page_item_const.dart @@ -222,4 +222,9 @@ const PAGE_ITEMS = [ "img": PageImage.FLUTTER_OPEN, "click": PageName.ANIM_DEFAULT_TEXT, }, + { + "title": PageName.ANIM_LIST, + "img": PageImage.FLUTTER_OPEN, + "click": PageName.ANIM_LIST, + }, ]; diff --git a/lib/const/page_name_const.dart b/lib/const/page_name_const.dart index 859dfb6..bea6dd7 100644 --- a/lib/const/page_name_const.dart +++ b/lib/const/page_name_const.dart @@ -49,4 +49,5 @@ class PageName { static const ANIM_POSITION_TRANS = "PositionTransition"; static const ANIM_ROTATION = "RotationTransition"; static const ANIM_DEFAULT_TEXT = "DefaultText"; + static const ANIM_LIST = "AnimationList"; } diff --git a/lib/main.dart b/lib/main.dart index 0d8a09c..2b05b4f 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -63,6 +63,7 @@ class FlutterOpenApp extends StatelessWidget { PageName.ANIM_POSITION_TRANS: (context) => PositionTransitionPage(), PageName.ANIM_ROTATION: (context) => RotationPage(), PageName.ANIM_DEFAULT_TEXT: (context) => DefaultTextPage(), + PageName.ANIM_LIST: (context) => AnimListPage(), }, ); } diff --git a/lib/page/anim/AnimListPage.dart b/lib/page/anim/AnimListPage.dart new file mode 100644 index 0000000..1f96622 --- /dev/null +++ b/lib/page/anim/AnimListPage.dart @@ -0,0 +1,72 @@ +/// +/// Created by NieBin on 2019/6/9 +/// Github: https://github.com/nb312 +/// Email: niebin312@gmail.com +/// +import "package:flutter/material.dart"; +import 'package:flutter_widgets/const/_const.dart'; + +class AnimListPage extends StatefulWidget { + @override + AnimListState createState() => AnimListState(); +} + +List list = [ + "Hello", + "World", + "AAAA", + "BBBB", + "CCCC", + "DDDDD", + "EEEE", + "FFFF" +]; + +class AnimListState extends State + with SingleTickerProviderStateMixin { + final _key = GlobalKey(); + + Widget _itemBuilder(context, index, anim) => index == 0 + ? FloatingActionButton( + child: Text("Click"), + onPressed: () { + if (list.length > 20) { + var s = list.removeAt(1); + _key.currentState.removeItem( + 1, + (context, anim) => ScaleTransition( + scale: anim, + child: Text(list[index]), + ), + ); + } else { + list.insert(1, "Hello"); + _key.currentState.insertItem(1); + } + }, + ) + : Container( + constraints: BoxConstraints.expand(height: 40), + child: ScaleTransition( + scale: anim, + child: Text(list[index]), + )); + + @override + void initState() { + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + title: Text("Hello World"), + ), + body: AnimatedList( + key: _key, + initialItemCount: list.length, + itemBuilder: _itemBuilder, + )); + } +} diff --git a/lib/page/anim/_anim.dart b/lib/page/anim/_anim.dart index afc795c..f70aed4 100644 --- a/lib/page/anim/_anim.dart +++ b/lib/page/anim/_anim.dart @@ -10,3 +10,4 @@ export 'FadeTransitionPage.dart'; export 'PositionTransitionPage.dart'; export 'RotationPage.dart'; export 'DefaultTextPage.dart'; +export 'AnimListPage.dart'; From 109f97d3d1a3cab874942e5d8cfd6af9842de153 Mon Sep 17 00:00:00 2001 From: nb312 Date: Sun, 9 Jun 2019 18:52:51 +0800 Subject: [PATCH 4/4] fix the title. --- lib/page/anim/AnimListPage.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/page/anim/AnimListPage.dart b/lib/page/anim/AnimListPage.dart index 1f96622..b78c044 100644 --- a/lib/page/anim/AnimListPage.dart +++ b/lib/page/anim/AnimListPage.dart @@ -61,7 +61,7 @@ class AnimListState extends State Widget build(BuildContext context) { return Scaffold( appBar: AppBar( - title: Text("Hello World"), + title: Text(PageName.ANIM_LIST), ), body: AnimatedList( key: _key,