diff --git a/lib/const/page_item_const.dart b/lib/const/page_item_const.dart index f430376..ceede19 100644 --- a/lib/const/page_item_const.dart +++ b/lib/const/page_item_const.dart @@ -212,4 +212,19 @@ const PAGE_ITEMS = [ "img": PageImage.FLUTTER_OPEN, "click": PageName.ANIM_POSITION_TRANS, }, + { + "title": PageName.ANIM_ROTATION, + "img": PageImage.FLUTTER_OPEN, + "click": PageName.ANIM_ROTATION, + }, + { + "title": PageName.ANIM_DEFAULT_TEXT, + "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 8296b63..bea6dd7 100644 --- a/lib/const/page_name_const.dart +++ b/lib/const/page_name_const.dart @@ -47,4 +47,7 @@ class PageName { static const ANIM_HERO = "HeroPage"; static const ANIM_FADE_TRANS = "FadeTranstion"; 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 c6782bb..2b05b4f 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -61,6 +61,9 @@ 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(), + 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..b78c044 --- /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(PageName.ANIM_LIST), + ), + body: AnimatedList( + key: _key, + initialItemCount: list.length, + itemBuilder: _itemBuilder, + )); + } +} 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/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..f70aed4 100644 --- a/lib/page/anim/_anim.dart +++ b/lib/page/anim/_anim.dart @@ -8,3 +8,6 @@ export 'AnimCrossFadePage.dart'; export 'HeroPage.dart'; export 'FadeTransitionPage.dart'; export 'PositionTransitionPage.dart'; +export 'RotationPage.dart'; +export 'DefaultTextPage.dart'; +export 'AnimListPage.dart';