listing view now shows more info about the listing (with placeholders) along with actions such as share and delete

lib/pages/view_listing.dart

@@ -1,5 +1,10 @@
-import 'package:flutter/material.dart';
+import 'package:buypeeb_mobile/models/user_listings.dart';
+import 'package:sprintf/sprintf.dart';
 import 'package:transparent_image/transparent_image.dart';
+import 'package:provider/provider.dart';
+import 'package:flutter/material.dart';
+import 'dart:collection';
+
 
 class RouteViewListing extends StatefulWidget {
   @override
@@ -10,6 +15,27 @@ class _RouteViewListingState extends State<RouteViewListing> {
   @override
   Widget build(BuildContext context) {
     final String id = ModalRoute.of(context).settings.arguments;
+    var listings = context.watch<UserListings>();
+    var thisListing = listings.items[id];
+    final text = <Text>{};
+    final Map<Text, Widget> listingInfo = {
+      Text("ID"): Text(id),
+      Text("Price"): Text("¥${thisListing.price}"),
+      Text("Price (AUD)"): Text(sprintf("≈\$%2.2f", [thisListing.getLocalPrice()])),
+      Text("Ending in"): Text("3 days, 01:23:45"),
+      Text("Bids"): Text("7"),
+      Text('"Buy it now" available'): true ? Icon(Icons.check_circle) : Icon(Icons.cancel),
+      Text("Auto extension"): true ? Icon(Icons.check_circle) : Icon(Icons.cancel),
+    };
+    final Map<Text, Widget> listingActions = {
+      Text("Favourite"): true ? Icon(Icons.favorite) : Icon(Icons.favorite_border),
+      Text("Share") : Icon(Icons.share),
+      Text("Rename") : Icon(Icons.edit),
+      Text("View on Buyee") : Icon(Icons.web),
+      Text("View on Yahoo! Auctions Japan") : Icon(Icons.web),
+      Text("Delete") : Icon(Icons.delete),
+    };
+
     return Scaffold(
       body: NestedScrollView(
         headerSliverBuilder: (context, innerBoxIsScrolled) => [
@@ -17,13 +43,44 @@ class _RouteViewListingState extends State<RouteViewListing> {
             sliver: SliverSafeArea(
               top: false,
               sliver: SliverAppBar(
-                title: Text("View listing"),
                 pinned: true,
-                flexibleSpace: FadeInImage.memoryNetwork(
+
+                // based on https://api.flutter.dev/flutter/material/FlexibleSpaceBar-class.html
+                flexibleSpace: FlexibleSpaceBar(
+                  stretchModes: [
+                    StretchMode.blurBackground,
+                    StretchMode.fadeTitle,
+                  ],
+                  title: Text(
+                    thisListing.name,
+                    maxLines: 1,
+                    overflow: TextOverflow.ellipsis,
+                  ),
+                  centerTitle: true,
+                  // titlePadding: const EdgeInsetsDirectional.only(bottom: 16, end: 150),
+                  background: Stack(
+                    fit: StackFit.expand,
+                    children: [
+                      FadeInImage.memoryNetwork(
                         placeholder: kTransparentImage,
                         image: 'https://lynnesbian.space/res/ceres/lesbun_full.jpg',
                         fit: BoxFit.cover,
                       ),
+                      const DecoratedBox(
+                        decoration: BoxDecoration(
+                          gradient: LinearGradient(
+                            begin: Alignment(0.0, 0.5),
+                            end: Alignment(0.0, 0.0),
+                            colors: <Color>[
+                              Color(0x60000000),
+                              Color(0x00000000),
+                            ],
+                          )
+                        )
+                      )
+                    ]
+                  )
+                ),
                 expandedHeight: 200,
                 automaticallyImplyLeading: false, // remove the useless back button
               ),
@@ -31,18 +88,55 @@ class _RouteViewListingState extends State<RouteViewListing> {
             handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
           ),
         ],
-        body: ListView(
+        body:
-          children: [
+          ListView.separated(
-            ListTile(
+            itemBuilder: (context, i) {
-              title: Text("ID"),
+              if (i == 0) {
-              trailing: Text(id),
+                return ListTile(
+                  visualDensity: VisualDensity.compact,
+                  title: Text(
+                    "About this listing",
+                    textAlign: TextAlign.center,
+                    style: TextStyle(
+                      fontWeight: FontWeight.bold,
                     ),
-            Divider(),
-            ListTile(
-              title: Text("Price"),
-              trailing: Text("¥12345")
                   )
-          ],
+                );
+              } else if (i > 0 && i <= listingInfo.length) {
+                // subtract one to account for the "About this listing" tile at the start of the list
+                i = i - 1;
+                var key = listingInfo.keys.elementAt(i);
+                return ListTile(
+                  visualDensity: VisualDensity.compact,
+                  title: key,
+                  trailing: listingInfo[key],
+                );
+              } else if (i == listingInfo.length + 1) {
+                return ListTile(
+                  visualDensity: VisualDensity.compact,
+                  title: Text(
+                    "Actions",
+                    textAlign: TextAlign.center,
+                    style: TextStyle(
+                      fontWeight: FontWeight.bold,
+                    )
+                  )
+                );
+              } else if (i > listingInfo.length + 1 && i <= listingInfo.length + 1 + listingActions.length) {
+                // subtract 2 (one for each header), and the length of listingInfo, to account for the previous stuff
+                i = i - listingInfo.length - 2;
+                var key = listingActions.keys.elementAt(i);
+                return ListTile(
+                  visualDensity: VisualDensity.compact,
+                  title: key,
+                  trailing: listingActions[key],
+                );
+              } else {
+                return ListTile(title: Text("???"));
+              }
+            },
+            separatorBuilder: (context, i) => new Divider(),
+            itemCount: listingInfo.length + listingActions.length + 2
           )
       )
     );