image_comparator 1.0.1 image_comparator: ^1.0.1 copied to clipboard
This package allows you to effortlessly compare two images by providing a draggable control point that can be customized to suit your application's design.
example/lib/main.dart
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:image_comparator/image_comparator.dart';
import 'package:image_compare_slider/image_compare_slider.dart';
import 'package:collection/collection.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.white),
useMaterial3: true,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
double thumbPositionOffset = 0.5;
ThumbStyle thumbStyle = ThumbStyle.icon;
List<Color> controlLineColor = [
Colors.white,
Colors.amber,
Colors.teal,
Colors.redAccent
];
int selectedColorIndex = 0;
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Container(
padding: const EdgeInsets.only(top: 48, bottom: 18),
child: const Text(
"Image Comparator View",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 20),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(18),
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: ImageComparator(
image1: Image.asset(
"assets/images/before.jpg",
fit: BoxFit.cover,
),
image2: Image.asset(
"assets/images/after.jpg",
fit: BoxFit.cover,
),
controlLineWidth: 2,
controlLineColor: controlLineColor[selectedColorIndex],
controlVerticalOffset: thumbPositionOffset,
controlThumb: getThumbStyle(thumbStyle,
controlColor: controlLineColor[selectedColorIndex]),
controlHorizontalOffset: 0.5,
),
),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: Column(
children: [
Row(
children: [
const Text("Control Color"),
const SizedBox(
width: 12,
),
Row(
children: controlLineColor
.mapIndexed((index, item) => GestureDetector(
onTap: () => setState(() {
selectedColorIndex = index;
}),
child: Container(
decoration: BoxDecoration(
color: item,
border: Border.all(
color: selectedColorIndex == index
? Colors.black
: Colors.transparent,
width: 2)),
width: 42,
height: 42),
))
.toList(),
),
],
),
Row(
children: [
const Text("Thumb Position"),
Expanded(
child: Slider(
value: thumbPositionOffset,
onChanged: (value) {
setState(() => thumbPositionOffset = value);
}),
),
],
),
SizedBox(
height: 8,
),
Container(
height: 1,
color: Colors.grey,
),
SizedBox(
height: 8,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text("Custom Thumb Icon"),
const SizedBox(
width: 28,
),
Row(
children: ThumbStyle.values
.map((item) => GestureDetector(
onTap: () {
setState(() {
thumbStyle = item;
});
},
child: Container(
color: item == thumbStyle
? Colors.yellow
: Colors.white,
padding: EdgeInsets.symmetric(
horizontal: 12, vertical: 8),
child: Text(item.name),
),
))
.toList(),
)
],
)
],
),
),
const SizedBox(
height: 24,
),
],
),
);
}
Widget getThumbStyle(ThumbStyle thumbStyle,
{Color controlColor = Colors.white}) {
switch (thumbStyle) {
case ThumbStyle.icon:
return Icon(
Icons.circle,
color: controlColor,
);
case ThumbStyle.svg:
return SvgPicture.asset("assets/images/gesture.svg");
case ThumbStyle.widget:
return Container(
width: 20,
height: 20,
decoration: BoxDecoration(
border: Border.all(color: controlColor, width: 2),
borderRadius: BorderRadius.circular(4)),
);
case ThumbStyle.image:
return Image.asset(
"assets/images/thumb.png",
width: 28,
height: 28,
);
case ThumbStyle.text:
return Text(
"< Slide it >",
style: TextStyle(color: controlColor, fontWeight: FontWeight.bold),
);
}
}
}
enum ThumbStyle {
icon,
svg,
widget,
image,
text,
}