Feature/35

lib/main.dart

@@ -1,8 +1,12 @@
 import 'package:flutter/material.dart';
+<<<<<<< HEAD
+import 'package:rice_music_sharing/screen/group_and_profile_screen.dart';
+=======
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:rice_music_sharing/data/repositories/storage_repository.dart';
 import 'screen/home_screen.dart';
 import 'screen/login_screen.dart';
+>>>>>>> develop
 import 'themes/themes.dart';
 import '../constants.dart';
 import 'screen/discovery_screen.dart';

lib/screen/comments_screen.dart

@@ -0,0 +1,46 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+
+import '../widgets/my_navigation_bar.dart';
+import '../widgets/outlined_button.dart';
+import '../widgets/single_comment.dart';
+import '../widgets/SingleComment.dart';
+
+class CommentsScreen extends StatefulWidget {
+  @override
+  State<CommentsScreen> createState() => _CommentsScreenState();
+}
+
+class _CommentsScreenState extends State<CommentsScreen> {
+  List<String> _comments = <String>['A', 'B', 'C'];
+  List<int> _numLikes = <int>[1, 2, 3];
+  List<bool> _liked = <bool>[true, false, true];
+
+  void _onLikeTapped(int index) {
+    setState(() {
+      _numLikes[index] =
+          _liked[index] ? _numLikes[index] + 1 : _numLikes[index] - 1;
+      _liked[index] = !_liked[index];
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      bottomNavigationBar: MyNavigationBar(),
+      backgroundColor: Theme.of(context).colorScheme.background,
+      body: ListView.builder(
+        itemCount: _comments.length,
+        itemBuilder: (context, index) {
+          return SingleComment(
+            comment: _comments[index],
+            numLikes: _numLikes[index],
+            isNotLiked: !_liked[index],
+            onLikeTapped: () => _onLikeTapped(index),
+          );
+        },
+      ),
+    );
+  }
+}

lib/screen/group_and_profile_screen.dart

@@ -0,0 +1,197 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+
+import '../widgets/my_navigation_bar.dart';
+import '../widgets/outlined_button.dart';
+
+class ProfileScreen extends StatelessWidget {
+  ProfileScreen(this.isGroup);
+
+  final bool isGroup;
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+        bottomNavigationBar: const MyNavigationBar(),
+        backgroundColor: Theme.of(context).colorScheme.background,
+        body: Stack(children: [
+          SvgPicture.asset(
+            'Gradient.svg',
+            alignment: Alignment.topCenter,
+            width: MediaQuery.of(context).size.width,
+          ),
+          SvgPicture.asset(
+            'Vector.svg',
+            alignment: Alignment.topCenter,
+            width: MediaQuery.of(context).size.width,
+          ),
+          CustomScrollView(slivers: [
+            SliverPadding(
+              padding: const EdgeInsets.fromLTRB(20, 85, 20, 20),
+              sliver: SliverList(
+                delegate: SliverChildListDelegate([
+                  CircleAvatar(
+                    foregroundImage: const NetworkImage(
+                      "https://picsum.photos/250?image=9",
+                    ),
+                    radius: 45,
+                    child: Container(
+                      decoration: BoxDecoration(
+                        shape: BoxShape.circle,
+                        boxShadow: [
+                          BoxShadow(
+                            color: Theme.of(context).colorScheme.tertiary,
+                            blurRadius: 40,
+                            blurStyle: BlurStyle.outer,
+                          ),
+                        ],
+                      ),
+                    ),
+                  ),
+                  const SizedBox(
+                    height: 25,
+                  ),
+                  Text(
+                    "Will Rice College",
+                    textAlign: TextAlign.center,
+                    style: Theme.of(context).textTheme.titleMedium,
+                  ),
+                  const SizedBox(
+                    height: 25,
+                  ),
+                  Padding(
+                      padding: const EdgeInsets.fromLTRB(30, 0, 30, 0),
+                      child: Row(
+                        mainAxisAlignment: MainAxisAlignment.center,
+                        crossAxisAlignment: CrossAxisAlignment.center,
+                        children: [
+                          TunedInOutlinedButton(
+                            text: "Follow",
+                            onPressed: () => {},
+                            toggle: false,
+                          ),
+                          SizedBox(
+                            width: isGroup ? 25 : 0,
+                          ),
+                          isGroup
+                              ? TunedInOutlinedButton(
+                                  text: "Join",
+                                  onPressed: () => {},
+                                  toggle: true,
+                                )
+                              : const SizedBox.shrink(),
+                        ],
+                      )),
+                  const SizedBox(height: 10),
+                  Row(
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: !isGroup
+                        ? [
+                            const SizedBox(
+                              width: 100,
+                              child: Text("Followers\n 200",
+                                  textAlign: TextAlign.center),
+                            ),
+                            const SizedBox(width: 25, height: 2),
+                            const SizedBox(
+                              width: 100,
+                              child: Text("Following\n 200",
+                                  textAlign: TextAlign.center),
+                            ),
+                          ]
+                        : [
+                            Text(
+                              "200",
+                              style: Theme.of(context)
+                                  .textTheme
+                                  .displaySmall
+                                  ?.copyWith(
+                                    fontWeight: FontWeight.w600,
+                                  ),
+                            ),
+                            Text(" Followers",
+                                style:
+                                    Theme.of(context).textTheme.displaySmall),
+                            const SizedBox(width: 25, height: 2)
+                          ],
+                  ),
+                  Text(
+                    "Playlists: 4",
+                    textAlign: TextAlign.left,
+                    style: Theme.of(context).textTheme.headlineMedium?.copyWith(
+                          fontFamily: 'Poppins',
+                        ),
+                  ),
+                  const PlaylistCard(),
+                  const PlaylistCard(),
+                  const PlaylistCard(),
+                  const PlaylistCard(),
+                  const SizedBox(height: 25),
+                  Row(children: const [
+                    Text(
+                      "Browse all playlists 20",
+                    ),
+                    Spacer(),
+                    Icon(Icons.chevron_right),
+                  ])
+                ]),
+              ),
+            )
+          ]),
+        ]));
+  }
+}
+
+class PlaylistCard extends StatelessWidget {
+  const PlaylistCard({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      child: InkWell(
+          onTap: () {},
+          child: Row(
+            children: [
+              Padding(
+                padding: const EdgeInsets.all(12),
+                child: ClipRRect(
+                  borderRadius: BorderRadius.circular(8.0),
+                  child: Image.network(
+                    "https://picsum.photos/250?image=9",
+                    width: 56,
+                    height: 56,
+                    fit: BoxFit.cover,
+                  ),
+                ),
+              ),
+              Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    "Playlist Name",
+                    textAlign: TextAlign.left,
+                    style: Theme.of(context)
+                        .textTheme
+                        .displayMedium
+                        ?.copyWith(color: Colors.white),
+                  ),
+                  const SizedBox(
+                    height: 5,
+                  ),
+                  Text("20 Songs",
+                      textAlign: TextAlign.left,
+                      style:
+                          Theme.of(context).textTheme.displayMedium?.copyWith(
+                                color: const Color(0xFFA1A9BC),
+                              )),
+                ],
+              ),
+              const Spacer(),
+              const Padding(
+                padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
+                child: Icon(Icons.chevron_right),
+              ),
+            ],
+          )),
+    );
+  }
+}

