1

lib/page/home/widget/tip_widget.dart

@@ -0,0 +1,57 @@
+import 'package:flutter/material.dart';
+
+class TipBox extends StatelessWidget {
+  TipBox({super.key});
+
+  final List<String> tips = [
+    "Ensure good lighting",
+    "Keep the camera steady",
+    "Fill the frame with the skin area",
+    "Avoid shadows and glare",
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: double.infinity,
+      margin: EdgeInsets.only(top: 20),
+      padding: EdgeInsets.all(15),
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(10),
+        color: Theme.of(context).cardColor,
+        boxShadow: [
+          BoxShadow(
+            color: Color(0xffE9E9E9),
+            spreadRadius: 2,
+            blurRadius: 9,
+            offset: Offset(1, 2), // changes position of shadow
+          ),
+        ],
+      ),
+      child: DefaultTextStyle(
+        style: TextStyle(color: Color(0xff1A8C8C)),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text(
+              "Tips:",
+              style: Theme.of(context).textTheme.titleSmall?.copyWith(
+                color: Color(0xff1A8C8C),
+              ),
+            ),
+            ListView.builder(
+              itemExtent: 25,
+              shrinkWrap: true,
+              physics: NeverScrollableScrollPhysics(),
+              padding: EdgeInsets.all(10),
+              itemBuilder: (_, index) {
+                return Text("-${tips[index]}.");
+              },
+              itemCount: tips.length,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/page/home/widget/upload_widget.dart

@@ -0,0 +1,117 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+
+class UploadBox extends StatelessWidget {
+  final Function() onSelect;
+  final Function() onPhoto;
+
+  const UploadBox({
+    super.key,
+    required this.onSelect,
+    required this.onPhoto,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: EdgeInsets.only(top: 30),
+      width: double.infinity,
+      height: 350,
+      decoration: BoxDecoration(
+        color: Theme.of(context).cardColor,
+        borderRadius: BorderRadius.circular(10),
+        boxShadow: [
+          BoxShadow(
+            color: Color(0xffE9E9E9),
+            spreadRadius: 2,
+            blurRadius: 9,
+            offset: Offset(1, 2), // changes position of shadow
+          ),
+        ],
+      ),
+      child: Stack(
+        children: [
+          Positioned(
+            bottom: 0,
+            left: 0,
+            child: Image.asset(
+              "assets/image/bg_hushi.png",
+              width: 0.7.sw,
+            ),
+          ),
+          Positioned(
+            left: 0,
+            top: 0,
+            right: 0,
+            child: Container(
+              padding: EdgeInsets.all(15),
+              child: Text(
+                "Take a clear photo of the skin area you’d like to analyze.Our AI will provide instant health insights.",
+                style: Theme.of(context).textTheme.labelSmall,
+              ),
+            ),
+          ),
+          SizedBox(
+            width: double.infinity,
+            child: Column(
+              spacing: 20,
+              crossAxisAlignment: CrossAxisAlignment.center,
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                Text(
+                  "Analyze Your Skin",
+                  style: Theme.of(context).textTheme.titleMedium,
+                ),
+                _btn(
+                  colors: [Color(0xff107870), Color(0xff1EDECF)],
+                  title: "Take photo",
+                  onTap: (){
+                    onPhoto();
+                  },
+                ),
+                _btn(
+                  colors: [Color(0xffFFFFFF), Color(0xffC6C6C6)],
+                  title: "Upload Photo",
+                  textColor: Color(0xff000000),
+                  onTap: (){
+                    onSelect();
+                  },
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+Widget _btn({
+  required List<Color> colors,
+  Color textColor = Colors.white,
+  required String title,
+  required Function() onTap,
+}) {
+  return InkWell(
+    onTap: onTap,
+    child: Container(
+      width: 120,
+      height: 38,
+      alignment: Alignment.center,
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(10),
+        gradient: LinearGradient(
+          colors: colors,
+        ),
+      ),
+      child: Text(
+        title,
+        style: TextStyle(
+          fontSize: 14,
+          color: textColor,
+          fontWeight: FontWeight.w700,
+        ),
+      ),
+    ),
+  );
+}