127 lines
4.1 KiB
Dart
127 lines
4.1 KiB
Dart
import 'dart:ui';
|
|
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_hooks/flutter_hooks.dart';
|
|
|
|
class MewarnaPage extends HookWidget {
|
|
const MewarnaPage({Key? key}) : super(key: key);
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final double width = MediaQuery.of(context).size.width;
|
|
final double height = MediaQuery.of(context).size.height;
|
|
final points = useState<List<Offset?>>([]);
|
|
|
|
return Scaffold(
|
|
body: Stack(
|
|
children: [
|
|
Container(
|
|
decoration: const BoxDecoration(
|
|
gradient: LinearGradient(
|
|
begin: Alignment.topCenter,
|
|
end: Alignment.bottomCenter,
|
|
colors: [
|
|
Color.fromRGBO(138, 35, 135, 1.0),
|
|
Color.fromRGBO(233, 64, 87, 1.0),
|
|
Color.fromRGBO(242, 113, 33, 1.0),
|
|
])),
|
|
),
|
|
Center(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Container(
|
|
width: width * 0.80,
|
|
height: height * 0.80,
|
|
decoration: BoxDecoration(
|
|
borderRadius: const BorderRadius.all(Radius.circular(20.0)),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.black.withOpacity(0.4),
|
|
blurRadius: 5.0,
|
|
spreadRadius: 1.0,
|
|
)
|
|
],
|
|
),
|
|
child: GestureDetector(
|
|
onPanDown: (details) {
|
|
points.value.add(details.globalPosition);
|
|
// print(points);
|
|
},
|
|
onPanUpdate: (details) {
|
|
points.value.add(details.globalPosition);
|
|
},
|
|
onPanEnd: (details) {
|
|
points.value.add(null);
|
|
// print(details);
|
|
},
|
|
child: ClipRRect(
|
|
borderRadius:
|
|
const BorderRadius.all(Radius.circular(20.0)),
|
|
child: CustomPaint(
|
|
painter: MyCustomPainter(points: points.value),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(
|
|
height: 10,
|
|
),
|
|
Container(
|
|
width: width * 0.80,
|
|
decoration: const BoxDecoration(
|
|
borderRadius: BorderRadius.all(Radius.circular(20.0)),
|
|
color: Colors.white),
|
|
child: Row(
|
|
children: [
|
|
IconButton(
|
|
onPressed: () {}, icon: const Icon(Icons.color_lens)),
|
|
IconButton(
|
|
onPressed: () {},
|
|
icon: const Icon(Icons.layers_clear)),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
)
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class MyCustomPainter extends CustomPainter {
|
|
List<Offset?> points;
|
|
|
|
MyCustomPainter({required this.points});
|
|
|
|
@override
|
|
void paint(Canvas canvas, Size size) {
|
|
Paint background = Paint()..color = Colors.white;
|
|
Rect rect = Rect.fromLTWH(0, 0, size.width, size.height);
|
|
canvas.drawRect(rect, background);
|
|
|
|
// print(points);
|
|
Paint paint = Paint();
|
|
paint.color = Colors.transparent;
|
|
paint.strokeWidth = 5.0;
|
|
paint.isAntiAlias = true;
|
|
paint.strokeCap = StrokeCap.round;
|
|
|
|
for (int i = 0; i < points.length - 1; i++) {
|
|
if (points[i] != null && points[i + 1] != null) {
|
|
canvas.drawLine(points[i]!, points[i + 1]!, paint);
|
|
} else if (points[i] != null && points[i + 1] == null) {
|
|
canvas.drawPoints(PointMode.points, [points[i]!], paint);
|
|
}
|
|
}
|
|
}
|
|
|
|
@override
|
|
bool shouldRepaint(CustomPainter oldDelegate) {
|
|
return true;
|
|
}
|
|
}
|