diff --git a/assets/team-frame.png b/assets/team-frame.png new file mode 100644 index 0000000..c7aed50 Binary files /dev/null and b/assets/team-frame.png differ diff --git a/lib/core/res/colors.dart b/lib/core/res/colors.dart index 689c761..dcf1134 100644 --- a/lib/core/res/colors.dart +++ b/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"); diff --git a/lib/core/res/strings.dart b/lib/core/res/strings.dart index 9b59e3e..0b72f8e 100644 --- a/lib/core/res/strings.dart +++ b/lib/core/res/strings.dart @@ -126,6 +126,7 @@ class S { static const String phoneURL = "tel:+919406220952"; static const String emailURL = "mailto:ecell@nitrr.ac.in"; static const String assetEventFrame = "assets/event-frame.png"; + static const String assetTeamsFrame = "assets/team-frame.png"; static const String asset404Image = "assets/404.png"; // paragraphs diff --git a/lib/screens/about_us/about_us.dart b/lib/screens/about_us/about_us.dart index ff908b3..ac751dd 100644 --- a/lib/screens/about_us/about_us.dart +++ b/lib/screens/about_us/about_us.dart @@ -33,7 +33,7 @@ class _AboutUsScreenState extends State { return ClipRRect( borderRadius: BorderRadius.all(Radius.circular(40)), child: Container( - height: height / 8, + height: height / 10, child: BottomNavigationBar( selectedItemColor: Colors.orange[900], unselectedFontSize: 40, @@ -48,7 +48,7 @@ class _AboutUsScreenState extends State { items: [ BottomNavigationBarItem( activeIcon: Container( - height: 50, + height: 40, decoration: BoxDecoration( shape: BoxShape.circle, gradient: LinearGradient(colors: [ @@ -66,13 +66,13 @@ class _AboutUsScreenState extends State { ), icon: Image.asset( S.assetAIMIcon, - height: 25, + height: 20, ), label: "Aim", ), BottomNavigationBarItem( activeIcon: Container( - height: 50, + height: 40, decoration: BoxDecoration( shape: BoxShape.circle, gradient: LinearGradient(colors: [ @@ -82,13 +82,13 @@ class _AboutUsScreenState extends State { ], begin: Alignment.topLeft, end: Alignment.bottomRight)), child: Image.asset( S.assetTeamIcon, - height: 25, + height: 20, color: Colors.white, ), ), icon: Image.asset( S.assetTeamIcon, - height: 25, + height: 20, ), label: 'Team', ), diff --git a/lib/screens/about_us/tabs/team/team.dart b/lib/screens/about_us/tabs/team/team.dart index 1f02666..799f1dc 100644 --- a/lib/screens/about_us/tabs/team/team.dart +++ b/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_curved_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( 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,105 @@ class TeamScreen extends StatelessWidget { ); } - Widget _buildSuccess(BuildContext context, List teamList) { - //TODO: UI - return Center( - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - 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 data) { + double top = MediaQuery.of(context).viewPadding.top; + ScrollController _scrollController = ScrollController(); + + // ignore: close_sinks + BehaviorSubject subject = BehaviorSubject.seeded(0); + + return DefaultTextStyle.merge( + style: GoogleFonts.roboto().copyWith(color: C.primaryUnHighlightedColor), + child: NotificationListener( + onNotification: (OverscrollIndicatorNotification overscroll) { + overscroll.disallowGlow(); + return true; + }, + child: Container( + color: Colors.white, + child: StreamBuilder( + 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: 80, top: 120), + 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() + .sublist(0, 7), + ), + ), + ), + ), + 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: Padding( + padding: const EdgeInsets.symmetric(horizontal: 20), + 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, + ), + ), + SizedBox(height: 20), + ...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) { diff --git a/lib/screens/about_us/tabs/team/team_repository.dart b/lib/screens/about_us/tabs/team/team_repository.dart index 6a76098..4f1d9f5 100644 --- a/lib/screens/about_us/tabs/team/team_repository.dart +++ b/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" + }, ] }; diff --git a/lib/screens/about_us/tabs/team/widget/teams_card.dart b/lib/screens/about_us/tabs/team/widget/teams_card.dart new file mode 100644 index 0000000..812ea41 --- /dev/null +++ b/lib/screens/about_us/tabs/team/widget/teams_card.dart @@ -0,0 +1,85 @@ +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 ? 120 : 140, + 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 ? 140 : 160, + child: Stack( + children: [ + Image.asset( + S.assetTeamsFrame, + fit: BoxFit.cover, + height: 180, + ), + Center( + heightFactor: 1.75, + 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: 35, + ), + ), + ), + ], + ), + ), + ], + ); + } +} diff --git a/lib/screens/sponsors/sponsors.dart b/lib/screens/sponsors/sponsors.dart index e6b5b3f..65ff9b7 100644 --- a/lib/screens/sponsors/sponsors.dart +++ b/lib/screens/sponsors/sponsors.dart @@ -5,7 +5,7 @@ import 'package:ecellapp/widgets/ecell_animation.dart'; import 'package:ecellapp/widgets/reload_on_error.dart'; import 'package:ecellapp/widgets/screen_background.dart'; import 'package:ecellapp/widgets/stateful_wrapper.dart'; -import 'package:ecellapp/widgets/rotated_curveed_tile.dart'; +import 'package:ecellapp/widgets/rotated_curved_tile.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:google_fonts/google_fonts.dart'; diff --git a/lib/widgets/rotated_curveed_tile.dart b/lib/widgets/rotated_curved_tile.dart similarity index 89% rename from lib/widgets/rotated_curveed_tile.dart rename to lib/widgets/rotated_curved_tile.dart index 1a50860..cd9e68c 100644 --- a/lib/widgets/rotated_curveed_tile.dart +++ b/lib/widgets/rotated_curved_tile.dart @@ -14,10 +14,14 @@ class RotatedCurvedTile extends StatelessWidget { color: checked ? HexColor("#372981") : Colors.white, margin: EdgeInsets.zero, alignment: Alignment.center, - padding: const EdgeInsets.symmetric(horizontal: 30.0), + width: 140, + padding: const EdgeInsets.symmetric(horizontal: 10.0), child: Text( name, - style: TextStyle(color: checked ? Colors.white : Colors.purple, fontSize: 20), + textAlign: TextAlign.center, + maxLines: 2, + style: TextStyle( + letterSpacing: -0.5, color: checked ? Colors.white : Colors.purple, fontSize: 14), ), ); if (checked) {