lib/widgets/SingleComment.dart

@@ -0,0 +1,74 @@
+import 'package:flutter/material.dart';
+
+class SingleComment extends StatelessWidget {
+  final String comment;
+  final int numLikes;
+  final bool isNotLiked;
+  final VoidCallback onLikeTapped;
+
+  const SingleComment({
+    Key? key,
+    required this.comment,
+    required this.numLikes,
+    required this.isNotLiked,
+    required this.onLikeTapped,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        const CircleAvatar(
+          backgroundImage: NetworkImage('https://picsum.photos/250?image=9'),
+          radius: 18,
+        ),
+        const SizedBox(width: 10),
+        Expanded(
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Row(
+                children: [
+                  const Text('David'),
+                  const SizedBox(width: 5),
+                  Text(
+                    '32 min ago',
+                    style: Theme.of(context).textTheme.bodyText2,
+                  ),
+                ],
+              ),
+              const SizedBox(height: 5),
+              Text(comment),
+              const SizedBox(height: 5),
+              Row(
+                mainAxisAlignment: MainAxisAlignment.start,
+                children: [
+                  IconButton(
+                    padding: EdgeInsets.zero,
+                    constraints: const BoxConstraints(),
+                    icon: Stack(
+                      children: [
+                        Icon(
+                          Icons.favorite,
+                          color: isNotLiked ? Colors.transparent : Colors.red,
+                        ),
+                        Icon(
+                          Icons.favorite_border,
+                          color: isNotLiked ? Colors.black : Colors.red,
+                        ),
+                      ],
+                    ),
+                    onPressed: onLikeTapped,
+                  ),
+                  const SizedBox(width: 5),
+                  Text(numLikes.toString()),
+                ],
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}