toggle_switch_widget.dart 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. import 'package:flutter/material.dart';
  2. import 'package:photos/ente_theme_data.dart';
  3. import 'package:photos/ui/common/loading_widget.dart';
  4. import 'package:photos/utils/debouncer.dart';
  5. enum ExecutionState {
  6. idle,
  7. inProgress,
  8. successful,
  9. }
  10. typedef OnChangedCallBack = Future<void> Function();
  11. typedef FutureValueCallBack = Future<bool> Function();
  12. class ToggleSwitchWidget extends StatefulWidget {
  13. final FutureValueCallBack value;
  14. ///Make sure to use completer if onChanged callback has other async functions inside
  15. final OnChangedCallBack onChanged;
  16. final bool initialValue;
  17. const ToggleSwitchWidget({
  18. required this.value,
  19. required this.onChanged,
  20. required this.initialValue,
  21. Key? key,
  22. }) : super(key: key);
  23. @override
  24. State<ToggleSwitchWidget> createState() => _ToggleSwitchWidgetState();
  25. }
  26. class _ToggleSwitchWidgetState extends State<ToggleSwitchWidget> {
  27. late Future<bool> futureToggleValue;
  28. late bool toggleValue;
  29. ExecutionState executionState = ExecutionState.idle;
  30. final _debouncer = Debouncer(const Duration(milliseconds: 300));
  31. @override
  32. void initState() {
  33. futureToggleValue = widget.value.call();
  34. toggleValue = widget.initialValue;
  35. super.initState();
  36. }
  37. @override
  38. Widget build(BuildContext context) {
  39. final enteColorScheme = Theme.of(context).colorScheme.enteTheme.colorScheme;
  40. final Widget stateIcon = _stateIcon(enteColorScheme);
  41. return FutureBuilder(
  42. future: futureToggleValue,
  43. builder: (context, snapshot) {
  44. return Row(
  45. children: [
  46. Padding(
  47. padding: const EdgeInsets.only(right: 2),
  48. child: AnimatedSwitcher(
  49. duration: const Duration(milliseconds: 175),
  50. switchInCurve: Curves.easeInExpo,
  51. switchOutCurve: Curves.easeOutExpo,
  52. child: stateIcon,
  53. ),
  54. ),
  55. SizedBox(
  56. height: 31,
  57. child: FittedBox(
  58. fit: BoxFit.contain,
  59. child: Switch.adaptive(
  60. activeColor: enteColorScheme.primary400,
  61. inactiveTrackColor: enteColorScheme.fillMuted,
  62. materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
  63. value: toggleValue,
  64. onChanged: (negationOfToggleValue) async {
  65. setState(() {
  66. toggleValue = negationOfToggleValue;
  67. //start showing inProgress statu icons if toggle takes more than debounce time
  68. _debouncer.run(
  69. () => Future(
  70. () {
  71. setState(() {
  72. executionState = ExecutionState.inProgress;
  73. });
  74. },
  75. ),
  76. );
  77. });
  78. final Stopwatch stopwatch = Stopwatch()..start();
  79. await widget.onChanged.call();
  80. //for toggle feedback on short unsuccessful onChanged
  81. await _feedbackOnUnsuccessfulToggle(stopwatch);
  82. //debouncer gets canceled if onChanged takes less than debounce time
  83. _debouncer.cancelDebounce();
  84. widget.value.call().then((newValue) {
  85. setState(() {
  86. if (toggleValue == newValue) {
  87. if (executionState == ExecutionState.inProgress) {
  88. executionState = ExecutionState.successful;
  89. Future.delayed(const Duration(seconds: 2), () {
  90. setState(() {
  91. executionState = ExecutionState.idle;
  92. });
  93. });
  94. }
  95. } else {
  96. toggleValue = !toggleValue;
  97. executionState = ExecutionState.idle;
  98. }
  99. });
  100. });
  101. },
  102. ),
  103. ),
  104. ),
  105. ],
  106. );
  107. },
  108. );
  109. }
  110. Widget _stateIcon(enteColorScheme) {
  111. if (executionState == ExecutionState.idle) {
  112. return const SizedBox(width: 24);
  113. } else if (executionState == ExecutionState.inProgress) {
  114. return EnteLoadingWidget(
  115. color: enteColorScheme.strokeMuted,
  116. );
  117. } else if (executionState == ExecutionState.successful) {
  118. return Padding(
  119. padding: const EdgeInsets.symmetric(horizontal: 1),
  120. child: Icon(
  121. Icons.check_outlined,
  122. size: 22,
  123. color: enteColorScheme.primary500,
  124. ),
  125. );
  126. } else {
  127. return const SizedBox(width: 24);
  128. }
  129. }
  130. Future<void> _feedbackOnUnsuccessfulToggle(Stopwatch stopwatch) async {
  131. final timeElapsed = stopwatch.elapsedMilliseconds;
  132. if (timeElapsed < 200) {
  133. await Future.delayed(
  134. Duration(milliseconds: 200 - timeElapsed),
  135. );
  136. }
  137. }
  138. }