Team UI🖌️

lib/core/res/colors.dart

@@ -6,6 +6,7 @@ class C {
   /// background color gradient
   static final Color backgroundTop = HexColor("#4F3FA0");
   static final Color backgroundBottom = HexColor("#180C58");
+  static final Color teamsbackground = HexColor("#372981");
 
   /// animated rings colors (1->4 increasingsize)
   static final Color ring1 = HexColor("#2DFFF9");

lib/core/res/strings.dart

@@ -126,6 +126,7 @@ class S {
   static const String phoneURL = "tel:+919406220952";
   static const String emailURL = "mailto:[email protected]";
   static const String assetEventFrame = "assets/event-frame.png";
+  static const String assetTeamsFrame = "assets/team-frame.png";
   static const String asset404Image = "assets/404.png";
 
   // paragraphs

lib/screens/about_us/tabs/team/team.dart

@@ -1,11 +1,17 @@
+import 'package:ecellapp/core/res/colors.dart';
 import 'package:ecellapp/core/res/dimens.dart';
 import 'package:ecellapp/models/team_category.dart';
+import 'package:ecellapp/screens/about_us/tabs/team/widget/teams_card.dart';
+import 'package:ecellapp/widgets/ecell_animation.dart';
 import 'package:ecellapp/widgets/reload_on_error.dart';
+import 'package:ecellapp/widgets/rotated_curveed_tile.dart';
 import 'package:ecellapp/widgets/screen_background.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:ecellapp/widgets/stateful_wrapper.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'package:rxdart/rxdart.dart';
 
 import 'cubit/team_cubit.dart';
 
@@ -25,7 +31,7 @@ class TeamScreen extends StatelessWidget {
           leading: Container(
             padding: EdgeInsets.only(left: D.horizontalPadding - 10, top: 10),
             child: IconButton(
-              icon: Icon(Icons.arrow_back_ios, color: Colors.white, size: 30),
+              icon: Icon(Icons.arrow_back_ios, color: C.teamsbackground, size: 30),
               onPressed: () => Navigator.of(context).pop(),
             ),
           ),
@@ -36,11 +42,11 @@ class TeamScreen extends StatelessWidget {
             BlocBuilder<TeamCubit, TeamState>(
               builder: (context, state) {
                 if (state is TeamInitial)
-                  return _buildLoading();
+                  return _buildLoading(context);
                 else if (state is TeamSuccess)
                   return _buildSuccess(context, state.teamList);
                 else if (state is TeamLoading)
-                  return _buildLoading();
+                  return _buildLoading(context);
                 else
                   return ReloadOnErrorWidget(() => _getAllTeamMembers(context));
               },
@@ -51,25 +57,97 @@ class TeamScreen extends StatelessWidget {
     );
   }
 
-  Widget _buildSuccess(BuildContext context, List<TeamCategory> teamList) {
-    //TODO: UI
-    return Center(
-      child: Column(
-        mainAxisSize: MainAxisSize.min,
-        children: <Widget>[
-          Text(teamList[6].category, textAlign: TextAlign.center),
-          Text(teamList[6].members[0].name, textAlign: TextAlign.center),
-          Text(teamList[1].category, textAlign: TextAlign.center),
-          Text(teamList[1].members[0].name, textAlign: TextAlign.center),
-        ],
+  Widget _buildSuccess(BuildContext context, List<TeamCategory> data) {
+    double top = MediaQuery.of(context).viewPadding.top;
+    ScrollController _scrollController = ScrollController();
+
+    // ignore: close_sinks
+    BehaviorSubject<int> subject = BehaviorSubject.seeded(0);
+
+    return DefaultTextStyle.merge(
+      style: GoogleFonts.roboto().copyWith(color: C.primaryUnHighlightedColor),
+      child: NotificationListener<OverscrollIndicatorNotification>(
+        onNotification: (OverscrollIndicatorNotification overscroll) {
+          overscroll.disallowGlow();
+          return true;
+        },
+        child: Container(
+          color: Colors.white,
+          child: StreamBuilder<int>(
+            initialData: 0,
+            stream: subject.stream,
+            builder: (context, snapshot) {
+              int i = snapshot.data;
+              return Row(
+                children: [
+                  Expanded(
+                    flex: 2,
+                    child: Padding(
+                      padding: const EdgeInsets.only(bottom: 40, top: 80),
+                      child: SingleChildScrollView(
+                        child: Column(
+                          crossAxisAlignment: CrossAxisAlignment.stretch,
+                          mainAxisAlignment: MainAxisAlignment.center,
+                          mainAxisSize: MainAxisSize.max,
+                          children: data.map((spon) {
+                            String tab = spon.category;
+                            return RotatedCurvedTile(
+                              checked: tab == data[i].category,
+                              name: tab,
+                              onTap: () => subject.add(data.indexWhere((e) => e.category == tab)),
+                            );
+                          }).toList(),
+                        ),
+                      ),
+                    ),
+                  ),
+                  Expanded(
+                    flex: 15,
+                    child: ClipRRect(
+                      borderRadius: BorderRadius.only(
+                        bottomLeft: Radius.circular(40),
+                        topLeft: Radius.circular(40),
+                      ),
+                      child: Container(
+                        color: C.sponsorPageBackground,
+                        width: double.infinity,
+                        height: double.infinity,
+                        child: SingleChildScrollView(
+                          controller: _scrollController,
+                          child: Column(
+                            mainAxisSize: MainAxisSize.max,
+                            children: [
+                              SizedBox(height: top + 56),
+                              Text(
+                                "Our Team",
+                                style: TextStyle(
+                                  fontSize: 40,
+                                  color: Colors.white,
+                                  fontWeight: FontWeight.w800,
+                                  letterSpacing: 0.5,
+                                ),
+                              ),
+                              ...data[i].members.map((e) => TeamsCard(teamMember: e)),
+                              //! Fix to avoid non-scrollable state
+                              Container(height: 200)
+                            ],
+                          ),
+                        ),
+                      ),
+                    ),
+                  )
+                ],
+              );
+            },
+          ),
+        ),
       ),
     );
   }
 
-  Widget _buildLoading() {
-    return Center(
-      child: CircularProgressIndicator(),
-    );
+  Widget _buildLoading(BuildContext context) {
+    double width = MediaQuery.of(context).size.width;
+    return Center(child: ECellLogoAnimation(size: width / 2));
   }
 
   void _getAllTeamMembers(BuildContext context) {

lib/screens/about_us/tabs/team/team_repository.dart

@@ -49,7 +49,127 @@ class FakeTeamRepository implements TeamRepository {
             "domain": "tech",
             "linkedin": null,
             "facebook": null
-          }
+          },
+          {
+            "id": 4,
+            "name": "Bowjack",
+            "profile_url":
+                "https://i.pinimg.com/originals/83/f5/88/83f588b8414b1bacfd0ef3027b5aba7f.jpg",
+            "image": null,
+            "member_type": "EXC",
+            "year": 2021,
+            "domain": "tech",
+            "linkedin": "http://linkdin.com/IamBttowski",
+            "facebook": "http://facebook.com/IamBttowski"
+          },
+          {
+            "id": 5,
+            "name": "Agent P",
+            "profile_url":
+                "https://i.pinimg.com/originals/83/f5/88/83f588b8414b1bacfd0ef3027b5aba7f.jpg",
+            "image": null,
+            "member_type": "DIR",
+            "year": 2021,
+            "domain": "tech",
+            "linkedin": "http://linkdin.com/IamBttowski",
+            "facebook": "http://facebook.com/IamBttowski"
+          },
+          {
+            "id": 6,
+            "name": "Jack Sparrow",
+            "profile_url":
+                "https://i.pinimg.com/originals/83/f5/88/83f588b8414b1bacfd0ef3027b5aba7f.jpg",
+            "image": null,
+            "member_type": "FCT",
+            "year": 2021,
+            "domain": "tech",
+            "linkedin": "http://linkdin.com/IamBttowski",
+            "facebook": "http://facebook.com/IamBttowski"
+          },
+          {
+            "id": 7,
+            "name": "Taylor Swift",
+            "profile_url":
+                "https://i.pinimg.com/originals/83/f5/88/83f588b8414b1bacfd0ef3027b5aba7f.jpg",
+            "image": null,
+            "member_type": "HCO",
+            "year": 2021,
+            "domain": "tech",
+            "linkedin": "http://linkdin.com/IamBttowski",
+            "facebook": "http://facebook.com/IamBttowski"
+          },
+          {
+            "id": 8,
+            "name": "Pidgeot",
+            "profile_url":
+                "https://i.pinimg.com/originals/83/f5/88/83f588b8414b1bacfd0ef3027b5aba7f.jpg",
+            "image": null,
+            "member_type": "EXC",
+            "year": 2021,
+            "domain": "tech",
+            "linkedin": "http://linkdin.com/IamBttowski",
+            "facebook": "http://facebook.com/IamBttowski"
+          },
+          {
+            "id": 9,
+            "name": "Dragonite",
+            "profile_url":
+                "https://i.pinimg.com/originals/83/f5/88/83f588b8414b1bacfd0ef3027b5aba7f.jpg",
+            "image": null,
+            "member_type": "DIR",
+            "year": 2021,
+            "domain": "tech",
+            "linkedin": "http://linkdin.com/IamBttowski",
+            "facebook": "http://facebook.com/IamBttowski"
+          },
+          {
+            "id": 10,
+            "name": "Kiterestu",
+            "profile_url":
+                "https://i.pinimg.com/originals/83/f5/88/83f588b8414b1bacfd0ef3027b5aba7f.jpg",
+            "image": null,
+            "member_type": "MNG",
+            "year": 2021,
+            "domain": "tech",
+            "linkedin": "http://linkdin.com/IamBttowski",
+            "facebook": "http://facebook.com/IamBttowski"
+          },
+          {
+            "id": 15,
+            "name": "Kochikame",
+            "profile_url":
+                "https://i.pinimg.com/originals/83/f5/88/83f588b8414b1bacfd0ef3027b5aba7f.jpg",
+            "image": null,
+            "member_type": "MNG",
+            "year": 2021,
+            "domain": "tech",
+            "linkedin": "http://linkdin.com/IamBttowski",
+            "facebook": "http://facebook.com/IamBttowski"
+          },
+          {
+            "id": 11,
+            "name": "Hattori",
+            "profile_url":
+                "https://i.pinimg.com/originals/83/f5/88/83f588b8414b1bacfd0ef3027b5aba7f.jpg",
+            "image": null,
+            "member_type": "OCO",
+            "year": 2021,
+            "domain": "tech",
+            "linkedin": "http://linkdin.com/IamBttowski",
+            "facebook": "http://facebook.com/IamBttowski"
+          },
+          {
+            "id": 1,
+            "name": "Kazama",
+            "profile_url":
+                "https://i.pinimg.com/originals/83/f5/88/83f588b8414b1bacfd0ef3027b5aba7f.jpg",
+            "image": null,
+            "member_type": "EXC",
+            "year": 2021,
+            "domain": "tech",
+            "linkedin": "http://linkdin.com/IamBttowski",
+            "facebook": "http://facebook.com/IamBttowski"
+          },
         ]
       };
 

lib/screens/about_us/tabs/team/widget/teams_card.dart

@@ -0,0 +1,84 @@
+import 'package:ecellapp/models/team.dart';
+import 'package:flutter/material.dart';
+
+import 'package:ecellapp/core/res/colors.dart';
+import 'package:ecellapp/core/res/dimens.dart';
+import 'package:ecellapp/core/res/strings.dart';
+
+class TeamsCard extends StatelessWidget {
+  final TeamMember teamMember;
+
+  const TeamsCard({Key key, this.teamMember}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    double ratio = MediaQuery.of(context).size.aspectRatio;
+    return Stack(
+      children: [
+        Container(
+          margin: const EdgeInsets.symmetric(horizontal: D.horizontalPaddingFrame, vertical: 20),
+          decoration: BoxDecoration(
+            color: Colors.white,
+            borderRadius: BorderRadius.circular(22),
+          ),
+          child: Container(
+            height: ratio > 0.5 ? 140 : 160,
+            margin: EdgeInsets.only(left: 130),
+            decoration: BoxDecoration(
+              color: Colors.white,
+              borderRadius: BorderRadius.circular(22),
+            ),
+            child: Center(
+              child: Text(
+                teamMember.name,
+                style: TextStyle(
+                  fontSize: 20,
+                  color: C.cardFontColor,
+                  fontWeight: FontWeight.w600,
+                ),
+              ),
+            ),
+          ),
+        ),
+        Positioned(
+          height: ratio > 0.5 ? 200 : 220,
+          width: ratio > 0.5 ? 150 : 170,
+          child: Stack(
+            children: [
+              Image.asset(
+                S.assetTeamsFrame,
+                fit: BoxFit.cover,
+                height: 220,
+              ),
+              Center(
+                child: Container(
+                  height: 100,
+                  width: 100,
+                  alignment: Alignment.center,
+                  padding: EdgeInsets.only(bottom: 5),
+                  decoration: BoxDecoration(
+                    shape: BoxShape.circle,
+                    boxShadow: [
+                      BoxShadow(
+                        color: Colors.black.withOpacity(0.25),
+                        offset: Offset(0.0, 5),
+                        blurRadius: 10,
+                      ),
+                    ],
+                  ),
+                  child: CircleAvatar(
+                    backgroundColor: Colors.blue,
+                    backgroundImage: (teamMember.profilePic == null)
+                        ? AssetImage(S.assetEcellLogoWhite)
+                        : NetworkImage(teamMember.profilePic),
+                    radius: 40,
+                  ),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}