chore: mobile profile page ui

IamMuuo · Dec 2, 2024 · d0d4578 · d0d4578
1 parent 0317385
commit d0d4578
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 3 deletions.
diff --git a/lib/app.dart b/lib/app.dart
@@ -1,6 +1,7 @@
 import 'package:academia/utils/router/router.dart';
 import 'package:flutter/material.dart';
 import 'package:dynamic_color/dynamic_color.dart';
+import 'package:google_fonts/google_fonts.dart';
 
 class Academia extends StatelessWidget {
   const Academia({super.key});
@@ -14,6 +15,7 @@ class Academia extends StatelessWidget {
         theme: ThemeData(
           colorScheme: lightscheme,
           useMaterial3: true,
+          fontFamily: GoogleFonts.inter().fontFamily,
         ),
       ),
     );

diff --git a/lib/features/profile/profile_page_mobile.dart b/lib/features/profile/profile_page_mobile.dart
@@ -1,4 +1,8 @@
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'package:icons_plus/icons_plus.dart';
+import 'package:sliver_tools/sliver_tools.dart';
 
 class ProfilePageMobile extends StatefulWidget {
   const ProfilePageMobile({super.key});
@@ -10,9 +14,78 @@ class ProfilePageMobile extends StatefulWidget {
 class _ProfilePageMobileState extends State<ProfilePageMobile> {
   @override
   Widget build(BuildContext context) {
-    return const Scaffold(
-      body: Center(
-        child: Text("Profile page mobile"),
+    return Scaffold(
+      body: CustomScrollView(
+        slivers: [
+          SliverAppBar(
+            pinned: true,
+            floating: true,
+            snap: true,
+            title: const Text("My Profile"),
+            actions: [
+              IconButton(
+                onPressed: () {},
+                icon: const Icon(Bootstrap.pen),
+              ),
+            ],
+          ),
+          SliverPinnedHeader(
+            child: Container(
+              width: MediaQuery.of(context).size.width,
+              padding: const EdgeInsets.all(12),
+              child: Column(
+                spacing: 12,
+                children: [
+                  const CircleAvatar(
+                    radius: 80,
+                  ),
+                  Text(
+                    "John Doe Sang Kipkemboi",
+                    style: Theme.of(context).textTheme.headlineSmall,
+                    overflow: TextOverflow.ellipsis,
+                  ),
+                  const Text(
+                    "Some long bio here to be here",
+                    overflow: TextOverflow.visible,
+                  ),
+                  FilledButton(
+                    onPressed: () {},
+                    child: const Text("Preview my school ID"),
+                  ),
+                ],
+              ),
+            ),
+          ),
+          SliverPadding(
+            padding: const EdgeInsets.all(12),
+            sliver: SliverClip(
+              child: MultiSliver(
+                children: const [
+                  ListTile(
+                    leading: Icon(Bootstrap.hash),
+                    title: Text("Admission Number"),
+                    subtitle: Text("21-1000"),
+                  ),
+                  ListTile(
+                    leading: Icon(Bootstrap.compass),
+                    title: Text("Campus"),
+                    subtitle: Text("Athi River"),
+                  ),
+                  ListTile(
+                    leading: Icon(Bootstrap.phone),
+                    title: Text("Phone Number"),
+                    subtitle: Text("078277272"),
+                  ),
+                  ListTile(
+                    leading: Icon(Bootstrap.envelope_heart),
+                    title: Text("Email"),
+                    subtitle: Text("someone@example.com"),
+                  )
+                ],
+              ),
+            ),
+          ),
+        ],
       ),
     );
   }