Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Drag Drop
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'FlChart Demo',
showPerformanceOverlay: false,
theme: ThemeData(
primaryColor: const Color(0xff262545),
primaryColorDark: const Color(0xff201f39),
brightness: Brightness.dark,
),
home: const MyHomePage(title: 'fl_chart'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Color? draggedColor1, draggedColor2, draggedColor3;
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisSize: MainAxisSize.min,
children: [
DraggableLogo(color: Colors.red),
SizedBox(width: 16),
DraggableLogo(color: Colors.green),
SizedBox(width: 16),
DraggableLogo(color: Colors.blue),
],
),
SizedBox(height: 150),
TextButton(
onPressed: () {
setState(() {
draggedColor1 = null;
draggedColor2 = null;
draggedColor3 = null;
});
},
child: Text(
'clear',
style: TextStyle(fontSize: 28),
),
),
SizedBox(height: 150),
Row(
mainAxisSize: MainAxisSize.min,
children: [
DragLogoTarget(
draggedColor: draggedColor1,
onAccept: (color) {
setState(() {
draggedColor1 = color;
});
},
),
SizedBox(width: 16),
DragLogoTarget(
draggedColor: draggedColor2,
onAccept: (color) {
setState(() {
draggedColor2 = color;
});
},
),
SizedBox(width: 16),
DragLogoTarget(
draggedColor: draggedColor3,
onAccept: (color) {
setState(() {
draggedColor3 = color;
});
},
),
],
)
],
),
),
),
);
}
}
class DraggableLogo extends StatelessWidget {
final Color color;
const DraggableLogo({
Key? key,
required this.color,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Draggable(
child: ColoredLogo(color: color),
childWhenDragging: Opacity(
child: ColoredLogo(color: color),
opacity: 0.8,
),
feedback: Opacity(
child: ColoredLogo(color: color),
opacity: 0.4,
),
data: color,
);
}
}
class DragLogoTarget extends StatelessWidget {
final Color? draggedColor;
final DragTargetAccept<Color>? onAccept;
const DragLogoTarget({
Key? key,
required this.draggedColor,
required this.onAccept,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return DragTarget<Color>(
builder: (context, candidateData, rejectedData) {
if (draggedColor != null) {
return ColoredLogo(color: draggedColor!);
}
Color? color;
if (candidateData.isNotEmpty) {
color = candidateData[0] as Color;
}
return ColoredLogo(
color: color ?? Colors.white12,
);
},
onWillAccept: (color) => draggedColor == null,
onAccept: onAccept,
);
}
}
class ColoredLogo extends StatelessWidget {
final Color color;
const ColoredLogo({
Key? key,
required this.color,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return ColorFiltered(
child: ColorFiltered(
child: FlutterLogo(
size: 80,
),
colorFilter: ColorFilter.mode(Colors.white, BlendMode.srcIn),
),
colorFilter: ColorFilter.mode(color, BlendMode.modulate),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment