User profile screen v2

lib/views/pages/home/top_bar/home_top_bar.dart

@@ -19,13 +19,13 @@ class HomeTopBar extends HookConsumerWidget {
       style: Theme.of(context).textTheme.headlineMedium,
     );
 
-    Widget userAvatar = InkWell(
-      key: profilePictureKey,
-      onTap: () {
-        Navigator.pushNamed(context, Routes.profile.name);
-      },
-      child: const CircleAvatar(
-        child: Text("PR"),
+    Widget userAvatar = CircleAvatar(
+      child: InkWell(
+        key: profilePictureKey,
+        onTap: () {
+          Navigator.pushNamed(context, Routes.profile.name);
+        },
+        child: const Text("PR"),
       ),
     );
 

lib/views/pages/profile/posts_info/info_card.dart

@@ -7,22 +7,16 @@ class InfoCard extends StatelessWidget {
 
   const InfoCard({
     super.key,
-    required this.theme,
   });
 
-  final ThemeData theme;
-
   @override
   Widget build(BuildContext context) {
     return Container(
       key: cardKey,
-      width: 92,
-      height: 92,
+      width: 54,
+      height: 80,
       decoration: BoxDecoration(
-        border: Border.all(
-          color: Colors.black,
-          width: 2,
-        ),
+        color: Theme.of(context).colorScheme.secondaryContainer,
         borderRadius: const BorderRadius.all(Radius.circular(10)),
       ),
     );

lib/views/pages/profile/posts_info/info_column.dart

@@ -3,53 +3,27 @@ import "package:flutter/material.dart";
 /// This widget defines the style of the columns in the profile page,
 /// such as the posts and comments columns
 class InfoColumn extends StatelessWidget {
-  static const infoColumnKey = Key("info column");
   const InfoColumn({
     super.key,
-    required this.theme,
     required this.itemList,
-    required this.title,
+    required this.colKey,
   });
 
-  final ThemeData theme;
   final List<Widget> itemList;
-  final String title;
+  final Key colKey;
 
   @override
   Widget build(BuildContext context) {
-    return Container(
-      key: infoColumnKey,
-      height: 275,
-      width: 380,
-      decoration: BoxDecoration(
-        borderRadius: const BorderRadius.all(Radius.circular(10)),
-        color: theme.colorScheme.secondaryContainer,
-      ),
-      child: Padding(
-        padding: const EdgeInsets.only(left: 5, right: 5, top: 1),
-        child: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
-            Text(
-              title,
-              style: theme.textTheme.headlineSmall,
-            ),
-            const SizedBox(height: 5),
-            Expanded(
-              child: ListView.separated(
-                padding: const EdgeInsets.all(8),
-                scrollDirection: Axis.vertical,
-                itemCount: itemList.length,
-                itemBuilder: (BuildContext context, int index) {
-                  return itemList[index];
-                },
-                separatorBuilder: (BuildContext context, int index) =>
-                    const SizedBox(height: 10),
-              ),
-            ),
-          ],
-        ),
-      ),
+    return ListView.separated(
+      key: colKey,
+      padding: const EdgeInsets.all(8),
+      scrollDirection: Axis.vertical,
+      itemCount: itemList.length,
+      itemBuilder: (BuildContext context, int index) {
+        return itemList[index];
+      },
+      separatorBuilder: (BuildContext context, int index) =>
+          const SizedBox(height: 10),
     );
   }
 }

lib/views/pages/profile/posts_info/info_row.dart

@@ -6,24 +6,21 @@ class InfoRow extends StatelessWidget {
   static const infoRowKey = Key("info row");
   const InfoRow({
     super.key,
-    required this.theme,
     required this.itemList,
     required this.title,
   });
 
-  final ThemeData theme;
   final List<Widget> itemList;
   final String title;
 
   @override
   Widget build(BuildContext context) {
     return Container(
       key: infoRowKey,
-      height: 150,
+      height: 100,
       width: 380,
-      decoration: BoxDecoration(
-        borderRadius: const BorderRadius.all(Radius.circular(10)),
-        color: theme.colorScheme.secondaryContainer,
+      decoration: const BoxDecoration(
+        borderRadius: BorderRadius.all(Radius.circular(10)),
       ),
       child: Padding(
         padding: const EdgeInsets.only(left: 5, top: 1),
@@ -32,7 +29,7 @@ class InfoRow extends StatelessWidget {
           children: [
             Text(
               title,
-              style: theme.textTheme.headlineSmall,
+              style: Theme.of(context).textTheme.titleMedium,
             ),
             const SizedBox(height: 5),
             Expanded(

lib/views/pages/profile/profile_page.dart

@@ -4,76 +4,87 @@ import "package:proxima/viewmodels/profile_view_model.dart";
 import "package:proxima/views/pages/profile/posts_info/info_card.dart";
 import "package:proxima/views/pages/profile/posts_info/info_column.dart";
 import "package:proxima/views/pages/profile/posts_info/info_row.dart";
-import "package:proxima/views/pages/profile/user_info/centauri_points.dart";
 import "package:proxima/views/pages/profile/user_info/user_account.dart";
 
 /// This widget is used to display the profile page
 /// It contains the user info, centauri points, badges, posts and comments
 class ProfilePage extends HookConsumerWidget {
   const ProfilePage({super.key});
+  static const postTabKey = Key("post tab");
+  static const commentTabKey = Key("comment tab");
+  static const tabKey = Key("tab");
+  static const postColumnKey = Key("post column");
+  static const commentColumnKey = Key("comment column");
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final asyncUserData = ref.watch(profileProvider);
 
-    final theme = Theme.of(context);
-
     var itemList = <InfoCard>[];
 
-    for (var i = 0; i < 5; i++) {
+    for (var i = 0; i < 10; i++) {
       itemList.add(
-        InfoCard(
-          theme: theme,
-        ),
+        const InfoCard(),
       );
     }
 
     return switch (asyncUserData) {
-      AsyncData(:final value) => Scaffold(
-          appBar: AppBar(
-            leading: IconButton(
-              icon: const Icon(Icons.arrow_back),
-              onPressed: () {
-                Navigator.pop(context);
-              },
-            ),
-            title: UserAccount(theme: theme, userEmail: value.user.email),
-            actions: [
-              IconButton(
-                icon: const Icon(Icons.settings),
-                onPressed: () {},
+      AsyncData(:final value) => DefaultTabController(
+          length: 2,
+          child: Scaffold(
+            appBar: AppBar(
+              leading: IconButton(
+                icon: const Icon(Icons.arrow_back),
+                onPressed: () {
+                  Navigator.pop(context);
+                },
               ),
-            ],
-          ),
-          body: Container(
-            padding: const EdgeInsets.only(left: 8, right: 8),
-            child: Center(
-              child: SingleChildScrollView(
-                child: Column(
-                  children: [
-                    const SizedBox(height: 15),
-                    CentauriPoints(theme: theme),
-                    const SizedBox(height: 15),
-                    InfoRow(
-                      theme: theme,
-                      itemList: itemList,
-                      title: "Your badges:",
-                    ),
-                    const SizedBox(height: 15),
-                    InfoColumn(
-                      theme: theme,
-                      itemList: itemList,
-                      title: "Your posts:",
-                    ),
-                    const SizedBox(height: 15),
-                    InfoColumn(
-                      theme: theme,
-                      itemList: itemList,
-                      title: "Your comments:",
-                    ),
-                    const SizedBox(height: 15),
-                  ],
+              title: UserAccount(userEmail: value.user.email),
+              actions: [
+                IconButton(
+                  icon: const Icon(Icons.settings),
+                  onPressed: () {},
                 ),
+              ],
+            ),
+            body: Container(
+              padding: const EdgeInsets.only(left: 8, right: 8, bottom: 8),
+              child: Column(
+                children: [
+                  const SizedBox(height: 8),
+                  InfoRow(
+                    itemList: itemList,
+                    title: "Your badges:",
+                  ),
+                  const TabBar(
+                    key: tabKey,
+                    tabs: [
+                      Tab(
+                        text: "Posts",
+                        key: postTabKey,
+                      ),
+                      Tab(
+                        text: "Comments",
+                        key: commentTabKey,
+                      ),
+                    ],
+                  ),
+                  const SizedBox(height: 8),
+                  Expanded(
+                    child: TabBarView(
+                      children: [
+                        InfoColumn(
+                          itemList: itemList,
+                          colKey: postColumnKey,
+                        ),
+                        InfoColumn(
+                          itemList: itemList,
+                          colKey: commentColumnKey,
+                        ),
+                      ],
+                    ),
+                  ),
+                ],
               ),
             ),
           ),

lib/views/pages/profile/user_info/user_account.dart

@@ -3,14 +3,13 @@ import "package:flutter/material.dart";
 /// This widget display the user info in the profile page
 class UserAccount extends StatelessWidget {
   static const userInfoKey = Key("user Info");
+  static const centauriPointsKey = Key("centauri points");
 
   const UserAccount({
     super.key,
-    required this.theme,
     required this.userEmail,
   });
 
-  final ThemeData theme;
   final String? userEmail;
 
   @override
@@ -31,12 +30,14 @@ class UserAccount extends StatelessWidget {
               //TODO: get the profile info from the viewmodel
               Text(
                 userEmail ?? "averylongemailjusttocheckthatitfades",
-                style: theme.textTheme.titleSmall,
+                style: Theme.of(context).textTheme.titleSmall,
                 overflow: TextOverflow.fade,
               ),
               Text(
-                "User Profile",
-                style: theme.textTheme.titleSmall,
+                //TODO: get the user points from the viewmodel
+                "User Profile · 1000 Points ",
+                style: Theme.of(context).textTheme.titleSmall,
+                key: centauriPointsKey,
               ),
             ],
           ),