Hello, welcome to my attention, this article is a series of text about Flutter, Flutter introduced beginning from simple, step by step take you into the world of Flutter. You have some of the best mobile development experience, if not do not worry, at the bottom of my columns give me a message, I will do my best to answer you.
Last column teach you how to drag View in Flutter in and explained the pit encounter. This will deepen View drag instances, the use of Flutter Animation, interpolator and AnimatedBuilder teach you achieve drawer effect with animation. First look at the effect of:
By concept, we can assume that the way to achieve the drawer is to use two control Stack Widget overlay display, gesture sliding GestureDetector monitor, dynamically move top of Widget, when listening to the end of the gesture when the gesture based on a sliding distance of the top of the dynamic Widget slide to the end to use animation effects.
Achieve bottom Widget
class DownDrawerWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Container(child: Center(child: Text("底部Widget",),),); } }
This Widget is too simple, not elaborate.
Achieve top Widget
class UpDrawerWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Container(child: Center(child: Text("顶部Widget",),),); } }
Implementation and the bottom is the same.
The container can be moved to achieve
The above two are simply used to display the Widget Widget, therefore inherited the StatelessWidget. Next we need to move dynamically gesture Widget at the top, and therefore need to inherit StatefulWidget
// 顶部Widget class HomePageWidget extends StatefulWidget { @override State<StatefulWidget> createState() => HomePageState(); } class HomePageState extends State<HomePageWidget> with SingleTickerProviderStateMixin { @override void initState() {...} @override void dispose() {...} @override Widget build(BuildContext context) {...} void _onViewDragDown(DragDownDetails callback) {...} void _onViewDrag(DragUpdateDetails callback) {...} void _onViewDragUp(DragEndDetails callback) {...} }
Initialization state initState ()
This method is a callback function in Widget initialization of the system, we need to initialize the animation in this function.
Controller AnimationController; @override void InitState () { // initialize controller animation, the animation defined herein at times to 200 ms Controller = new new AnimationController (VSYNC: the this , DURATION: const the Duration (milliseconds: 200 )); // VSYNC objects tie animation timer to set a visual widget, so when the widget is not displayed, the animation timer will pause when the widget is displayed again, the animation timer to resume execution, so you can avoid animation UI is not related to the current screen Consume resources. // When vsync: this time, State or object must with SingleTickerProviderStateMixin TickerProviderStateMixin; TickerProviderStateMixin for multi AnimationController situation. // set animation curves, is animated interpolator // this link to learn more difference is, https://docs.flutter.io/flutter/animation/Curves-class.htmlWe here use bombs to bring back the effect of bounceOut. Curve = CurvedAnimation new new CurvedAnimation (parent: Controller, Curve: Curves.bounceOut); // Add Animation listener, when the distance to the target gesture end position reached by dynamically calculating achieve animation effects. curve.value current animated value ranging from 0 to 1. curve.addListener (() { Double animValue = curve.value; Double offset = dragUpDownX - dragDownX; Double toPosition; // right slide IF (offset> 0 ) { IF (offset> maxDragX /. 5 ) { // Open toPosition = maxDragX ; isOpenState = to true ; } else { if (isOpenState) { toPosition = maxDragX; isOpenState = true; } else { toPosition = 0.0; isOpenState = false; } } } else { if (offset < (-maxDragX / 2.0)) { // 关 toPosition = 0.0; isOpenState = false; } else { if (isOpenState) { toPosition = maxDragX; isOpenState = true; } else { toPosition = 0.0; isOpenState = false; } } } dragOffset = (toPosition - dragUpDownX) * animValue + dragUpDownX; // 刷新位置 setState(() {}); }); }
End Widget dispose ()
When Widget is not available will be recycled when the callback system will dispose () method, we are here to reclaim animation
@override void dispose() { controller.dispose(); }
Record Press location
double dragDownX = 0.0; void _onViewDragDown(DragDownDetails callback) { dragDownX = callback.globalPosition.dx; }
Drag the time to refresh View location
/ ** * maximum drag position * / Final Double maxDragX = 230.0 ; Double dragOffset = 0.0 ; void _onViewDrag (DragUpdateDetails the callback) { Double tmpOffset = callback.globalPosition.dx - dragDownX; IF (tmpOffset <0 ) { tmpOffset + = maxDragX; } // edge detection IF (tmpOffset <0 ) { tmpOffset = 0.0 ; } the else IF (tmpOffset> = maxDragX) { tmpOffset = maxDragX; } // 刷新 if (dragOffset != tmpOffset) { dragOffset = tmpOffset; setState(() {}); } }
When recording from the hand position and perform animation
/ ** * When sell position * / Double dragUpDownX = 0.0 ; void _onViewDragUp (DragEndDetails the callback) { dragUpDownX = dragOffset; // Animate, always started from 0 controller.forward (from: 0.0 ); }
Widget support move
@override Widget build(BuildContext context) { return Transform.translate( offset: Offset(dragOffset, 0.0), child: Container( child: GestureDetector( onHorizontalDragDown: _onViewDragDown, onVerticalDragDown: _onViewDragDown, onHorizontalDragUpdate: _onViewDrag, onVerticalDragUpdate: _onViewDrag, onHorizontalDragEnd: _onViewDragUp, onVerticalDragEnd: _onViewDragUp, child: Container( child: new UpDrawerWidget(), ),),),);}
Flutter animation
In summary, Flutter want to achieve in animation, we need to create a AnimationController controller; if there are special requirements interpolation, and then create a interpolator, call the controller.forward()method executes the animation, then change the corresponding value by calling addListener () callback setState(() {})method Refresh Location It can be.
Flutter API also provides AnimatedBuilder used to simplify the implementation complexity of the animation, so we do not have to manually call addListener () method.
This column explains how to achieve the effect of drawers with Flutter, Flutter and passing on the animation. Next column I will teach you how to slide around the calendar with Flutter.
Original link https://blog.csdn.net/Android_SE/article/details/94579814
Learn more concerned https://www.jianshu.com/u/05f58efbd5eb