import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:image_picker/image_picker.dart'; import 'package:my_flutter_puzzle/providers.dart'; // import 'package:my_flutter_puzzle/widgets/photo_screen/pick_image_button.dart'; import 'package:palette_generator/palette_generator.dart'; class ImageViewer extends ConsumerWidget { const ImageViewer({ required this.imagePicker, required this.puzzleSize, required this.previousImage, required this.previousPalette, required this.imageSize, Key? key, }) : super(key: key); final ImagePicker imagePicker; final int puzzleSize; final Image? previousImage; final PaletteGenerator? previousPalette; final double imageSize; @override Widget build(BuildContext context, WidgetRef ref) { return Consumer( builder: (context, ref, child) { final state = ref.watch(imageSplitterNotifierProvider); return state.maybeWhen( () => const SizedBox(), complete: (image, images, palette) => Padding( padding: const EdgeInsets.only(right: 0.0), child: Column( mainAxisSize: MainAxisSize.min, children: [ Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(20), // border: Border.all(color: Colors.white, width: 3), ), child: ClipRRect( borderRadius: BorderRadius.circular(20), child: Image( image: image.image, height: imageSize, width: imageSize, ), ), ), Padding( padding: const EdgeInsets.only(top: 8.0), child: SizedBox( width: imageSize, child: Padding( padding: const EdgeInsets.symmetric( vertical: 4, horizontal: 16, ), child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ Container( width: imageSize / 5, height: imageSize / 5, decoration: BoxDecoration( color: palette.colors.elementAt(0), shape: BoxShape.circle, border: Border.all( color: Colors.white60, width: 3, ), ), ), Container( width: imageSize / 5, height: imageSize / 5, decoration: BoxDecoration( color: palette.colors.elementAt(1), shape: BoxShape.circle, border: Border.all( color: Colors.white60, width: 3, ), ), ), Container( width: imageSize / 5, height: imageSize / 5, decoration: BoxDecoration( color: palette.colors.elementAt(2), shape: BoxShape.circle, border: Border.all( color: Colors.white60, width: 3, ), ), ), ], ), ), ), ), const SizedBox(height: 16), // PickImageButton( // text: 'Pick Image', // onTap: () => ref // .read(imageSplitterNotifierProvider.notifier) // .generateImages( // picker: imagePicker, // puzzleSize: puzzleSize, // ), // ), ], ), ), orElse: () => previousImage != null ? Padding( padding: const EdgeInsets.only(right: 0.0), child: Column( mainAxisSize: MainAxisSize.min, children: [ Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(20), // border: Border.all(color: Colors.white, width: 3), ), child: ClipRRect( borderRadius: BorderRadius.circular(20), child: Image( image: previousImage!.image, height: imageSize, width: imageSize, ), ), ), Padding( padding: const EdgeInsets.only(top: 8.0), child: SizedBox( width: imageSize, child: Padding( padding: const EdgeInsets.symmetric( vertical: 4, horizontal: 16, ), child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ Container( width: imageSize / 5, height: imageSize / 5, decoration: BoxDecoration( color: previousPalette!.colors.elementAt(0), shape: BoxShape.circle, border: Border.all( color: Colors.white60, width: 3, ), ), ), Container( width: imageSize / 5, height: imageSize / 5, decoration: BoxDecoration( color: previousPalette!.colors.elementAt(1), shape: BoxShape.circle, border: Border.all( color: Colors.white60, width: 3, ), ), ), Container( width: imageSize / 5, height: imageSize / 5, decoration: BoxDecoration( color: previousPalette!.colors.elementAt(2), shape: BoxShape.circle, border: Border.all( color: Colors.white60, width: 3, ), ), ), ], ), ), ), ), const SizedBox(height: 16), ], ), ) : const SizedBox(), ); }, ); } }