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
122 lines
4.9 KiB
import 'package:flutter/material.dart';
|
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
|
import 'package:my_flutter_puzzle/providers.dart';
|
|
import 'package:my_flutter_puzzle/utils/extensions/context_extension.dart';
|
|
import 'package:palette_generator/palette_generator.dart';
|
|
|
|
class ImageViewer extends ConsumerWidget {
|
|
const ImageViewer({
|
|
required this.puzzleSize,
|
|
required this.previousImage,
|
|
required this.previousPalette,
|
|
required this.imageSize,
|
|
Key? key,
|
|
}) : super(key: key);
|
|
|
|
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) => SizedBox(
|
|
width: context.width * 202 / 812,
|
|
height: context.width * 202 / 812,
|
|
child: ClipRRect(
|
|
borderRadius: BorderRadius.circular(8),
|
|
child: Image(
|
|
image: image.image,
|
|
height: imageSize,
|
|
width: imageSize,
|
|
),
|
|
),
|
|
),
|
|
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(),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
}
|