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(
+    return Container(
-      shape: RoundedRectangleBorder(
+      height: 160,
-        borderRadius: BorderRadius.circular(15.0),
+      child: Card(
-      ),
+        shape: RoundedRectangleBorder(
-      child: Row(
+          borderRadius: BorderRadius.circular(15.0),
-        children: [
+        ),
-          Container(
+        elevation: 5,
-            width: 160,
+        clipBehavior: Clip.antiAliasWithSaveLayer,
-            height: 160,
+        child: Row(
-            decoration: BoxDecoration(
+          crossAxisAlignment: CrossAxisAlignment.start,
-              borderRadius: BorderRadius.only(
+          children: [
-                topLeft: Radius.circular(15.0),
+            Container( // the image on the left
-                bottomLeft: Radius.circular(15.0),
+              // inherit the height of the parent container
-              ),
+              height: double.infinity,
-              image: DecorationImage(
+              // force a fixed width
-                image: NetworkImage(widget.landmark.imageURL),
+              width: 160,
+              child: Image.network(
+                widget.landmark.imageURL,
+                // cover the whole container meaning the image will be cropped
                 fit: BoxFit.cover,
               ),
             ),
-          ),
+            Flexible(
-          Padding(
+              child: Padding(
-            padding: EdgeInsets.all(10),
+                padding: EdgeInsets.all(10),
-            
+                child: Column(
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                Row(
-                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                   children: [
-                    Text(
+                    Row(
-                      widget.landmark.name,
+                      children: [
-                      style: TextStyle(
+                        Flexible(
-                        fontSize: 18,
+                          child: Text(
-                        fontWeight: FontWeight.bold,
+                            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),
-          // ),
-        ],
       ),
     );
   }
-}
+}

frontend/lib/modules/landmarks_overview.dart

@@ -42,10 +42,13 @@ class _loadLandmarksOverviewState extends State<loadLandmarksOverview> {
           } else {
             children = [Center(child: CircularProgressIndicator())];
           }
-          return Center(
+          return Padding(
-            child: Column(
+            padding: const EdgeInsets.all(10),
-              mainAxisAlignment: MainAxisAlignment.center,
+            child: Center(
-              children: children,
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: children,
+              ),
             ),
           );
         },
@@ -56,46 +59,54 @@ class _loadLandmarksOverviewState extends State<loadLandmarksOverview> {
 
 Widget landmarksWithSteps(List<Landmark> landmarks) {
   List<Widget> children = [];
-  for (Landmark landmark in landmarks) {
+  for (int i = 0; i < landmarks.length; i++) {
-    children.add(LandmarkCard(landmark));
+    children.add(LandmarkCard(landmarks[i]));
-    children.add(stepBetweenLandmarks());
+    if (i < landmarks.length - 1) {
+      Widget step = stepBetweenLandmarks(landmarks[i], landmarks[i + 1]);
+      children.add(step);
+    }
   }
 
   return Column(
-    children: children.sublist(0, children.length - 1)
+    children: children
   );
 }
 
 
-Widget stepBetweenLandmarks() {
+Widget stepBetweenLandmarks(Landmark before, Landmark after) {
   // This is a simple widget that draws a line between landmark-cards
   // It's a vertical dotted line
   // Next to the line is the icon for the mode of transport (walking for now) and the estimated time
   // There is also a button to open the navigation instructions as a new intent
-  return Row(
+  return Container(
-    children: [
+    margin: EdgeInsets.all(10),
-      Container(
+    padding: EdgeInsets.all(10),
-        width: 50,
+    decoration: BoxDecoration(
-        height: 50,
+      border: Border(
-        decoration: BoxDecoration(
+        left: BorderSide(width: 3.0, color: Colors.black),
-          border: Border(
+      ),
-            left: BorderSide(width: 1.0, color: Colors.black),
+      // gradient: LinearGradient(
-          ),
+      //   begin: Alignment.topLeft,
-        ),
+      //   end: Alignment.bottomRight,
-        child: Column(
+      //   colors: [Colors.grey, Colors.white, Colors.white],
+      // ),
+    ),
+    child: Row( 
+      children: [
+        Column(
           children: [
             Icon(Icons.directions_walk),
             Text("5 min", style: TextStyle(fontSize: 10)),
           ],
         ),
-      ),
+        Spacer(),
-      Spacer(),
+        ElevatedButton(
-      ElevatedButton(
+          onPressed: () {
-        onPressed: () {
+            // Open navigation instructions
-          // Open navigation instructions
+          },
-        },
+          child: Text("Navigate"),
-        child: Text("Navigate"),
+        ),
-      ),
+      ],
-    ],
+    ),
   );
 }

frontend/lib/pages/profile.dart

@@ -51,7 +51,7 @@ class ImportanceSliders extends StatefulWidget {
 
 class _ImportanceSlidersState extends State<ImportanceSliders> {
 
-  UserPreferences _prefs = UserPreferences();
+  final UserPreferences _prefs = UserPreferences();
 
   @override
   void initState() {
@@ -80,7 +80,7 @@ class _ImportanceSlidersState extends State<ImportanceSliders> {
             },
           )
         ),
-        margin: EdgeInsets.only(left: 10, right: 10, top: 10, bottom: 0),
+        margin: const EdgeInsets.only(left: 10, right: 10, top: 10, bottom: 0),
         shadowColor: Colors.grey,
       ));
     }