landmark styling

frontend/lib/modules/landmark_card.dart

@@ -15,59 +15,64 @@ class _LandmarkCardState extends State<LandmarkCard> {
   @override
   Widget build(BuildContext context) {
     ThemeData theme = Theme.of(context);
-    return Card(
-      shape: RoundedRectangleBorder(
-        borderRadius: BorderRadius.circular(15.0),
-      ),
-      child: Row(
-        children: [
-          Container(
-            width: 160,
-            height: 160,
-            decoration: BoxDecoration(
-              borderRadius: BorderRadius.only(
-                topLeft: Radius.circular(15.0),
-                bottomLeft: Radius.circular(15.0),
-              ),
-              image: DecorationImage(
-                image: NetworkImage(widget.landmark.imageURL),
+    return Container(
+      height: 160,
+      child: Card(
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(15.0),
+        ),
+        elevation: 5,
+        clipBehavior: Clip.antiAliasWithSaveLayer,
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Container( // the image on the left
+              // inherit the height of the parent container
+              height: double.infinity,
+              // force a fixed width
+              width: 160,
+              child: Image.network(
+                widget.landmark.imageURL,
+                // cover the whole container meaning the image will be cropped
                 fit: BoxFit.cover,
               ),
             ),
-          ),
-          Padding(
-            padding: EdgeInsets.all(10),
-            
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                Row(
-                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            Flexible(
+              child: Padding(
+                padding: EdgeInsets.all(10),
+                child: Column(
                   children: [
-                    Text(
-                      widget.landmark.name,
-                      style: TextStyle(
-                        fontSize: 18,
-                        fontWeight: FontWeight.bold,
-                      ),
+                    Row(
+                      children: [
+                        Flexible(
+                          child: Text(
+                            widget.landmark.name,
+                            style: const TextStyle(
+                              fontSize: 18,
+                              fontWeight: FontWeight.bold,
+                            ),
+                            maxLines: 2,
+                          ),
+                        )
+                      ],
+                    ),
+                    Row(
+                      children: [
+                        Flexible(
+                          child: Text(
+                            "${widget.landmark.name} (${widget.landmark.type.name})",
+                            style: const TextStyle(fontSize: 14),
+                          ),
+                        )
+                      ]
                     ),
                   ],
                 ),
-                SizedBox(height: 5),
-                Text(
-                  "${widget.landmark.name} (${widget.landmark.type.name})",
-                  style: TextStyle(fontSize: 14),
-                ),
-              ],
+              ),
             ),
-          ),
-
-          // Align(
-          //   alignment: Alignment.topRight,
-          //   child: Icon(Icons.push_pin, color: theme.primaryColor),
-          // ),
-        ],
+          ],
+        ),
       ),
     );
   }
-}
+}