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),
+                ),
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}