first commit

2022-04-06 07:53:12 +08:00
commit b5367d4fe0
21 changed files with 1181 additions and 0 deletions
--- a/lib/pages/mewarna.dart
+++ b/lib/pages/mewarna.dart
@ -0,0 +1,126 @@
+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;
+  }
+}