draggable_scrollbar.dart 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. import 'dart:async';
  2. import 'package:flutter/foundation.dart';
  3. import 'package:flutter/material.dart';
  4. import 'package:flutter/services.dart';
  5. import 'package:photos/ui/huge_listview/scroll_bar_thumb.dart';
  6. class DraggableScrollbar extends StatefulWidget {
  7. final Widget child;
  8. final Color backgroundColor;
  9. final Color drawColor;
  10. final double heightScrollThumb;
  11. final EdgeInsetsGeometry padding;
  12. final int totalCount;
  13. final int initialScrollIndex;
  14. final int currentFirstIndex;
  15. final ValueChanged<double> onChange;
  16. final String Function(int) labelTextBuilder;
  17. final bool isEnabled;
  18. const DraggableScrollbar({
  19. Key key,
  20. @required this.child,
  21. this.backgroundColor = Colors.white,
  22. this.drawColor = Colors.grey,
  23. this.heightScrollThumb = 80.0,
  24. this.padding,
  25. this.totalCount = 1,
  26. this.initialScrollIndex = 0,
  27. this.currentFirstIndex = 0,
  28. @required this.labelTextBuilder,
  29. this.onChange,
  30. this.isEnabled = true,
  31. }) : super(key: key);
  32. @override
  33. DraggableScrollbarState createState() => DraggableScrollbarState();
  34. }
  35. class DraggableScrollbarState extends State<DraggableScrollbar>
  36. with TickerProviderStateMixin {
  37. static const thumbAnimationDuration = Duration(milliseconds: 1000);
  38. static const labelAnimationDuration = Duration(milliseconds: 1000);
  39. double thumbOffset = 0.0;
  40. bool isDragging = false;
  41. int currentFirstIndex;
  42. double get thumbMin => 0.0;
  43. double get thumbMax => context.size.height - widget.heightScrollThumb;
  44. AnimationController _thumbAnimationController;
  45. Animation<double> _thumbAnimation;
  46. AnimationController _labelAnimationController;
  47. Animation<double> _labelAnimation;
  48. Timer _fadeoutTimer;
  49. @override
  50. void initState() {
  51. super.initState();
  52. currentFirstIndex = widget.currentFirstIndex;
  53. if (widget.initialScrollIndex > 0 && widget.totalCount > 1) {
  54. WidgetsBinding.instance?.addPostFrameCallback((_) {
  55. setState(
  56. () => thumbOffset = (widget.initialScrollIndex / widget.totalCount) *
  57. (thumbMax - thumbMin),
  58. );
  59. });
  60. }
  61. _thumbAnimationController = AnimationController(
  62. vsync: this,
  63. duration: thumbAnimationDuration,
  64. );
  65. _thumbAnimation = CurvedAnimation(
  66. parent: _thumbAnimationController,
  67. curve: Curves.fastOutSlowIn,
  68. );
  69. _labelAnimationController = AnimationController(
  70. vsync: this,
  71. duration: labelAnimationDuration,
  72. );
  73. _labelAnimation = CurvedAnimation(
  74. parent: _labelAnimationController,
  75. curve: Curves.fastOutSlowIn,
  76. );
  77. }
  78. @override
  79. void dispose() {
  80. _thumbAnimationController.dispose();
  81. _labelAnimationController.dispose();
  82. _fadeoutTimer?.cancel();
  83. super.dispose();
  84. }
  85. @override
  86. Widget build(BuildContext context) {
  87. if (widget.isEnabled) {
  88. return Stack(
  89. children: [
  90. RepaintBoundary(child: widget.child),
  91. RepaintBoundary(child: buildThumb()),
  92. ],
  93. );
  94. } else {
  95. return widget.child;
  96. }
  97. }
  98. Widget buildKeyboard() {
  99. if (defaultTargetPlatform == TargetPlatform.windows) {
  100. return RawKeyboardListener(
  101. focusNode: FocusNode(),
  102. onKey: keyHandler,
  103. child: buildThumb(),
  104. );
  105. } else {
  106. return buildThumb();
  107. }
  108. }
  109. Widget buildThumb() => Container(
  110. alignment: Alignment.topRight,
  111. margin: EdgeInsets.only(top: thumbOffset),
  112. padding: widget.padding,
  113. child: ScrollBarThumb(
  114. widget.backgroundColor,
  115. widget.drawColor,
  116. widget.heightScrollThumb,
  117. widget.labelTextBuilder.call(this.currentFirstIndex),
  118. _labelAnimation,
  119. _thumbAnimation,
  120. onDragStart,
  121. onDragUpdate,
  122. onDragEnd,
  123. ),
  124. );
  125. void setPosition(double position, int currentFirstIndex) {
  126. setState(() {
  127. this.currentFirstIndex = currentFirstIndex;
  128. thumbOffset = position * (thumbMax - thumbMin);
  129. if (_thumbAnimationController.status != AnimationStatus.forward) {
  130. _thumbAnimationController.forward();
  131. }
  132. _fadeoutTimer?.cancel();
  133. _fadeoutTimer = Timer(thumbAnimationDuration, () {
  134. _thumbAnimationController.reverse();
  135. _labelAnimationController.reverse();
  136. _fadeoutTimer = null;
  137. });
  138. });
  139. }
  140. void onDragStart(DragStartDetails details) {
  141. setState(() {
  142. isDragging = true;
  143. _labelAnimationController.forward();
  144. _fadeoutTimer?.cancel();
  145. });
  146. }
  147. void onDragUpdate(DragUpdateDetails details) {
  148. setState(() {
  149. if (_thumbAnimationController.status != AnimationStatus.forward) {
  150. _thumbAnimationController.forward();
  151. }
  152. if (isDragging && details.delta.dy != 0) {
  153. thumbOffset += details.delta.dy;
  154. thumbOffset = thumbOffset.clamp(thumbMin, thumbMax);
  155. double position = thumbOffset / (thumbMax - thumbMin);
  156. widget.onChange?.call(position);
  157. }
  158. });
  159. }
  160. void onDragEnd(DragEndDetails details) {
  161. _fadeoutTimer = Timer(thumbAnimationDuration, () {
  162. _thumbAnimationController.reverse();
  163. _labelAnimationController.reverse();
  164. _fadeoutTimer = null;
  165. });
  166. setState(() => isDragging = false);
  167. }
  168. void keyHandler(RawKeyEvent value) {
  169. if (value.runtimeType == RawKeyDownEvent) {
  170. if (value.logicalKey == LogicalKeyboardKey.arrowDown) {
  171. onDragUpdate(
  172. DragUpdateDetails(
  173. globalPosition: Offset.zero,
  174. delta: const Offset(0, 2),
  175. ),
  176. );
  177. } else if (value.logicalKey == LogicalKeyboardKey.arrowUp) {
  178. onDragUpdate(
  179. DragUpdateDetails(
  180. globalPosition: Offset.zero,
  181. delta: const Offset(0, -2),
  182. ),
  183. );
  184. } else if (value.logicalKey == LogicalKeyboardKey.pageDown) {
  185. onDragUpdate(
  186. DragUpdateDetails(
  187. globalPosition: Offset.zero,
  188. delta: const Offset(0, 25),
  189. ),
  190. );
  191. } else if (value.logicalKey == LogicalKeyboardKey.pageUp) {
  192. onDragUpdate(
  193. DragUpdateDetails(
  194. globalPosition: Offset.zero,
  195. delta: const Offset(0, -25),
  196. ),
  197. );
  198. }
  199. }
  200. }
  201. }