1

lib/widgets/common/app_backend.dart

@@ -0,0 +1,28 @@
+import 'package:flutter/material.dart';
+
+class AppBackend extends StatelessWidget {
+  final Widget child;
+
+  const AppBackend({super.key, required this.child});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: double.infinity,
+      padding: EdgeInsets.all(15),
+      decoration: BoxDecoration(
+        gradient: LinearGradient(
+          begin: Alignment.topCenter,
+          end: Alignment.bottomCenter,
+          colors: [
+            Color(0xffFFFFFF),
+            Color(0xffF7fefD),
+            Color(0xffF0FDFA),
+          ],
+          stops: [0, 0.6, 1],
+        ),
+      ),
+      child: child,
+    );
+  }
+}

lib/widgets/common/app_header.dart

@@ -0,0 +1,80 @@
+import 'package:derma_flutter/router/config/route_paths.dart';
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:provider/provider.dart';
+import 'package:remixicon/remixicon.dart';
+
+import '../../providers/app_store.dart';
+
+class AppHeader extends StatefulWidget {
+  const AppHeader({super.key});
+
+  @override
+  State<AppHeader> createState() => _AppHeaderState();
+}
+
+class _AppHeaderState extends State<AppHeader> {
+  void _handLogout() {
+    var appStore = context.read<AppStore>();
+    appStore.logout();
+    context.go(RoutePaths.login);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return SafeArea(
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Row(
+            spacing: 10,
+            children: [
+              Image.asset(
+                "assets/image/logo.png",
+                width: 44,
+              ),
+              Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    "Demacare",
+                    style: TextStyle(fontWeight: FontWeight.bold),
+                  ),
+                  Text(
+                    "AI Skin Health Analysis",
+                    style: Theme.of(context).textTheme.labelSmall,
+                  ),
+                ],
+              ),
+            ],
+          ),
+          Row(
+            children: [
+              PopupMenuButton(
+                offset: const Offset(0, 50),
+                color: Theme.of(context).cardColor,
+                itemBuilder: (context) {
+                  return [
+                    PopupMenuItem(
+                      onTap: _handLogout,
+                      child: Text("Log out"),
+                    ),
+                  ];
+                },
+                child: Container(
+                  width: 40,
+                  height: 40,
+                  decoration: BoxDecoration(
+                    color: Theme.of(context).colorScheme.primary,
+                    shape: BoxShape.circle,
+                  ),
+                  child: Icon(RemixIcons.user_3_line, color: Colors.white),
+                ),
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/widgets/ui_kit/button/custom_button.dart

@@ -0,0 +1,84 @@
+import 'package:flutter/material.dart';
+
+///自定义按钮
+///包括loading功能
+class CustomButton extends StatelessWidget {
+  final Widget child;
+  final VoidCallback? onPressed;
+  final bool loading;
+  final bool round;
+  final bool disabled;
+
+  const CustomButton({
+    super.key,
+    required this.child,
+    this.onPressed,
+    this.loading = false,
+    this.round = true,
+    this.disabled = false,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    ///自定义颜色
+    // switch (size) {
+    //   case ButtonSize.small:
+    //     height = 28;
+    //     loadingSize = 16;
+    //     fontSize = 12;
+    //     padding = const EdgeInsets.symmetric(horizontal: 12);
+    //     break;
+    //   case ButtonSize.large:
+    //     height = 48;
+    //     loadingSize = 24;
+    //     fontSize = 18;
+    //     padding = const EdgeInsets.symmetric(horizontal: 20);
+    //     break;
+    //   case ButtonSize.medium:
+    //     height = 45;
+    //     loadingSize = 15;
+    //     fontSize = 16;
+    //     padding = const EdgeInsets.symmetric(horizontal: 16);
+    //     break;
+    // }
+
+    void handClick() {
+      if (!loading && !disabled) {
+        onPressed?.call();
+      }
+    }
+
+    return Opacity(
+      opacity: disabled ? 0.5 : 1,
+      child: ElevatedButton(
+        onPressed: handClick,
+        style: ElevatedButton.styleFrom(
+          shape: round
+              ? const StadiumBorder()
+              : RoundedRectangleBorder(
+                  borderRadius: BorderRadius.circular(10),
+                ),
+        ),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Visibility(
+              visible: loading,
+              child: Container(
+                margin: EdgeInsets.only(right: 8),
+                child: SizedBox.square(
+                  dimension: 15,
+                  child: CircularProgressIndicator(
+                    color: Colors.white,
+                    strokeWidth: 2,
+                  ),
+                ),
+              ),
+            ),
+            child,
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/widgets/ui_kit/empty/index.dart

@@ -0,0 +1,35 @@
+import 'package:flutter/material.dart';
+
+import '../../../config/app_context.dart';
+
+class Empty extends StatelessWidget {
+  final String? title;
+  final Widget? child;
+
+  const Empty({super.key, this.title, this.child});
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox.expand(
+      child: Align(
+        alignment: const FractionalOffset(0.5, 0.2),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            FractionallySizedBox(
+              widthFactor: 0.5,
+              child: Image.asset("assets/image/empty_data.png"),
+            ),
+            if (title != null)
+              Text(
+                title!,
+                style: AppContext.textTheme.labelMedium,
+              ),
+            if( child != null)
+              child!
+          ],
+        ),
+      ),
+    );
+  }
+}