feat: wip plan view, and component numeric pad

2024-02-15 19:55:21 +07:00
parent 8537045d74
commit 7e9c109fa2
15 changed files with 268 additions and 36 deletions
--- a/lib/application/component/numeric_pad/numeric_pad.dart
+++ b/lib/application/component/numeric_pad/numeric_pad.dart
@@ -0,0 +1,109 @@
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:flutter/material.dart';
+
+class NumericPad extends StatelessWidget {
+  final Function(String) onNumberSelected;
+  final bool isPin;
+  const NumericPad({super.key, required this.onNumberSelected, this.isPin = false});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            numberWidget('1'),
+            dividerGradient(false, Alignment.bottomCenter, Alignment.topCenter),
+            numberWidget('2'),
+            dividerGradient(false, Alignment.bottomCenter, Alignment.topCenter),
+            numberWidget('3')
+          ],
+        ),
+        dividerGradient(true, Alignment.centerLeft, Alignment.centerRight),
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            numberWidget('4'),
+            dividerGradient(false, Alignment.center, Alignment.center, fullColor: true),
+            numberWidget('5'),
+            dividerGradient(false, Alignment.center, Alignment.center, fullColor: true),
+            numberWidget('6')
+          ],
+        ),
+        dividerGradient(true, Alignment.centerLeft, Alignment.centerRight),
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: [
+            isPin ? spaceWidget() : numberWidget('0'),
+            dividerGradient(false, Alignment.topCenter, Alignment.bottomCenter),
+            numberWidget(isPin ? '0' : '000'),
+            dividerGradient(false, Alignment.topCenter, Alignment.bottomCenter),
+            removeWidget()
+          ],
+        ),
+      ],
+    );
+  }
+
+  Widget dividerGradient(bool isHorizontal, AlignmentGeometry gradientFrom, AlignmentGeometry gradientTo, {bool fullColor = false}) {
+    return Container(
+      width: isHorizontal ? SizeConfig.width : 1,
+      height: isHorizontal ? 1 : SizeConfig.height * 0.11,
+      decoration: BoxDecoration(
+          gradient: LinearGradient(
+              colors: [
+                if(isHorizontal) ...[
+                  ColorPalette.slate200.withOpacity(0)
+                ],
+                ColorPalette.slate200,
+                fullColor ? ColorPalette.slate200 : ColorPalette.slate200.withOpacity(0)
+              ],
+              begin: gradientFrom,
+              end: gradientTo
+          )
+      ),
+    );
+  }
+
+  Widget spaceWidget() {
+    return Expanded(
+        child: SizedBox()
+    );
+  }
+
+  Widget numberWidget(String number) {
+    return Expanded(
+        child: GestureDetector(
+          onTap: () {
+            onNumberSelected(number);
+          },
+          child: Container(
+            padding: EdgeInsets.symmetric(vertical: SizeConfig.height * .028),
+            child: Text(
+              number,
+              textAlign: TextAlign.center,
+              style: TextStyle(
+                  fontSize: 28,
+                  fontWeight: FontWeight.bold
+              ),
+            ),
+          ),
+        )
+    );
+  }
+
+  Widget removeWidget() {
+    return Expanded(
+        child: Icon(
+          Icons.highlight_remove,
+          size: 28,
+        )
+    );
+  }
+}