Merge pull request #336 from gtalha07/issue322_fix-newsbar-alignment

fix news bar alignment
acterglobal · Nov 11, 2022 · 40d7dee · 40d7dee
2 parents 7a09652 + 572c107
commit 40d7dee
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 78 deletions.
diff --git a/app/lib/widgets/NewsItem.dart b/app/lib/widgets/NewsItem.dart
@@ -1,5 +1,6 @@
 import 'dart:typed_data';
 import 'dart:ui' as ui;
+import 'dart:io' show Platform;
 
 import 'package:cached_memory_image/cached_memory_image.dart';
 import 'package:effektio/common/store/themes/SeperatedThemes.dart';
@@ -26,6 +27,7 @@ class NewsItem extends StatelessWidget {
   Widget build(BuildContext context) {
     var bgColor = convertColor(news.bgColor(), AppCommonTheme.backgroundColor);
     var fgColor = convertColor(news.fgColor(), AppCommonTheme.primaryColor);
+    bool isDesktop = Platform.isWindows || Platform.isMacOS || Platform.isLinux;
 
     return Stack(
       alignment: Alignment.bottomCenter,
@@ -37,37 +39,41 @@ class NewsItem extends StatelessWidget {
           child: _buildImage(),
           clipBehavior: Clip.none,
         ),
-        Row(
-          crossAxisAlignment: CrossAxisAlignment.end,
-          children: <Widget>[
-            Expanded(
-              flex: 5,
-              child: SizedBox(
-                height: MediaQuery.of(context).size.height / 4,
-                child: Padding(
-                  padding: const EdgeInsets.symmetric(vertical: 12),
-                  child: Column(
-                    children: <Widget>[
-                      const Spacer(),
-                      _buildTitle(bgColor, fgColor),
-                      const SizedBox(height: 10),
-                      _buildSubtitle(bgColor, fgColor),
-                      const SizedBox(height: 10),
-                    ],
+        LayoutBuilder(
+          builder: (context, constraints) {
+            return SizedBox(
+              height: constraints.maxWidth >= 600
+                  ? isDesktop
+                      ? MediaQuery.of(context).size.height * 0.5
+                      : MediaQuery.of(context).size.height * 0.7
+                  : MediaQuery.of(context).size.height * 0.4,
+              child: Row(
+                crossAxisAlignment: CrossAxisAlignment.end,
+                children: <Widget>[
+                  Expanded(
+                    flex: 5,
+                    child: Padding(
+                      padding: const EdgeInsets.all(12),
+                      child: Column(
+                        children: <Widget>[
+                          const Spacer(),
+                          _buildTitle(bgColor, fgColor),
+                          const SizedBox(height: 10),
+                          _buildSubtitle(bgColor, fgColor),
+                          const SizedBox(height: 10),
+                        ],
+                      ),
+                    ),
                   ),
-                ),
-              ),
-            ),
-            Expanded(
-              flex: 1,
-              child: SizedBox(
-                height: MediaQuery.of(context).size.height / 2.5,
-                child: InkWell(
-                  child: NewsSideBar(client: client, news: news, index: index),
-                ),
+                  Expanded(
+                    flex: 1,
+                    child:
+                        NewsSideBar(client: client, news: news, index: index),
+                  ),
+                ],
               ),
-            ),
-          ],
+            );
+          },
         ),
       ],
     );

diff --git a/app/lib/widgets/NewsSideBar.dart b/app/lib/widgets/NewsSideBar.dart
@@ -97,15 +97,12 @@ class _NewsSideBarState extends State<NewsSideBar> {
     );
     return Column(
       mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-      crossAxisAlignment: CrossAxisAlignment.end,
       children: [
-        Center(
-          child: LikeButton(
-            likeCount: widget.news.likesCount().toString(),
-            style: style,
-            color: fgColor,
-            index: widget.index,
-          ),
+        LikeButton(
+          likeCount: widget.news.likesCount().toString(),
+          style: style,
+          color: fgColor,
+          index: widget.index,
         ),
         buildSideBarItem(
           'comment',
@@ -124,36 +121,27 @@ class _NewsSideBarState extends State<NewsSideBar> {
       onTap: () {
         showNotYetImplementedMsg(context, 'Profile Action not yet implemented');
       },
-      child: Padding(
-        padding: const EdgeInsets.only(right: 10),
-        child: Stack(
-          clipBehavior: Clip.none,
-          alignment: Alignment.bottomCenter,
-          children: [
-            CachedNetworkImage(
-              imageUrl:
-                  'https://dragonball.guru/wp-content/uploads/2021/01/goku-dragon-ball-guru.jpg',
-              height: 45,
-              width: 45,
-              imageBuilder: (context, imageProvider) => Container(
-                decoration: BoxDecoration(
-                  border: Border.all(color: borderColor),
-                  borderRadius: BorderRadius.circular(25),
-                  image: DecorationImage(
-                    image: imageProvider,
-                    fit: BoxFit.cover,
-                    colorFilter: const ColorFilter.mode(
-                      Colors.red,
-                      BlendMode.colorBurn,
-                    ),
-                  ),
-                ),
+      child: CachedNetworkImage(
+        imageUrl:
+            'https://dragonball.guru/wp-content/uploads/2021/01/goku-dragon-ball-guru.jpg',
+        height: 45,
+        width: 45,
+        imageBuilder: (context, imageProvider) => Container(
+          decoration: BoxDecoration(
+            border: Border.all(color: borderColor),
+            borderRadius: BorderRadius.circular(25),
+            image: DecorationImage(
+              image: imageProvider,
+              fit: BoxFit.cover,
+              colorFilter: const ColorFilter.mode(
+                Colors.red,
+                BlendMode.colorBurn,
               ),
-              placeholder: (context, url) => const CircularProgressIndicator(),
-              errorWidget: (context, url, error) => const Icon(Icons.error),
             ),
-          ],
+          ),
         ),
+        placeholder: (context, url) => const CircularProgressIndicator(),
+        errorWidget: (context, url, error) => const Icon(Icons.error),
       ),
     );
   }
@@ -172,20 +160,17 @@ class _NewsSideBarState extends State<NewsSideBar> {
           showNotYetImplementedMsg(context, 'News Action not yet implemented');
         }
       },
-      child: Padding(
-        padding: const EdgeInsets.only(right: 15),
-        child: Column(
-          children: [
-            SvgPicture.asset(
-              'assets/images/$iconName.svg',
-              color: color,
-              width: 35,
-              height: 35,
-            ),
-            const SizedBox(height: 5),
-            Text(label, style: style),
-          ],
-        ),
+      child: Column(
+        children: [
+          SvgPicture.asset(
+            'assets/images/$iconName.svg',
+            color: color,
+            width: 35,
+            height: 35,
+          ),
+          const SizedBox(height: 5),
+          Text(label, style: style),
+        ],
       ),
     );
   }