Updated UI of home screen, news_card widget and the event_details widget

dscpesu · Oct 27, 2023 · 8dcdae2 · 8dcdae2
1 parent 2a344ba
commit 8dcdae2
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 44 deletions.
diff --git a/lib/screens/event_detail_screen.dart b/lib/screens/event_detail_screen.dart
@@ -48,7 +48,14 @@ class EventDetailScreen extends StatelessWidget {
                         offset: Offset(1, 1),
                         color: Colors.grey)
                   ],
-                  color: Colors.white,
+                  gradient: LinearGradient(
+                    begin: Alignment.topCenter,
+                    end: Alignment.bottomCenter,
+                    colors: [
+                      Color(0xffE2F9EE),
+                      Color(0xffFBFBD4),
+                    ],
+                  ),
                   borderRadius: BorderRadius.only(
                       topLeft: Radius.circular(20),
                       topRight: Radius.circular(20)),
@@ -60,19 +67,33 @@ class EventDetailScreen extends StatelessWidget {
                       const SizedBox(height: 10),
                       Row(
                         mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                        crossAxisAlignment: CrossAxisAlignment.end,
                         children: [
                           Flexible(
-                            child: Text(
-                              overflow: TextOverflow.ellipsis,
-                              newsItem.clubName,
-                              style: Theme.of(context)
-                                  .textTheme
-                                  .labelLarge!
-                                  .copyWith(
-                                      fontWeight: FontWeight.w500,
-                                      fontSize: 18,
-                                      color: Colors.black),
+                            child: Container(
+                              padding: const EdgeInsets.symmetric(
+                                  horizontal: 8, vertical: 8),
+                              decoration: BoxDecoration(
+                                borderRadius: BorderRadius.circular(10),
+                                gradient: const LinearGradient(
+                                  begin: Alignment.centerLeft,
+                                  end: Alignment.centerRight,
+                                  colors: [
+                                    Color(0xffbbc444),
+                                    Color(0xffd5da68),
+                                  ],
+                                ),
+                              ),
+                              child: Text(
+                                overflow: TextOverflow.ellipsis,
+                                newsItem.clubName,
+                                style: Theme.of(context)
+                                    .textTheme
+                                    .labelLarge!
+                                    .copyWith(
+                                        fontWeight: FontWeight.w500,
+                                        fontSize: 18,
+                                        color: Colors.black),
+                              ),
                             ),
                           ),
                           Text(
@@ -89,18 +110,20 @@ class EventDetailScreen extends StatelessWidget {
                         ],
                       ),
                       const SizedBox(height: 25),
-                      Text(
-                        newsItem.headline,
-                        overflow: TextOverflow.visible,
-                        style: Theme.of(context)
-                            .textTheme
-                            .headlineMedium!
-                            .copyWith(
-                              fontWeight: FontWeight.bold,
-                              fontSize: 24,
-                              height: 1.25,
-                              color: Colors.black,
-                            ),
+                      Center(
+                        child: Text(
+                          newsItem.headline,
+                          overflow: TextOverflow.visible,
+                          style: Theme.of(context)
+                              .textTheme
+                              .headlineMedium!
+                              .copyWith(
+                                fontWeight: FontWeight.bold,
+                                fontSize: 24,
+                                height: 1.25,
+                                color: Colors.black,
+                              ),
+                        ),
                       ),
                       const SizedBox(
                         height: 20,

diff --git a/lib/screens/home_screen.dart b/lib/screens/home_screen.dart
@@ -84,14 +84,16 @@ class _HomeScreenState extends State<HomeScreen> {
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            Padding(
-              padding: const EdgeInsets.only(
-                  top: 10, left: 20, right: 20, bottom: 10),
-              child: Text(
-                '${DateTime.now().day.toString().padLeft(2, '0')}th ${_getMonth(DateTime.now().month)}, ${DateTime.now().year}',
-                style: const TextStyle(
-                  fontSize: 24,
-                  fontWeight: FontWeight.bold,
+            Center(
+              child: Padding(
+                padding: const EdgeInsets.only(
+                    top: 10, left: 20, right: 20, bottom: 10),
+                child: Text(
+                  '${DateTime.now().day.toString().padLeft(2, '0')} ${_getMonth(DateTime.now().month)}, ${DateTime.now().year}',
+                  style: const TextStyle(
+                    fontSize: 24,
+                    fontWeight: FontWeight.bold,
+                  ),
                 ),
               ),
             ),

diff --git a/lib/widgets/news_item_card.dart b/lib/widgets/news_item_card.dart
@@ -36,36 +36,53 @@ class NewsItemCard extends StatelessWidget {
             height: MediaQuery.of(context).size.height * 0.15,
             imageUrl: newsItem.imageUrl,
           ),
-          Flexible(
+          Expanded(
             child: Column(
-              mainAxisAlignment: MainAxisAlignment.spaceBetween,
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
                 Text(
                   newsItem.headline,
                   style: Theme.of(context).textTheme.headlineSmall!.copyWith(
-                        fontSize: 21,
+                        fontSize: 18,
                         fontWeight: FontWeight.bold,
                         height: 1.5,
                         color: Colors.black,
                       ),
                 ),
-                Text(
-                  newsItem.clubName,
-                  overflow: TextOverflow.ellipsis,
-                  style: Theme.of(context).textTheme.headlineSmall!.copyWith(
-                        fontWeight: FontWeight.w500,
-                        fontSize: 18,
-                        height: 1,
-                        color: const Color(0xff7B6C6C),
-                      ),
+                const SizedBox(height: 10),
+                Container(
+                  padding:
+                      const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
+                  decoration: BoxDecoration(
+                    borderRadius: BorderRadius.circular(10),
+                    gradient: const LinearGradient(
+                      begin: Alignment.centerLeft,
+                      end: Alignment.centerRight,
+                      colors: [
+                        Color(0xffbbc444),
+                        Color(0xffd5da68),
+                      ],
+                    ),
+                  ),
+                  child: Text(
+                    newsItem.clubName,
+                    overflow: TextOverflow.ellipsis,
+                    style: Theme.of(context).textTheme.headlineSmall!.copyWith(
+                          fontWeight: FontWeight.w500,
+                          fontSize: 15,
+                          height: 1,
+                          color: Colors.black,
+                        ),
+                  ),
                 ),
+                const SizedBox(height: 5),
                 Text(
                   newsItem.date,
                   overflow: TextOverflow.ellipsis,
                   style: Theme.of(context).textTheme.bodySmall!.copyWith(
                         fontWeight: FontWeight.bold,
                         height: 1.25,
+                        letterSpacing: 1.1,
                         color: const Color(0xff7B6C6C),
                       ),
                 ),