From 28b5410b7ab895caceebe6618e8e538488026bdb Mon Sep 17 00:00:00 2001 From: Saumya-28 Date: Fri, 24 May 2024 11:25:55 +0530 Subject: [PATCH] Improved UI for Google Season of Docs Screen --- lib/widgets/gsod/gsod_project_widget_new.dart | 198 +++++++-------- lib/widgets/gsod/gsod_project_widget_old.dart | 234 ++++++++---------- 2 files changed, 188 insertions(+), 244 deletions(-) diff --git a/lib/widgets/gsod/gsod_project_widget_new.dart b/lib/widgets/gsod/gsod_project_widget_new.dart index 7290964..67d51f2 100644 --- a/lib/widgets/gsod/gsod_project_widget_new.dart +++ b/lib/widgets/gsod/gsod_project_widget_new.dart @@ -1,14 +1,18 @@ -import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; -import 'package:flutter/widgets.dart'; import 'package:opso/modals/gsod/gsod_modal_new.dart'; import 'package:url_launcher/url_launcher.dart'; + class GsodProjectWidgetNew extends StatelessWidget { final GsodModalNew modal; final double height; final double width; final int index; final Color primaryColor; + final Color secondaryColor = Colors.white; + final Color tertiaryColor = Colors.black87; + final Color linkColor = const Color(0xff0000FF); + final Color linkColorDark = const Color(0xff3f84e4); + const GsodProjectWidgetNew({ super.key, this.height = 100, @@ -17,157 +21,133 @@ class GsodProjectWidgetNew extends StatelessWidget { required this.modal, this.primaryColor = const Color.fromRGBO(249, 171, 0, 1), }); + + Future _launchUrl(String url) async { + final Uri uri = Uri.parse(url); + if (!await launchUrl(uri)) { + throw 'Could not launch $url'; + } + } + @override Widget build(BuildContext context) { - bool isDarkMode = Theme.of(context).brightness == Brightness.dark; + final isDarkMode = Theme.of(context).brightness == Brightness.dark; + final textColor = isDarkMode ? Colors.white : Colors.black; + final cardColor = isDarkMode ? Colors.grey.shade800 : Colors.white; + final linkColor = isDarkMode ? Colors.white : primaryColor; + return Container( - constraints: BoxConstraints( - minHeight: height, - ), width: width, + constraints: BoxConstraints(minHeight: height), decoration: BoxDecoration( - color: primaryColor.withOpacity(0.05), border: Border.all( color: isDarkMode ? Colors.orange.shade100 : Colors.orange.shade300, width: 1, ), borderRadius: BorderRadius.circular(20), + color: cardColor, ), child: Padding( - padding: const EdgeInsets.all(8.0), + padding: const EdgeInsets.all(15.0), child: Column( - mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start, children: [ - const SizedBox( - height: 10, - ), GestureDetector( + onTap: () { + _launchUrl(modal.organizationUrl); + }, child: Text( modal.organizationName, style: TextStyle( - decoration: TextDecoration.underline, decorationColor: primaryColor, color: primaryColor, fontSize: 20, fontWeight: FontWeight.bold, ), ), - onTap: () { - launchUrl(Uri.parse(modal.organizationUrl)); - }, ), - const SizedBox( - height: 10, + const SizedBox(height: 10), + _buildLinkTile( + context, + title: 'Docs Page', + value: modal.docsPage, + url: modal.docsPageUrl, + isDarkMode: isDarkMode, ), - GestureDetector( - child: Wrap( - children: [ - const Text( - "Docs Page : ", - style: TextStyle( - color: Colors.deepPurple, - fontWeight: FontWeight.bold, - ), - ), - Text( - modal.docsPage, - style: TextStyle( - decoration: TextDecoration.underline, - decorationColor: primaryColor, - color: primaryColor, - ), - ), - ], - ), - onTap: () { - launchUrl(Uri.parse(modal.docsPageUrl)); - }, + const SizedBox(height: 10), + _buildLinkTile( + context, + title: 'Budget', + value: modal.budget, + url: modal.budgetUrl, + isDarkMode: isDarkMode, ), - const SizedBox( - height: 10, + const SizedBox(height: 10), + _buildLinkTile( + context, + title: 'Accepted Proposal', + value: modal.acceptedProjectProposal, + url: modal.acceptedProjectProposalUrl, + isDarkMode: isDarkMode, ), - GestureDetector( - child: Wrap( - children: [ - const Text( - "Budget : ", - style: TextStyle( - color: Colors.deepPurple, - fontWeight: FontWeight.bold, - ), - ), - Text( - modal.budget, - style: TextStyle( - decoration: TextDecoration.underline, - decorationColor: primaryColor, - color: primaryColor, - ), - ), - ], - ), - onTap: () { - launchUrl(Uri.parse(modal.budgetUrl)); - }, - ), - const SizedBox( - height: 10, + const SizedBox(height: 10), + _buildLinkTile( + context, + title: 'Case Study', + value: modal.caseStudy, + url: modal.caseStudyUrl, + isDarkMode: isDarkMode, ), - GestureDetector( - child: Wrap( + ], + ), + ), + ); + } + + Widget _buildLinkTile(BuildContext context, {required String title, required String value, required String url, required bool isDarkMode}) { + return GestureDetector( + onTap: () { + _launchUrl(url); + }, + child: MouseRegion( + cursor: SystemMouseCursors.click, + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, children: [ - const Text( - "Accecpted Proposal : ", - style: TextStyle( - color: Colors.deepPurple, - fontWeight: FontWeight.bold, - ), - ), Text( - modal.acceptedProjectProposal, + title, style: TextStyle( - decoration: TextDecoration.underline, - decorationColor: primaryColor, - color: primaryColor, - ), - ), - ], - ), - onTap: () { - launchUrl(Uri.parse(modal.acceptedProjectProposalUrl)); - }, - ), - const SizedBox( - height: 10, - ), - GestureDetector( - child: Wrap( - children: [ - const Text( - "Case Study: ", - style: TextStyle( - color: Colors.deepPurple, - fontWeight: FontWeight.bold, + color: Colors.grey, + fontSize: 14, + fontWeight: FontWeight.normal, ), ), Text( - modal.caseStudy, + value, + maxLines: 1, // Limiting to one line + overflow: TextOverflow.ellipsis, // Adding ellipsis if text overflows style: TextStyle( - decoration: TextDecoration.underline, - decorationColor: primaryColor, - color: primaryColor, + color: isDarkMode ? secondaryColor : tertiaryColor, + fontSize: 16, + decoration: TextDecoration.none, // Removing underline ), ), ], ), - onTap: () { - launchUrl(Uri.parse(modal.caseStudyUrl)); - }, + ), + Icon( + Icons.link, + color: isDarkMode ? linkColorDark : linkColor, + size: 16, ), ], ), ), ); } -} + +} \ No newline at end of file diff --git a/lib/widgets/gsod/gsod_project_widget_old.dart b/lib/widgets/gsod/gsod_project_widget_old.dart index 2e65efb..f869d36 100644 --- a/lib/widgets/gsod/gsod_project_widget_old.dart +++ b/lib/widgets/gsod/gsod_project_widget_old.dart @@ -1,199 +1,163 @@ import 'package:flutter/material.dart'; -import 'package:opso/modals/gsod/gsod_modal_old.dart'; import 'package:url_launcher/url_launcher.dart'; +import '../../modals/gsod/gsod_modal_old.dart'; + class GsodProjectWidgetOld extends StatelessWidget { final GsodModalOld modal; final double height; final double width; final int index; final Color primaryColor; + final Color linkColor = const Color(0xff0000FF); + final Color linkColorDark = const Color(0xff3f84e4); + const GsodProjectWidgetOld({ - super.key, + Key? key, this.height = 100, this.width = 100, required this.index, required this.modal, this.primaryColor = const Color.fromRGBO(249, 171, 0, 1), - }); - /* - String organization; - String organizationUrl; - String technicalWriter; - String mentor; - String project; - String projectUrl; - String report; - String reportUrl; - String originalProjectProposal; - String originalProjectProposalUrl; - */ + }) : super(key: key); + + Future _launchUrl(String url) async { + final Uri uri = Uri.parse(url); + if (!await canLaunch(uri.toString())) { + throw 'Could not launch $url'; + } + await launch(uri.toString()); + } + @override Widget build(BuildContext context) { - bool isDarkMode = Theme.of(context).brightness == Brightness.dark; + final isDarkMode = Theme.of(context).brightness == Brightness.dark; + final textColor = isDarkMode ? Colors.white : Colors.black; + final cardColor = isDarkMode ? Colors.grey.shade800 : Colors.white; + final linkColor = isDarkMode ? Colors.white : primaryColor; + return Container( - constraints: BoxConstraints( - minHeight: height, - ), width: width, + constraints: BoxConstraints(minHeight: height), decoration: BoxDecoration( - color: primaryColor.withOpacity(0.05), border: Border.all( color: isDarkMode ? Colors.orange.shade100 : Colors.orange.shade300, width: 1, ), borderRadius: BorderRadius.circular(20), + color: cardColor, ), child: Padding( - padding: const EdgeInsets.all(8.0), + padding: const EdgeInsets.all(15.0), child: Column( - mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start, children: [ - const SizedBox( - height: 10, - ), GestureDetector( + onTap: () { + _launchUrl(modal.organizationUrl); + }, child: Text( modal.organization, style: TextStyle( - decoration: TextDecoration.underline, decorationColor: primaryColor, color: primaryColor, fontSize: 20, fontWeight: FontWeight.bold, ), ), - onTap: () { - launchUrl(Uri.parse(modal.organizationUrl)); - }, ), - const SizedBox( - height: 10, + const SizedBox(height: 10), + _buildLinkTile( + context, + title: 'Technical Writer', + value: modal.technicalWriter, + url: '', // You didn't provide a URL for technical writer + isDarkMode: isDarkMode, ), - Wrap( - children: [ - const Text( - "Technical Writer: ", - style: TextStyle( - color: Colors.deepPurple, - fontWeight: FontWeight.bold, - ), - ), - Text( - modal.technicalWriter, - style: TextStyle( - decorationColor: primaryColor, - color: primaryColor, - ), - ), - ], + const SizedBox(height: 10), + _buildLinkTile( + context, + title: 'Mentor', + value: modal.mentor, + url: '', // You didn't provide a URL for mentor + isDarkMode: isDarkMode, ), - const SizedBox( - height: 10, + const SizedBox(height: 10), + _buildLinkTile( + context, + title: 'Project', + value: modal.project, + url: modal.projectUrl, + isDarkMode: isDarkMode, ), - Wrap( - children: [ - const Text( - "Mentor : ", - style: TextStyle( - color: Colors.deepPurple, - fontWeight: FontWeight.bold, - ), - ), - Text( - modal.mentor, - style: TextStyle( - decorationColor: primaryColor, - color: primaryColor, - ), - ), - ], + const SizedBox(height: 10), + _buildLinkTile( + context, + title: 'Report', + value: modal.report, + url: modal.reportUrl, + isDarkMode: isDarkMode, ), - const SizedBox( - height: 10, + const SizedBox(height: 10), + _buildLinkTile( + context, + title: 'Original Project Proposal', + value: modal.originalProjectProposal, + url: modal.originalProjectProposalUrl, + isDarkMode: isDarkMode, ), - GestureDetector( - child: Wrap( + ], + ), + ), + ); + } + + Widget _buildLinkTile(BuildContext context, {required String title, required String value, required String url, required bool isDarkMode}) { + return GestureDetector( + onTap: () { + if (url.isNotEmpty) { + _launchUrl(url); + } + }, + child: MouseRegion( + cursor: SystemMouseCursors.click, + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, children: [ - const Text( - "Project : ", - style: TextStyle( - color: Colors.deepPurple, - fontWeight: FontWeight.bold, - ), - ), Text( - modal.project, + title, style: TextStyle( - decoration: TextDecoration.underline, - decorationColor: primaryColor, - color: primaryColor, - ), - ), - ], - ), - onTap: () { - launchUrl(Uri.parse(modal.projectUrl)); - }, - ), - const SizedBox( - height: 10, - ), - GestureDetector( - child: Wrap( - children: [ - const Text( - "Report : ", - style: TextStyle( - color: Colors.deepPurple, - fontWeight: FontWeight.bold, + color: Colors.grey, + fontSize: 14, + fontWeight: FontWeight.normal, ), ), Text( - modal.report, + value, + maxLines: 1, // Limiting to one line + overflow: TextOverflow.ellipsis, // Adding ellipsis if text overflows style: TextStyle( - decoration: TextDecoration.underline, - decorationColor: primaryColor, - color: primaryColor, + color: isDarkMode ? Colors.white : Colors.black, + fontSize: 16, + decoration: TextDecoration.none, // Removing underline ), ), ], ), - onTap: () { - launchUrl(Uri.parse(modal.reportUrl)); - }, ), - const SizedBox( - height: 10, - ), - GestureDetector( - child: Wrap( - children: [ - const Text( - "Original project proposal : ", - style: TextStyle( - color: Colors.deepPurple, - fontWeight: FontWeight.bold, - ), - ), - Text( - modal.originalProjectProposal, - style: TextStyle( - decoration: TextDecoration.underline, - decorationColor: primaryColor, - color: primaryColor, - ), - ), - ], + if (url.isNotEmpty) + Icon( + Icons.link, + color: isDarkMode ? linkColorDark : linkColor, + size: 16, ), - onTap: () { - launchUrl(Uri.parse(modal.originalProjectProposalUrl)); - }, - ), ], ), ), ); } -} +} \ No newline at end of file