You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

122 lines
4.9 KiB

2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
  1. import 'package:flutter/material.dart';
  2. import 'package:flutter_riverpod/flutter_riverpod.dart';
  3. import 'package:my_flutter_puzzle/providers.dart';
  4. import 'package:my_flutter_puzzle/utils/extensions/context_extension.dart';
  5. import 'package:palette_generator/palette_generator.dart';
  6. class ImageViewer extends ConsumerWidget {
  7. const ImageViewer({
  8. required this.puzzleSize,
  9. required this.previousImage,
  10. required this.previousPalette,
  11. required this.imageSize,
  12. Key? key,
  13. }) : super(key: key);
  14. final int puzzleSize;
  15. final Image? previousImage;
  16. final PaletteGenerator? previousPalette;
  17. final double imageSize;
  18. @override
  19. Widget build(BuildContext context, WidgetRef ref) {
  20. return Consumer(
  21. builder: (context, ref, child) {
  22. final state = ref.watch(imageSplitterNotifierProvider);
  23. return state.maybeWhen(
  24. () => const SizedBox(),
  25. complete: (image, images, palette) => SizedBox(
  26. width: context.width * 202 / 812,
  27. height: context.width * 202 / 812,
  28. child: ClipRRect(
  29. borderRadius: BorderRadius.circular(8),
  30. child: Image(
  31. image: image.image,
  32. height: imageSize,
  33. width: imageSize,
  34. ),
  35. ),
  36. ),
  37. orElse: () => previousImage != null
  38. ? Padding(
  39. padding: const EdgeInsets.only(right: 0.0),
  40. child: Column(
  41. mainAxisSize: MainAxisSize.min,
  42. children: [
  43. Container(
  44. decoration: BoxDecoration(
  45. borderRadius: BorderRadius.circular(20),
  46. // border: Border.all(color: Colors.white, width: 3),
  47. ),
  48. child: ClipRRect(
  49. borderRadius: BorderRadius.circular(20),
  50. child: Image(
  51. image: previousImage!.image,
  52. height: imageSize,
  53. width: imageSize,
  54. ),
  55. ),
  56. ),
  57. Padding(
  58. padding: const EdgeInsets.only(top: 8.0),
  59. child: SizedBox(
  60. width: imageSize,
  61. child: Padding(
  62. padding: const EdgeInsets.symmetric(
  63. vertical: 4,
  64. horizontal: 16,
  65. ),
  66. child: Row(
  67. mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  68. children: [
  69. Container(
  70. width: imageSize / 5,
  71. height: imageSize / 5,
  72. decoration: BoxDecoration(
  73. color: previousPalette!.colors.elementAt(0),
  74. shape: BoxShape.circle,
  75. border: Border.all(
  76. color: Colors.white60,
  77. width: 3,
  78. ),
  79. ),
  80. ),
  81. Container(
  82. width: imageSize / 5,
  83. height: imageSize / 5,
  84. decoration: BoxDecoration(
  85. color: previousPalette!.colors.elementAt(1),
  86. shape: BoxShape.circle,
  87. border: Border.all(
  88. color: Colors.white60,
  89. width: 3,
  90. ),
  91. ),
  92. ),
  93. Container(
  94. width: imageSize / 5,
  95. height: imageSize / 5,
  96. decoration: BoxDecoration(
  97. color: previousPalette!.colors.elementAt(2),
  98. shape: BoxShape.circle,
  99. border: Border.all(
  100. color: Colors.white60,
  101. width: 3,
  102. ),
  103. ),
  104. ),
  105. ],
  106. ),
  107. ),
  108. ),
  109. ),
  110. const SizedBox(height: 16),
  111. ],
  112. ),
  113. )
  114. : const SizedBox(),
  115. );
  116. },
  117. );
  118. }
  119. }