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(
+      height: 160,
+      child: Card(
         shape: RoundedRectangleBorder(
           borderRadius: BorderRadius.circular(15.0),
         ),
+        elevation: 5,
+        clipBehavior: Clip.antiAliasWithSaveLayer,
         child: Row(
+          crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-          Container(
+            Container( // the image on the left
+              // inherit the height of the parent container
+              height: double.infinity,
+              // force a fixed width
               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),
+              child: Image.network(
+                widget.landmark.imageURL,
+                // cover the whole container meaning the image will be cropped
                 fit: BoxFit.cover,
               ),
             ),
-          ),
-          Padding(
+            Flexible(
+              child: Padding(
                 padding: EdgeInsets.all(10),
-            
                 child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
                     Row(
-                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                       children: [
-                    Text(
+                        Flexible(
+                          child: Text(
                             widget.landmark.name,
-                      style: TextStyle(
+                            style: const TextStyle(
                               fontSize: 18,
                               fontWeight: FontWeight.bold,
                             ),
+                            maxLines: 2,
                           ),
+                        )
                       ],
                     ),
-                SizedBox(height: 5),
-                Text(
+                    Row(
+                      children: [
+                        Flexible(
+                          child: Text(
                             "${widget.landmark.name} (${widget.landmark.type.name})",
-                  style: TextStyle(fontSize: 14),
+                            style: const TextStyle(fontSize: 14),
+                          ),
+                        )
+                      ]
                     ),
                   ],
                 ),
               ),
-
-          // Align(
-          //   alignment: Alignment.topRight,
-          //   child: Icon(Icons.push_pin, color: theme.primaryColor),
-          // ),
+            ),
           ],
         ),
+      ),
     );
   }
 }

frontend/lib/modules/landmarks_overview.dart

@@ -42,11 +42,14 @@ class _loadLandmarksOverviewState extends State<loadLandmarksOverview> {
           } else {
             children = [Center(child: CircularProgressIndicator())];
           }
-          return Center(
+          return Padding(
+            padding: const EdgeInsets.all(10),
+            child: Center(
               child: Column(
                 mainAxisAlignment: MainAxisAlignment.center,
                 children: children,
               ),
+            ),
           );
         },
       ),
@@ -56,39 +59,46 @@ class _loadLandmarksOverviewState extends State<loadLandmarksOverview> {
 
 Widget landmarksWithSteps(List<Landmark> landmarks) {
   List<Widget> children = [];
-  for (Landmark landmark in landmarks) {
-    children.add(LandmarkCard(landmark));
-    children.add(stepBetweenLandmarks());
+  for (int i = 0; i < landmarks.length; i++) {
+    children.add(LandmarkCard(landmarks[i]));
+    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(
-    children: [
-      Container(
-        width: 50,
-        height: 50,
+  return Container(
+    margin: EdgeInsets.all(10),
+    padding: EdgeInsets.all(10),
     decoration: BoxDecoration(
       border: Border(
-            left: BorderSide(width: 1.0, color: Colors.black),
+        left: BorderSide(width: 3.0, color: Colors.black),
       ),
+      // gradient: LinearGradient(
+      //   begin: Alignment.topLeft,
+      //   end: Alignment.bottomRight,
+      //   colors: [Colors.grey, Colors.white, Colors.white],
+      // ),
     ),
-        child: Column(
+    child: Row( 
+      children: [
+        Column(
           children: [
             Icon(Icons.directions_walk),
             Text("5 min", style: TextStyle(fontSize: 10)),
           ],
         ),
-      ),
         Spacer(),
         ElevatedButton(
           onPressed: () {
@@ -97,5 +107,6 @@ Widget stepBetweenLandmarks() {
           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,
       ));
     }