diff --git a/gdsc_art/images/swirl1.png b/gdsc_art/images/swirl1.png new file mode 100644 index 0000000..0c2cfae Binary files /dev/null and b/gdsc_art/images/swirl1.png differ diff --git a/gdsc_art/images/swirl2.png b/gdsc_art/images/swirl2.png new file mode 100644 index 0000000..14c406f Binary files /dev/null and b/gdsc_art/images/swirl2.png differ diff --git a/gdsc_art/images/swirl3.png b/gdsc_art/images/swirl3.png new file mode 100644 index 0000000..cfc91a1 Binary files /dev/null and b/gdsc_art/images/swirl3.png differ diff --git a/gdsc_art/images/swirl4.png b/gdsc_art/images/swirl4.png new file mode 100644 index 0000000..1d2b495 Binary files /dev/null and b/gdsc_art/images/swirl4.png differ diff --git a/gdsc_art/lib/Model/history_model.dart b/gdsc_art/lib/Model/history_model.dart new file mode 100644 index 0000000..d9f49f6 --- /dev/null +++ b/gdsc_art/lib/Model/history_model.dart @@ -0,0 +1,75 @@ +class HistoryModel { + final String src; + final Artist artist; + final Art art; + final String id; + + HistoryModel({ + required this.src, + required this.artist, + required this.art, + required this.id, + }); + + factory HistoryModel.fromJson(Map json) { + return HistoryModel( + src: json['src'], + artist: Artist.fromJson(json['artist']), + art: Art.fromJson(json['art']), + id: json['_id'], + ); + } + + Map toJson() { + return { + 'src': src, + 'artist': artist.toJson(), + 'art': art.toJson(), + '_id': id, + }; + } +} + +class Artist { + final String name; + final String period; + + Artist({ + required this.name, + required this.period, + }); + + factory Artist.fromJson(Map json) { + return Artist( + name: json['name'], + period: json['period'], + ); + } + + Map toJson() { + return { + 'name': name, + 'period': period, + }; + } +} + +class Art { + final String year; + + Art({ + required this.year, + }); + + factory Art.fromJson(Map json) { + return Art( + year: json['year'], + ); + } + + Map toJson() { + return { + 'year': year, + }; + } +} \ No newline at end of file diff --git a/gdsc_art/lib/Model/theme_model.dart b/gdsc_art/lib/Model/theme_model.dart index 5c518dd..9cadf5d 100644 --- a/gdsc_art/lib/Model/theme_model.dart +++ b/gdsc_art/lib/Model/theme_model.dart @@ -1,3 +1,5 @@ +import 'package:gdsc_artwork/Model/history_model.dart'; + class ThemeModel { final String id; final String title; @@ -8,6 +10,7 @@ class ThemeModel { final String workTitle; final List workImages; final String workDescription; + final List history; ThemeModel({ required this.id, @@ -19,6 +22,7 @@ class ThemeModel { required this.workTitle, required this.workImages, required this.workDescription, + required this.history, }); factory ThemeModel.fromJson(Map json) { @@ -32,6 +36,9 @@ class ThemeModel { workTitle: json['work_title'], workImages: List.from(json['work_images']), workDescription: json['work_description'], + history: (json['history'] as List) + .map((history) => HistoryModel.fromJson(history)) + .toList(), ); } -} \ No newline at end of file +} diff --git a/gdsc_art/lib/Pages/daily_theme.dart b/gdsc_art/lib/Pages/daily_theme.dart index 5d672e1..c9329a8 100644 --- a/gdsc_art/lib/Pages/daily_theme.dart +++ b/gdsc_art/lib/Pages/daily_theme.dart @@ -27,50 +27,66 @@ class _DailyThemeState extends State { @override Widget build(BuildContext context) { - return Scaffold( - backgroundColor: CustomColors.primaryBlack, - body: Consumer( - builder: (context, provider, child) { - if (provider.isLoading) { - return const Center(child: CircularProgressIndicator()); - } + return Container( + decoration: const BoxDecoration( + gradient: LinearGradient( + begin: Alignment.topCenter, + end: Alignment.bottomCenter, + colors: [ + Color(0xFF0D0C0D), + Color(0xFF1A181A), + ], + ), + ), + child: Scaffold( + backgroundColor: Colors.transparent, + body: Consumer( + builder: (context, provider, child) { + if (provider.isLoading) { + return const Center(child: CircularProgressIndicator()); + } - if (provider.hasError) { - return Center( - child: Text( - provider.errorMessage ?? 'Error loading theme', - style: const TextStyle(color: CustomColors.primaryWhite), - ), - ); - } + if (provider.hasError) { + return Center( + child: Text( + provider.errorMessage ?? 'Error loading theme', + style: const TextStyle(color: CustomColors.primaryWhite), + ), + ); + } - final theme = provider.theme; - if (theme == null) return const SizedBox(); + final theme = provider.theme; + if (theme == null) return const SizedBox(); - return SingleChildScrollView( - child: Padding( - padding: const EdgeInsets.all(16.0), + return SingleChildScrollView( child: Column( children: [ - if (!_showLearnMore) ...[ - const Text( - 'THEME OF THE DAY', - style: TextStyle( - color: CustomColors.primaryCream, - fontFamily: "OutfitRegular", - fontSize: 24, - ), - ), - const SizedBox(height: 5.0), - Text( - theme.title, - style: const TextStyle( - color: CustomColors.primaryBrown, - fontFamily: "OutfitRegular", - fontSize: 20, + if (!_showLearnMore) + Padding( + padding: const EdgeInsets.all(16.0), + child: Column( + children: [ + const Text( + 'Theme of the Day', + style: TextStyle( + color: CustomColors.primaryCream, + fontFamily: "OutfitMedium", + fontWeight: FontWeight.w500, + fontSize: 24, + ), + ), + const SizedBox(height: 7.0), + Text( + theme.title.toUpperCase(), + style: const TextStyle( + color: CustomColors.primaryBrown, + fontFamily: "OutfitRegular", + fontSize: 20, + ), + ), + ], ), ), - ], if (_showLearnMore) Row( children: [ @@ -84,7 +100,7 @@ class _DailyThemeState extends State { ), Expanded( child: Text( - theme.title, + theme.title.toUpperCase(), textAlign: TextAlign.center, style: const TextStyle( color: CustomColors.primaryCream, @@ -99,41 +115,241 @@ class _DailyThemeState extends State { const SizedBox(height: 20.0), ThemeCarousel(images: theme.themeImages), const SizedBox(height: 45.0), - InfoBoxWithButtons( - title: theme.title, - description: theme.description, - onUseStyle: () {}, - onLearnMore: () { - setState(() => _showLearnMore = !_showLearnMore); - }, + Padding( + padding: const EdgeInsets.symmetric(horizontal: 18.0), + child: InfoBoxWithButtons( + title: theme.title, + description: theme.description, + onUseStyle: () {}, + onLearnMore: () { + if (theme.history.isNotEmpty) { + setState(() => _showLearnMore = true); + } + }, + showLearnMore: theme.history.isNotEmpty, + ), ), if (_showLearnMore) ...[ const SizedBox(height: 100.0), - LearnMore( - imagePath: theme.workImages.first, - title: theme.workTitle, - description: theme.workDescription, - infoLink: theme.infoLink, + Padding( + padding: const EdgeInsets.symmetric(horizontal: 18.0), + child: LearnMore( + imagePath: theme.workImages.first, + title: theme.workTitle, + description: theme.workDescription, + infoLink: theme.infoLink, + ), + ), + SizedBox(height: 62.0), + Container( + width: double.infinity, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(32), + gradient: LinearGradient( + begin: Alignment.topCenter, + end: Alignment.bottomCenter, + stops: [ + 0.0, + 1.0, + ], + colors: [ + CustomColors.primaryBrown, + CustomColors.secondaryCream + ], + ), + ), + child: Stack( + children: [ + Positioned( + top: 0, + left: 6, + child: Image.asset('images/swirl1.png'), + ), + Positioned( + top: 67, + right: 0, + child: Image.asset('images/swirl2.png'), + ), + Positioned( + left: 0, + top: 396, + child: Image.asset('images/swirl3.png'), + ), + Positioned( + right: 0, + top: 823, + child: Image.asset('images/swirl4.png'), + ), + Align( + alignment: Alignment.topCenter, + child: Column( + children: [ + Padding( + padding: const EdgeInsets.symmetric( + vertical: 24.0), + child: Column( + children: [ + Text( + 'historic pieces of\n${theme.history[0].artist.name}' + .toUpperCase(), + style: const TextStyle( + color: Color(0xff161516), + fontFamily: "OutfitSemiBold", + fontSize: 24, + ), + textAlign: TextAlign.center, + ), + Padding( + padding: EdgeInsets.symmetric( + horizontal: MediaQuery.of(context) + .size + .width * + 0.25), + child: const Divider( + color: Color(0xff161516), + ), + ) + ], + ), + ), + for (var history in theme.history) ...[ + Padding( + padding: const EdgeInsets.symmetric( + horizontal: 12.0), + child: Container( + padding: const EdgeInsets.all(32), + decoration: BoxDecoration( + color: CustomColors.secondaryBlack, + borderRadius: BorderRadius.circular(16), + ), + child: Column( + crossAxisAlignment: + CrossAxisAlignment.start, + children: [ + ClipRRect( + borderRadius: + BorderRadius.circular(18), + child: FadeInImage.assetNetwork( + placeholder: + 'images/sampleLogo.png', + image: '$baseUrl${history.src}', + height: 231, + width: double.infinity, + fit: BoxFit.cover, + imageErrorBuilder: (context, + error, stackTrace) => + Container( + height: 231, + width: double.infinity, + color: Colors.grey[300], + child: const Icon(Icons.error), + ), + ), + ), + Padding( + padding: const EdgeInsets.only( + top: 16, bottom: 12.0), + child: Column( + crossAxisAlignment: + CrossAxisAlignment.start, + mainAxisAlignment: + MainAxisAlignment.start, + children: [ + Text( + history.artist.name + .toUpperCase(), + style: const TextStyle( + fontFamily: 'OutfitRegular', + color: CustomColors + .primaryCream, + fontSize: 16, + ), + ), + Text( + history.artist.period, + style: const TextStyle( + fontFamily: 'OutfitRegular', + color: Colors.white, + fontSize: 12, + ), + ) + ], + ), + ), + RichText( + text: TextSpan( + children: [ + TextSpan( + text: theme.workTitle, + style: const TextStyle( + color: CustomColors + .primaryCream, + fontFamily: 'OutfitMedium', + fontSize: 16, + fontStyle: FontStyle.italic, + decoration: TextDecoration + .underline, + decorationThickness: 2, + ), + ), + TextSpan( + text: ', ${history.art.year}', + style: const TextStyle( + color: CustomColors + .primaryCream, + fontFamily: 'OutfitLight', + fontSize: 16, + fontStyle: FontStyle.italic, + decoration: TextDecoration + .underline, + decorationThickness: 2, + ), + ), + ], + ), + ), + ], + ), + ), + ), + const SizedBox(height: 16.0), + ] + ], + ), + ), + ], + ), ), ], if (!_showLearnMore) ...[ const SizedBox(height: 40.0), - const Text( - "OTHER THEMES", - style: TextStyle( - color: CustomColors.primaryWhite, - fontFamily: "OutfitRegular", - fontSize: 24, + Container( + decoration: BoxDecoration( + color: Color(0xff141414), + borderRadius: BorderRadius.circular(32)), + padding: + EdgeInsets.symmetric(vertical: 32, horizontal: 8), + child: Column( + children: [ + const Text( + "OTHER THEMES", + style: TextStyle( + color: Color(0xffEAD0B3), + fontFamily: "OutfitMedium", + fontSize: 24, + ), + ), + const SizedBox(height: 16.0), + const OtherThemes(), + ], ), ), - const SizedBox(height: 20.0), - const OtherThemes(), ], ], ), - ), - ); - }, + ); + }, + ), ), ); } @@ -244,28 +460,63 @@ class _ThemeCarouselState extends State { }) { return ClipRRect( borderRadius: BorderRadius.circular(18.0), - child: ColorFiltered( - colorFilter: ColorFilter.mode( - Colors.black.withOpacity(0.2), - BlendMode.darken, - ), - child: Opacity( - opacity: opacity, - child: FadeInImage.assetNetwork( - placeholder: 'images/sampleLogo.png', - image: '$baseUrl$imageUrl', - height: height, - width: double.infinity, - fit: BoxFit.cover, - imageErrorBuilder: (context, error, stackTrace) => Container( - height: height, - color: Colors.grey[300], - child: const Icon(Icons.error), + child: Stack( + children: [ + ColorFiltered( + colorFilter: ColorFilter.mode( + Colors.black.withOpacity(0.2), + BlendMode.darken, + ), + child: Opacity( + opacity: opacity, + child: FadeInImage.assetNetwork( + placeholder: 'images/sampleLogo.png', + image: '$baseUrl$imageUrl', + height: height, + width: double.infinity, + fit: BoxFit.cover, + imageErrorBuilder: (context, error, stackTrace) => Container( + height: height, + color: Colors.grey[300], + child: const Icon(Icons.error), + ), + fadeInDuration: const Duration(milliseconds: 300), + placeholderFit: BoxFit.cover, + ), ), - fadeInDuration: const Duration(milliseconds: 300), - placeholderFit: BoxFit.cover, ), - ), + Positioned.fill( + child: Container( + decoration: BoxDecoration( + gradient: LinearGradient( + begin: Alignment.centerLeft, + end: Alignment.centerRight, + colors: [ + Colors.transparent, + Colors.black.withOpacity(0.8), + ], + stops: const [0.8, 1.0], + ), + ), + ), + ), + Positioned.fill( + child: Container( + decoration: BoxDecoration( + gradient: LinearGradient( + begin: const Alignment(-0.5, -0.5), + end: const Alignment(1.0, 1.0), + colors: [ + Colors.transparent, + Colors.transparent, + Colors.black.withOpacity(0.9), + ], + stops: const [0.0, 0.6, 1.0], + ), + ), + ), + ), + ], ), ); } @@ -309,7 +560,7 @@ class _OtherThemesState extends State { itemBuilder: (context, index) { final theme = themes[index]; return Card( - color: Colors.black, + color: Color(0xff141414), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(16.0), ), @@ -322,6 +573,7 @@ class _OtherThemesState extends State { child: ClipRRect( borderRadius: const BorderRadius.vertical( top: Radius.circular(16.0), + bottom: Radius.circular(16), ), child: FadeInImage.assetNetwork( placeholder: 'images/sampleLogo.png', @@ -367,6 +619,7 @@ class InfoBoxWithButtons extends StatelessWidget { final String description; final VoidCallback onUseStyle; final VoidCallback onLearnMore; + final bool showLearnMore; const InfoBoxWithButtons({ super.key, @@ -374,12 +627,13 @@ class InfoBoxWithButtons extends StatelessWidget { required this.description, required this.onUseStyle, required this.onLearnMore, + required this.showLearnMore, }); @override Widget build(BuildContext context) { return Container( - padding: const EdgeInsets.all(14.0), + padding: const EdgeInsets.all(24.0), decoration: BoxDecoration( color: CustomColors.secondaryBlack, borderRadius: BorderRadius.circular(12.0), @@ -387,14 +641,14 @@ class InfoBoxWithButtons extends StatelessWidget { child: Column( children: [ Text( - title, + title.toUpperCase(), style: const TextStyle( color: CustomColors.primaryWhite, fontSize: 19.0, fontFamily: 'OutfitBold', ), ), - const SizedBox(height: 10.0), + const SizedBox(height: 20.0), Text( description, style: const TextStyle( @@ -403,35 +657,49 @@ class InfoBoxWithButtons extends StatelessWidget { fontFamily: 'OutfitRegular', ), ), - const SizedBox(height: 20.0), - Row( - mainAxisAlignment: MainAxisAlignment.spaceEvenly, - children: [ - ElevatedButton( - onPressed: onUseStyle, - style: ElevatedButton.styleFrom( - backgroundColor: CustomColors.primaryCream, - foregroundColor: Colors.black, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(8.0), + if (showLearnMore) ...[ + const SizedBox(height: 20.0), + Row( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + ElevatedButton( + onPressed: onUseStyle, + style: ElevatedButton.styleFrom( + backgroundColor: CustomColors.primaryCream, + foregroundColor: Colors.black, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(8.0), + ), + ), + child: const Text( + 'Use this style', + style: TextStyle( + color: CustomColors.secondaryBlack, + fontFamily: 'OutfitSemiBold', + ), ), ), - child: const Text('Use this style'), - ), - ElevatedButton( - onPressed: onLearnMore, - style: ElevatedButton.styleFrom( - backgroundColor: CustomColors.secondaryBlack, - foregroundColor: CustomColors.primaryCream, - side: const BorderSide(color: CustomColors.primaryCream), - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(8.0), + ElevatedButton( + onPressed: onLearnMore, + style: ElevatedButton.styleFrom( + backgroundColor: CustomColors.secondaryBlack, + foregroundColor: CustomColors.primaryCream, + side: const BorderSide(color: CustomColors.primaryCream), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(8.0), + ), + ), + child: const Text( + 'Learn more', + style: TextStyle( + color: CustomColors.primaryCream, + fontFamily: 'OutfitSemiBold', + ), ), ), - child: const Text('Learn more'), - ), - ], - ), + ], + ), + ] ], ), ); @@ -456,7 +724,7 @@ class LearnMore extends StatelessWidget { Widget build(BuildContext context) { return Container( decoration: BoxDecoration( - color: CustomColors.tertiaryBlack, + color: Colors.transparent, borderRadius: BorderRadius.circular(20.0), ), child: Stack( @@ -466,7 +734,7 @@ class LearnMore extends StatelessWidget { margin: const EdgeInsets.only(top: 200), padding: const EdgeInsets.all(16.0), decoration: const BoxDecoration( - color: CustomColors.tertiaryBlack, + color: CustomColors.secondaryBlack, borderRadius: BorderRadius.all(Radius.circular(20.0)), ), child: Column( @@ -500,21 +768,21 @@ class LearnMore extends StatelessWidget { await launchUrl(Uri.parse(infoLink)); }, style: ElevatedButton.styleFrom( - backgroundColor: CustomColors.primaryCream, - foregroundColor: CustomColors.primaryBlack, + backgroundColor: CustomColors.secondaryBlack, + foregroundColor: CustomColors.primaryCream, + side: const BorderSide(color: CustomColors.primaryCream), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(8.0), - ), - padding: const EdgeInsets.symmetric( - horizontal: 24.0, - vertical: 12.0, + side: BorderSide( + width: 2, + ), ), ), child: const Text( - 'Learn More', + 'Learn more', style: TextStyle( - fontFamily: 'OutfitMedium', - fontSize: 14.0, + color: CustomColors.primaryCream, + fontFamily: 'OutfitSemiBold', ), ), ), @@ -533,7 +801,6 @@ class LearnMore extends StatelessWidget { placeholder: 'images/sampleLogo.png', image: baseUrl! + imagePath, height: 300, - width: double.infinity, fit: BoxFit.cover, imageErrorBuilder: (context, error, stackTrace) => Container( height: 300, diff --git a/gdsc_art/lib/Pages/gallery.dart b/gdsc_art/lib/Pages/gallery.dart index ca921c8..9a438cc 100644 --- a/gdsc_art/lib/Pages/gallery.dart +++ b/gdsc_art/lib/Pages/gallery.dart @@ -144,4 +144,4 @@ class _GalleryState extends State { ), ); } -} +} \ No newline at end of file diff --git a/gdsc_art/lib/Pages/home_content.dart b/gdsc_art/lib/Pages/home_content.dart index f091946..4cfe3d4 100644 --- a/gdsc_art/lib/Pages/home_content.dart +++ b/gdsc_art/lib/Pages/home_content.dart @@ -69,7 +69,7 @@ class _HomeContentState extends State { 'Discover', style: TextStyle( color: CustomColors.secondaryCream, - fontSize: 28.0, + fontSize: 24.0, fontFamily: 'OutfitMedium', ), ), @@ -77,7 +77,7 @@ class _HomeContentState extends State { Text('art styles.', style: TextStyle( color: CustomColors.primaryWhite, - fontSize: 28.0, + fontSize: 24.0, fontFamily: 'OutfitMedium', )), ], @@ -90,7 +90,7 @@ class _HomeContentState extends State { 'Stylize', style: TextStyle( color: CustomColors.primaryBrown, - fontSize: 28.0, + fontSize: 24.0, fontFamily: 'OutfitMedium', ), ), @@ -98,7 +98,7 @@ class _HomeContentState extends State { Text('images.', style: TextStyle( color: CustomColors.primaryWhite, - fontSize: 28.0, + fontSize: 24.0, fontFamily: 'OutfitMedium', )), ], @@ -149,33 +149,41 @@ class _HomeContentState extends State { mainAxisAlignment: MainAxisAlignment.center, children: [ Expanded( - child: Container( - height: 2.0, - color: CustomColors.primaryBrown, - margin: const EdgeInsets.only(left: 50.0), + child: Padding( + padding: EdgeInsets.only( + left: MediaQuery.of(context).size.width * 0.2, + top: 4), + child: Divider( + color: CustomColors.primaryWhite, + thickness: 1.0, + ), ), ), - Container( + Padding( padding: const EdgeInsets.symmetric(horizontal: 10.0), - child: const Text( + child: Text( 'or', style: TextStyle( - color: CustomColors.primaryBrown, + color: CustomColors.primaryWhite, fontSize: 18.0, fontFamily: 'OutfitMedium', ), ), ), Expanded( - child: Container( - height: 2.0, - color: CustomColors.primaryBrown, - margin: const EdgeInsets.only(right: 50.0), + child: Padding( + padding: EdgeInsets.only( + right: MediaQuery.of(context).size.width * 0.2, + top: 4), + child: Divider( + color: CustomColors.primaryWhite, + thickness: 1.0, + ), ), ), ], ), - const SizedBox(height: 5), + const SizedBox(height: 8), ElevatedButton( onPressed: () { Navigator.push( @@ -192,16 +200,23 @@ class _HomeContentState extends State { backgroundColor: CustomColors.primaryCream, foregroundColor: Colors.black, shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(8.0), + borderRadius: BorderRadius.circular(10.0), ), padding: const EdgeInsets.symmetric( - horizontal: 25.0, vertical: 10.0), + horizontal: 32.0, vertical: 8.0), textStyle: const TextStyle( fontSize: 16.0, fontFamily: "OutfitMedium", ), ), - child: const Text('Create Your Own Style'), + child: const Text( + 'Create your own style', + style: TextStyle( + fontSize: 16, + fontFamily: 'OutfitSemiBold', + color: CustomColors.primaryBlack, + ), + ), ), ], ), @@ -215,89 +230,97 @@ class _HomeContentState extends State { Widget buildImageSlider(List> themeData) { return carousel.CarouselSlider.builder( options: carousel.CarouselOptions( - autoPlay: false, - viewportFraction: 0.65, - enableInfiniteScroll: true, - disableCenter: true, - onPageChanged: (index, reason) { - setState(() { - currentImageIndex = index; - }); - }, - enlargeCenterPage: true), + autoPlay: false, + viewportFraction: 0.6, + enableInfiniteScroll: true, + disableCenter: true, + onPageChanged: (index, reason) { + setState(() { + currentImageIndex = index; + }); + }, + enlargeCenterPage: true, + enlargeFactor: 0.35, + ), itemCount: themeData.length, itemBuilder: (context, index, realIndex) { final theme = themeData[index]; - return Container( - height: 350, - margin: const EdgeInsets.symmetric(horizontal: 5.0), - decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.circular(20.0), - ), - child: Column( - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - ClipRRect( - borderRadius: const BorderRadius.only( - topLeft: Radius.circular(20.0), - topRight: Radius.circular(20.0), - ), - child: theme['image']!.startsWith('http') - ? Image.network( - theme['image']!, - fit: BoxFit.cover, - height: 180.0, - width: double.infinity, - errorBuilder: (_, __, ___) => Image.asset( - StaticThemeData.defaultThemes[index]['image']!, + final isCurrent = index == currentImageIndex; + + return AnimatedOpacity( + duration: const Duration(milliseconds: 300), + opacity: isCurrent ? 1.0 : 0.25, + child: Container( + height: 350, + margin: const EdgeInsets.symmetric(horizontal: 2.0), + decoration: BoxDecoration( + color: Colors.transparent, + borderRadius: BorderRadius.circular(20.0), + ), + child: Column( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + ClipRRect( + borderRadius: const BorderRadius.only( + topLeft: Radius.circular(20.0), + topRight: Radius.circular(20.0), + ), + child: theme['image']!.startsWith('http') + ? Image.network( + theme['image']!, + fit: BoxFit.cover, + height: 180.0, + width: double.infinity, + errorBuilder: (_, __, ___) => Image.asset( + StaticThemeData.defaultThemes[index]['image']!, + fit: BoxFit.cover, + height: 180.0, + width: double.infinity, + ), + ) + : Image.asset( + theme['image']!, fit: BoxFit.cover, height: 180.0, width: double.infinity, ), - ) - : Image.asset( - theme['image']!, - fit: BoxFit.cover, - height: 180.0, - width: double.infinity, - ), - ), - Container( - padding: const EdgeInsets.all(12.0), - width: double.infinity, - decoration: const BoxDecoration( - color: Color(0xFF222122), - borderRadius: BorderRadius.only( - bottomLeft: Radius.circular(20.0), - bottomRight: Radius.circular(20.0), - ), ), - child: Column( - children: [ - Text( - theme['title'] ?? '', - style: const TextStyle( - color: CustomColors.secondaryBrown, - fontSize: 16.0, - fontFamily: "OutfitMedium", - ), - textAlign: TextAlign.center, + Container( + padding: const EdgeInsets.all(12.0), + width: double.infinity, + decoration: const BoxDecoration( + color: Color(0xFF222122), + borderRadius: BorderRadius.only( + bottomLeft: Radius.circular(20.0), + bottomRight: Radius.circular(20.0), ), - const SizedBox(height: 4.0), - Text( - 'Tap to learn more', - style: const TextStyle( - color: Colors.white, - fontFamily: "OutfitRegular", - fontSize: 12.0, + ), + child: Column( + children: [ + Text( + (theme['title'] ?? '').toUpperCase(), + style: const TextStyle( + color: CustomColors.secondaryBrown, + fontSize: 12, + fontFamily: "OutfitMedium", + ), + textAlign: TextAlign.center, ), - textAlign: TextAlign.center, - ), - ], + const SizedBox(height: 4.0), + Text( + 'Tap to learn more', + style: const TextStyle( + color: Colors.white, + fontFamily: "OutfitRegular", + fontSize: 12.0, + ), + textAlign: TextAlign.center, + ), + ], + ), ), - ), - ], + ], + ), ), ); }, diff --git a/gdsc_art/lib/UIComponents/app_bar.dart b/gdsc_art/lib/UIComponents/app_bar.dart index 90ced22..7bd19e6 100644 --- a/gdsc_art/lib/UIComponents/app_bar.dart +++ b/gdsc_art/lib/UIComponents/app_bar.dart @@ -9,27 +9,47 @@ class CustomAppBar extends StatelessWidget implements PreferredSizeWidget { @override Widget build(BuildContext context) { - return AppBar( - backgroundColor: CustomColors.primaryBlack, - elevation: 0, - centerTitle: isCentered, - title: Text( - title, - style: const TextStyle( - color: Colors.white, - fontSize: 24.0, - fontFamily: 'OutfitMedium', - ), + return Container( + decoration: BoxDecoration( + color: CustomColors.primaryBlack, + boxShadow: [ + BoxShadow( + color: Colors.black.withOpacity(0.1), + spreadRadius: 0, + blurRadius: 4, + offset: const Offset(0, 2), + ), + ], ), - leading: Builder( - builder: (BuildContext context) { - return IconButton( - icon: const Icon(Icons.menu, color: CustomColors.primaryWhite), - onPressed: () { - Scaffold.of(context).openDrawer(); - }, - ); - }, + child: AppBar( + surfaceTintColor: Colors.transparent, + backgroundColor: Color(0xff141414), + elevation: 0, + centerTitle: isCentered, + title: Text( + title, + style: const TextStyle( + color: Colors.white, + fontSize: 24.0, + fontFamily: 'OutfitMedium', + ), + ), + shape: const RoundedRectangleBorder( + borderRadius: BorderRadius.only( + bottomLeft: Radius.circular(16), + bottomRight: Radius.circular(16), + ), + ), + leading: Builder( + builder: (BuildContext context) { + return IconButton( + icon: const Icon(Icons.menu, color: CustomColors.primaryWhite), + onPressed: () { + Scaffold.of(context).openDrawer(); + }, + ); + }, + ), ), ); } diff --git a/gdsc_art/lib/UIComponents/art_style_info_box.dart b/gdsc_art/lib/UIComponents/art_style_info_box.dart index ebaa74d..0ddb875 100644 --- a/gdsc_art/lib/UIComponents/art_style_info_box.dart +++ b/gdsc_art/lib/UIComponents/art_style_info_box.dart @@ -16,8 +16,9 @@ class ArtStyleInfoBox extends StatelessWidget { @override Widget build(BuildContext context) { return Container( - margin: const EdgeInsets.only(left: 20, right: 20, top: 10, bottom: 2), - padding: const EdgeInsets.all(14.0), + margin: const EdgeInsets.only(left: 32, right: 32, top: 32), + padding: + const EdgeInsets.only(left: 24.0, right: 24, top: 12, bottom: 24), decoration: BoxDecoration( color: CustomColors.secondaryBlack, borderRadius: BorderRadius.circular(12.0), @@ -26,19 +27,20 @@ class ArtStyleInfoBox extends StatelessWidget { mainAxisAlignment: MainAxisAlignment.center, children: [ Text( - title, + title.toUpperCase(), style: const TextStyle( - color: CustomColors.secondaryCream, + color: CustomColors.primaryWhite, fontSize: 19.0, fontFamily: 'OutfitMedium', ), ), const SizedBox(height: 4.0), Container( - height: 2.0, - color: CustomColors.primaryBrown, + height: 1.0, + color: CustomColors.primaryWhite.withOpacity(0.5), margin: const EdgeInsets.symmetric(vertical: 8.0), ), + const SizedBox(height: 4.0), Text( textAlign: TextAlign.left, description, @@ -66,7 +68,14 @@ class ArtStyleInfoBox extends StatelessWidget { fontWeight: FontWeight.bold, ), ), - child: const Text('Use this style'), + child: const Text( + 'Use this style', + style: TextStyle( + fontSize: 16, + fontFamily: 'OutfitSemiBold', + color: CustomColors.primaryWhite, + ), + ), ), ], ), diff --git a/gdsc_art/lib/UIComponents/dynamic_aspect_ratio_image.dart b/gdsc_art/lib/UIComponents/dynamic_aspect_ratio_image.dart index ed9e48f..274d6ff 100644 --- a/gdsc_art/lib/UIComponents/dynamic_aspect_ratio_image.dart +++ b/gdsc_art/lib/UIComponents/dynamic_aspect_ratio_image.dart @@ -82,9 +82,12 @@ class _DynamicAspectRatioImageState extends State { ), ), ) - : Image.network( - widget.imageUrl, - fit: BoxFit.cover, + : ClipRRect( + borderRadius: BorderRadius.circular(6), + child: Image.network( + widget.imageUrl, + fit: BoxFit.cover, + ), ), ); } diff --git a/gdsc_art/lib/home.dart b/gdsc_art/lib/home.dart index dadc262..60f1782 100644 --- a/gdsc_art/lib/home.dart +++ b/gdsc_art/lib/home.dart @@ -27,7 +27,7 @@ class _HomeState extends State { ]; final List _titles = [ - 'ART Gallery', + 'Art Gallery', 'Themes', 'About Us', 'Gallery', diff --git a/gdsc_art/pubspec.yaml b/gdsc_art/pubspec.yaml index d4538d2..7bd9c49 100644 --- a/gdsc_art/pubspec.yaml +++ b/gdsc_art/pubspec.yaml @@ -114,6 +114,9 @@ flutter: - family: OutfitLight fonts: - asset: fonts/Outfit-Light.ttf + - family: OutfitRegular + fonts: + - asset: fonts/OutfitRegular.ttf # - family: Trajan Pro