From de72d4a5a6b0ce50eab2629a9ae253b04794a735 Mon Sep 17 00:00:00 2001 From: Ryusaki Date: Thu, 22 Sep 2022 19:01:22 +0200 Subject: [PATCH] latest changes --- lib/components/featured_content.dart | 588 +++++++++++++------------- lib/components/recently_released.dart | 131 +++--- lib/pages/home_page.dart | 4 +- lib/pages/search_page.dart | 246 +++++++++-- lib/pages/watch_page.dart | 2 +- 5 files changed, 535 insertions(+), 436 deletions(-) diff --git a/lib/components/featured_content.dart b/lib/components/featured_content.dart index 32bc080..83d797a 100644 --- a/lib/components/featured_content.dart +++ b/lib/components/featured_content.dart @@ -45,14 +45,14 @@ class _FeaturedContentState extends State children: [ Container( width: double.infinity, - height: 440.0, + height: MediaQuery.of(context).size.height * 0.6, child: SizedOverflowBox( size: Size(double.infinity, 440.0), child: Stack( fit: StackFit.expand, children: [ Container( - width: MediaQuery.of(context).size.width * 0.8, + width: MediaQuery.of(context).size.width, child: CarouselSlider( carouselController: _carouselController, items: featuredImages.map((e) { @@ -64,70 +64,237 @@ class _FeaturedContentState extends State child: AnimatedContainer( duration: Duration(milliseconds: 200), width: double.infinity, - height: 500.0, - margin: EdgeInsets.only( - bottom: featuredImages[ - featuredSelectedIndex] == - e - ? 40.0 - : 80.0), + height: + MediaQuery.of(context).size.height * + 0.7, + margin: EdgeInsets.only(bottom: 10.0), decoration: BoxDecoration( - borderRadius: BorderRadius.only( - bottomLeft: Radius.circular(30.0), - bottomRight: Radius.circular(30.0), - ), image: DecorationImage( image: NetworkImage(e), filterQuality: ui.FilterQuality.high, fit: BoxFit.cover, alignment: Alignment.topCenter), - boxShadow: [ - featuredImages[ - featuredSelectedIndex] == - e - ? BoxShadow( - color: ui.Color.fromARGB( - 193, 0, 0, 0), - blurRadius: 30.0) - : BoxShadow() - ], ), - child: AnimatedContainer( - duration: Duration(milliseconds: 200), - width: 140, - height: 240, + child: Container( + height: MediaQuery.of(context) + .size + .height * + 0.7, + width: + MediaQuery.of(context).size.width, decoration: BoxDecoration( gradient: LinearGradient( colors: [ + Colors.transparent, Color(0xff16151A), - Color(0xff16151A) - .withOpacity(0.4), ], begin: Alignment.topCenter, end: Alignment.bottomCenter, + stops: [ + 0.0, + 1.0, + ], ), ), - child: featuredJson[ - featuredSelectedIndex] - ['cover'] == - e - ? Container( - height: 560.0, - width: MediaQuery.of(context) - .size - .width * - 0.8, - child: Stack( - children: [ - Container( - height: 560.0, - width: MediaQuery.of( - context) - .size - .width * - 0.8, - child: Column( + child: Column( + mainAxisAlignment: + MainAxisAlignment.end, + children: [ + Container( + width: MediaQuery.of(context) + .size + .width, + padding: EdgeInsets.symmetric( + horizontal: 20.0, + ), + child: Column( + mainAxisAlignment: + MainAxisAlignment.end, + crossAxisAlignment: + CrossAxisAlignment.start, + children: [ + Text( + featuredJson[featuredSelectedIndex] + ['duration'] + .toString() + + ' min / Episode', + style: TextStyle( + color: Colors.white, + fontSize: 12.0, + fontWeight: + ui.FontWeight.bold, + ), + ), + SizedBox( + height: 4.0, + ), + RichText( + text: TextSpan( + children: [ + TextSpan( + text: 'Episodes: ', + style: TextStyle( + color: + Colors.white, + fontSize: 14.0, + fontWeight: ui + .FontWeight + .bold, + ), + ), + TextSpan( + text: featuredJson[ + featuredSelectedIndex] + [ + 'totalEpisodes'] + .toString(), + style: TextStyle( + color: Color( + 0xffDC1623), + fontSize: 14.0, + fontWeight: ui + .FontWeight + .bold, + ), + ), + TextSpan( + text: ' - Status: ', + style: TextStyle( + color: + Colors.white, + fontSize: 14.0, + fontWeight: ui + .FontWeight + .bold, + ), + ), + TextSpan( + text: + 'CURRENTLY AIRING', + style: TextStyle( + color: Color( + 0xffDC1623), + fontSize: 14.0, + fontWeight: ui + .FontWeight + .bold, + ), + ), + ], + ), + ), + SizedBox( + height: 2.0, + ), + Container( + width: + MediaQuery.of(context) + .size + .width * + 0.8, + child: Text( + featuredJson[ + featuredSelectedIndex] + ['title'] + ['userPreferred'], + maxLines: 3, + style: TextStyle( + color: Colors.white, + fontSize: 24.0, + fontWeight: ui + .FontWeight.bold, + ), + textAlign: + ui.TextAlign.start, + ), + ), + SizedBox( + height: 6.0, + ), + Container( + width: + MediaQuery.of(context) + .size + .width * + 0.8, + child: Text( + featuredJson[ + featuredSelectedIndex] + ['description'] + .toString() + .replaceAll( + '
', '\n'), + maxLines: 10, + style: TextStyle( + color: Colors.white, + fontSize: 12.0, + overflow: TextOverflow + .ellipsis, + fontWeight: ui + .FontWeight.w500, + ), + textAlign: + ui.TextAlign.start, + ), + ), + ], + ), + ), + Container( + padding: EdgeInsets.only( + left: 30.0, + top: 20.0, + right: 30.0, + bottom: 10.0, + ), + child: Row( + mainAxisAlignment: + MainAxisAlignment + .spaceBetween, + crossAxisAlignment: + CrossAxisAlignment.end, + children: [ + GestureDetector( + onTap: () { + Get.to( + () => InfoPage( + anilistID: featuredJson[ + featuredSelectedIndex] + ['id'] + .toString(), + searchedJson: + featuredJson[ + featuredSelectedIndex], + ), + transition: Transition + .rightToLeftWithFade, + curve: Curves.ease, + ); + }, + child: AnimatedContainer( + duration: Duration( + milliseconds: 300), + width: 100.0, + height: 40.0, + decoration: + BoxDecoration( + color: Color( + 0xff1AAEFE), + borderRadius: + BorderRadius + .circular( + 35.0), + boxShadow: + isWatchedHovered + ? [ + BoxShadow( + color: Color(0xff1AAEFE), + blurRadius: 16.0, + ) + ] + : null), + child: Row( mainAxisAlignment: MainAxisAlignment .center, @@ -135,278 +302,90 @@ class _FeaturedContentState extends State CrossAxisAlignment .center, children: [ + Icon( + FontAwesomeIcons + .circleInfo, + color: + Colors.white, + size: 22.0, + ), + SizedBox( + width: 12.0, + ), Text( - featuredJson[featuredSelectedIndex] - [ - 'duration'] - .toString() + - ' min / Episode', + 'INFO', style: TextStyle( color: Colors .white, fontSize: 12.0, fontWeight: ui .FontWeight - .w400, - ), - ), - SizedBox( - height: 12.0, - ), - Container( - width: MediaQuery.of( - context) - .size - .width * - 0.6, - child: Text( - featuredJson[ - featuredSelectedIndex] - [ - 'title'] - [ - 'userPreferred'], - maxLines: 3, - style: - TextStyle( - color: Colors - .white, - fontSize: - 24.0, - fontWeight: ui - .FontWeight - .bold, - ), - textAlign: ui - .TextAlign - .center, - ), - ), - RichText( - text: TextSpan( - children: [ - TextSpan( - text: - 'Episodes: ', - style: - TextStyle( - color: Colors - .white, - fontSize: - 14.0, - fontWeight: ui - .FontWeight - .w500, - ), - ), - TextSpan( - text: featuredJson[featuredSelectedIndex] - [ - 'totalEpisodes'] - .toString(), - style: - TextStyle( - color: Color( - 0xffDC1623), - fontSize: - 14.0, - fontWeight: ui - .FontWeight - .bold, - ), - ), - ], + .bold, ), ), - RichText( - text: TextSpan( - children: [ - TextSpan( - text: - 'Status: ', - style: - TextStyle( - color: Colors - .white, - fontSize: - 14.0, - fontWeight: ui - .FontWeight - .w500, - ), - ), - TextSpan( - text: - 'CURRENTLY AIRING', - style: - TextStyle( - color: Color( - 0xffDC1623), - fontSize: - 14.0, - fontWeight: ui - .FontWeight - .bold, - ), - ), - ])) ], ), ), - Container( - height: 560.0, - padding: EdgeInsets - .symmetric( - horizontal: - 30.0, - vertical: 30.0), + ), + MouseRegion( + onEnter: (e) { + setState(() { + isMyListHovered = + true; + }); + }, + onExit: (e) { + setState(() { + isMyListHovered = + false; + }); + }, + child: AnimatedContainer( + duration: Duration( + milliseconds: 300), + width: 40.0, + height: 40.0, + decoration: + BoxDecoration( + color: Colors + .black, + borderRadius: + BorderRadius + .circular( + 35.0), + boxShadow: + isMyListHovered + ? [ + BoxShadow( + color: Colors.black, + blurRadius: 16.0, + ) + ] + : null), child: Row( mainAxisAlignment: MainAxisAlignment - .spaceBetween, + .center, crossAxisAlignment: CrossAxisAlignment - .end, + .center, children: [ - MouseRegion( - onEnter: (e) { - setState(() { - isMyListHovered = - true; - }); - }, - onExit: (e) { - setState(() { - isMyListHovered = - false; - }); - }, - child: - AnimatedContainer( - duration: Duration( - milliseconds: - 300), - width: 40.0, - height: 40.0, - decoration: - BoxDecoration( - color: Colors - .black, - borderRadius: - BorderRadius.circular(35.0), - boxShadow: isMyListHovered - ? [ - BoxShadow( - color: Colors.black, - blurRadius: 16.0, - ) - ] - : null), - child: Row( - mainAxisAlignment: - MainAxisAlignment - .center, - crossAxisAlignment: - CrossAxisAlignment - .center, - children: [ - Icon( - FontAwesomeIcons - .plus, - color: Colors - .white, - size: - 16.0, - ), - ], - ), - ), - ), - GestureDetector( - onTap: () { - Get.to( - () => - InfoPage( - anilistID: featuredJson[featuredSelectedIndex] - [ - 'id'] - .toString(), - searchedJson: - featuredJson[ - featuredSelectedIndex], - ), - transition: - Transition - .rightToLeftWithFade, - curve: Curves - .ease, - ); - }, - child: - AnimatedContainer( - duration: Duration( - milliseconds: - 300), - width: 100.0, - height: 40.0, - decoration: - BoxDecoration( - color: Color( - 0xff1AAEFE), - borderRadius: - BorderRadius.circular(35.0), - boxShadow: isWatchedHovered - ? [ - BoxShadow( - color: Color(0xff1AAEFE), - blurRadius: 16.0, - ) - ] - : null), - child: Row( - mainAxisAlignment: - MainAxisAlignment - .center, - crossAxisAlignment: - CrossAxisAlignment - .center, - children: [ - Icon( - FontAwesomeIcons - .circleInfo, - color: Colors - .white, - size: - 22.0, - ), - SizedBox( - width: - 12.0, - ), - Text( - 'INFO', - style: - TextStyle( - color: Colors - .white, - fontSize: - 12.0, - fontWeight: ui - .FontWeight - .bold, - ), - ), - ], - ), - ), + Icon( + FontAwesomeIcons + .plus, + color: + Colors.white, + size: 16.0, ), ], ), - ) - ], - ), - ) - : const SizedBox.shrink(), + ), + ), + ], + ), + ) + ], + ), ), ), ), @@ -414,15 +393,14 @@ class _FeaturedContentState extends State ); }).toList(), options: CarouselOptions( - height: 560.0, - enlargeStrategy: - CenterPageEnlargeStrategy.height, + height: + MediaQuery.of(context).size.height * 0.6, + enlargeCenterPage: false, clipBehavior: ui.Clip.antiAlias, - viewportFraction: 0.8, + viewportFraction: 1.0, onPageChanged: (index, reason) { setState(() { featuredSelectedIndex = index; - print(featuredSelectedIndex); }); }, ), diff --git a/lib/components/recently_released.dart b/lib/components/recently_released.dart index ffbfedc..31dce9e 100644 --- a/lib/components/recently_released.dart +++ b/lib/components/recently_released.dart @@ -22,7 +22,7 @@ class _RecentlyReleasedState extends State { @override Widget build(BuildContext context) { return Container( - margin: EdgeInsets.only(left: 40.0), + margin: EdgeInsets.only(left: 30.0), height: 240.0, width: double.infinity, //color: Colors.deepPurple, @@ -34,94 +34,63 @@ class _RecentlyReleasedState extends State { children: [ GestureDetector( onTap: () async { - if (_selectedIndex == index) { - /* Get.to( - () => WatchPage( - episodeID: episodeIDString, - ), - ); */ - } else { - setState(() { - _selectedIndex = index; - }); - } + Get.to( + () => WatchPage( + episodeID: widget.recentJson[index]['id'], + ), + ); }, - child: AnimatedContainer( - duration: Duration(milliseconds: 200), - curve: Curves.ease, - clipBehavior: Clip.antiAlias, - width: _selectedIndex == index ? 160.0 : 110.0, - height: _selectedIndex == index ? 210.0 : 160.0, - decoration: BoxDecoration( - color: Colors.blue, - borderRadius: BorderRadius.circular( - _selectedIndex == index ? 20.0 : 12.0, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + AnimatedContainer( + duration: Duration(milliseconds: 200), + curve: Curves.ease, + clipBehavior: Clip.antiAlias, + width: 140.0, + height: 200.0, + decoration: BoxDecoration( + color: Colors.grey, + borderRadius: BorderRadius.circular( + 20.0, + ), + image: DecorationImage( + fit: BoxFit.cover, + image: + NetworkImage(widget.recentJson[index]['image']), + ), + ), ), - image: DecorationImage( - fit: BoxFit.cover, - image: NetworkImage(widget.recentJson[index]['image']), + SizedBox( + height: 8.0, ), - ), - child: Column( - children: [ - Expanded( - child: Container( - width: double.infinity, - alignment: Alignment.topRight, - decoration: BoxDecoration( - gradient: LinearGradient( - begin: Alignment.topCenter, - end: Alignment.bottomCenter, - colors: [ - Colors.black.withOpacity(0.8), - Colors.transparent, - Colors.transparent, - ], - stops: [ - 0.00, - 0.4, - 1, - ], - ), - ), - child: Padding( - padding: const EdgeInsets.all(8.0), - child: Text( - widget.recentJson[index]['episode'].toString(), - style: TextStyle( - color: Colors.white, - fontSize: 26.0, - fontWeight: FontWeight.bold), - ), - ), + Container( + width: 140.0, + child: Text( + widget.recentJson[index]['title'], + maxLines: 1, + overflow: TextOverflow.ellipsis, + style: TextStyle( + color: Color(0xff999999), + fontSize: 14.0, + fontWeight: FontWeight.w500, ), ), - Container( - height: 50.0, - width: double.infinity, - color: Colors.black, - alignment: Alignment.center, - child: Padding( - padding: - const EdgeInsets.symmetric(horizontal: 8.0), - child: Text( - widget.recentJson[index]['title'], - textAlign: TextAlign.center, - maxLines: 2, - overflow: TextOverflow.ellipsis, - style: TextStyle( - color: Colors.white, - fontWeight: FontWeight.bold, - ), - ), - ), - ) - ], - ), + ), + Text( + 'Episode ' + + widget.recentJson[index]['episode'].toString(), + style: TextStyle( + color: Color(0xff999999), + fontSize: 12.0, + fontWeight: FontWeight.w500, + ), + ), + ], ), ), SizedBox( - width: 12.0, + width: 20.0, ), ], ); diff --git a/lib/pages/home_page.dart b/lib/pages/home_page.dart index 3d71f63..c2861f5 100644 --- a/lib/pages/home_page.dart +++ b/lib/pages/home_page.dart @@ -30,11 +30,11 @@ class _HomePageState extends State with TickerProviderStateMixin { const SliverToBoxAdapter( child: Padding( padding: EdgeInsets.symmetric( - horizontal: 40.0, + horizontal: 30.0, vertical: 20.0, ), child: Text( - 'Recently Released', + 'Recently Added', style: TextStyle( color: Colors.white, fontSize: 22.0, diff --git a/lib/pages/search_page.dart b/lib/pages/search_page.dart index dd810a4..b58d425 100644 --- a/lib/pages/search_page.dart +++ b/lib/pages/search_page.dart @@ -34,16 +34,25 @@ class _SearchPageState extends State { padding: EdgeInsets.only(top: 80.0), child: Container( decoration: BoxDecoration( - color: Colors.black, - borderRadius: BorderRadius.circular(8.0), + color: Color(0xff1F212B), + borderRadius: BorderRadius.circular(10.0), + ), + margin: EdgeInsets.only( + left: 30.0, + right: 30.0, + top: 20.0, ), - margin: EdgeInsets.all(14.0), padding: EdgeInsets.symmetric(horizontal: 20.0), child: TextField( controller: _textEditingController, decoration: InputDecoration( - border: InputBorder.none, - ), + border: InputBorder.none, + hintText: 'Search for an Anime...', + hintStyle: TextStyle( + color: Color(0xff818181), + fontSize: 14.0, + fontWeight: FontWeight.w500, + )), style: TextStyle( color: Colors.white, ), @@ -71,8 +80,9 @@ class _SearchPageState extends State { child: ListView.builder( itemCount: json.length, itemBuilder: ((context, index) { - if (json[index]['status'] != 'Not yet aired' || - json[index]['releaseDate'] != null) { + if (json[index]['status'] != 'Not yet aired' && + json[index]['releaseDate'] != null && + json[index]['cover'] != null) { return Column( children: [ GestureDetector( @@ -108,50 +118,192 @@ class _SearchPageState extends State { SizedBox( width: 12.0, ), - Column( - children: [ - Container( - width: MediaQuery.of(context).size.width - - 40.0 - - 100.0 - - 12.0, - child: Hero( - tag: json[index]['id'].toString() + - json[index]['title']['english'] - .toString(), - child: Text( - json[index]['title']['english'] - .toString(), - style: TextStyle( - color: Colors.white, - fontWeight: FontWeight.bold, - fontSize: 20.0, - ), - maxLines: 1, - overflow: TextOverflow.ellipsis, + Container( + height: 150, + decoration: BoxDecoration( + color: Colors.deepPurple, + borderRadius: BorderRadius.circular(12.0), + ), + clipBehavior: Clip.antiAlias, + child: Stack( + children: [ + Container( + width: + MediaQuery.of(context).size.width - + 40.0 - + 100.0 - + 12.0, + height: 70.0, + decoration: BoxDecoration( + image: DecorationImage( + image: NetworkImage( + json[index]['cover'], + ), + fit: BoxFit.cover), ), ), - ), - SizedBox( - height: 12.0, - ), - Container( - width: MediaQuery.of(context).size.width - - 40.0 - - 100.0 - - 12.0, - child: Text( - json[index]['releaseDate'].toString(), - style: TextStyle( - color: Color(0xff999999), - fontWeight: FontWeight.w400, - fontSize: 16.0, + Container( + decoration: BoxDecoration( + borderRadius: + BorderRadius.circular(12.0), + gradient: LinearGradient( + colors: [ + Colors.transparent, + Colors.black, + Colors.black, + ], + begin: Alignment.topCenter, + end: Alignment.bottomCenter, + stops: [ + 0.0, + 0.5, + 1.0, + ], + ), + ), + padding: const EdgeInsets.all(10.0), + child: Column( + mainAxisAlignment: + MainAxisAlignment.end, + children: [ + Container( + width: MediaQuery.of(context) + .size + .width - + 40.0 - + 100.0 - + 32.0, + child: Hero( + tag: json[index]['id'] + .toString() + + json[index]['title'] + ['english'] + .toString(), + child: Text( + json[index]['title'] + ['english'] ?? + json[index]['title'] + ['romaji'], + style: TextStyle( + color: Colors.white, + fontWeight: FontWeight.bold, + fontSize: 12.0, + ), + maxLines: 1, + overflow: + TextOverflow.ellipsis, + ), + ), + ), + SizedBox( + height: 4.0, + ), + Container( + width: MediaQuery.of(context) + .size + .width - + 40.0 - + 100.0 - + 32.0, + child: Text( + json[index]['description'] + .toString(), + style: TextStyle( + color: Colors.white, + fontWeight: FontWeight.w700, + fontSize: 8.0, + ), + maxLines: 4, + overflow: TextOverflow.ellipsis, + ), + ), + SizedBox( + height: 4.0, + ), + Container( + width: MediaQuery.of(context) + .size + .width - + 40.0 - + 100.0 - + 32.0, + alignment: Alignment.centerRight, + child: Container( + decoration: BoxDecoration( + color: Color(0xff1F212B), + borderRadius: + BorderRadius.circular( + 4.0), + ), + padding: EdgeInsets.symmetric( + horizontal: 14.0, + vertical: 6.0, + ), + child: Text( + json[index]['status'], + style: TextStyle( + color: Colors.white, + fontSize: 8.0, + fontWeight: FontWeight.bold, + ), + ), + ), + ), + ], ), - maxLines: 1, - overflow: TextOverflow.ellipsis, ), - ) - ], + Container( + width: + MediaQuery.of(context).size.width - + 40.0 - + 100.0 - + 12.0, + height: 24.0, + alignment: Alignment.bottomCenter, + child: Row( + mainAxisAlignment: + MainAxisAlignment.spaceBetween, + children: [ + Container( + decoration: BoxDecoration( + color: Colors.black, + borderRadius: + BorderRadius.only( + bottomRight: + Radius.circular( + 20.0))), + padding: EdgeInsets.symmetric( + horizontal: 14.0, + vertical: 6.0, + ), + child: Text( + 'Rating: ' + + (json[index]['rating'] / 10) + .toString() + + ' / 10', + style: TextStyle( + color: Colors.white, + fontSize: 10.0, + ), + ), + ), + Padding( + padding: const EdgeInsets.only( + right: 8.0), + child: Text( + json[index]['totalEpisodes'] + .toString(), + style: TextStyle( + color: Colors.white, + fontWeight: FontWeight.bold, + ), + ), + ), + ], + ), + ) + ], + ), ) ], ), diff --git a/lib/pages/watch_page.dart b/lib/pages/watch_page.dart index 9c91a38..196f14d 100644 --- a/lib/pages/watch_page.dart +++ b/lib/pages/watch_page.dart @@ -192,7 +192,7 @@ class _WatchPageState extends State { episodeJson: jsonDecode(snapshot.data!.body), ), errorBuilder: (context, errorMessage) { - return Center( + return const Center( child: CircularProgressIndicator(), ); },