From 7f4aac0b0007f4fb45ced965bc9bdcf2478cb63d Mon Sep 17 00:00:00 2001 From: Lynne Date: Wed, 30 Sep 2020 18:20:27 +1000 Subject: [PATCH] added a cool header bar with hero image transition thingy to the listing view --- lib/pages/view_listing.dart | 44 ++++++++++++++++++++++++++++--------- pubspec.lock | 7 ++++++ pubspec.yaml | 1 + 3 files changed, 42 insertions(+), 10 deletions(-) diff --git a/lib/pages/view_listing.dart b/lib/pages/view_listing.dart index 9c32821..8ecc293 100644 --- a/lib/pages/view_listing.dart +++ b/lib/pages/view_listing.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'package:transparent_image/transparent_image.dart'; class RouteViewListing extends StatefulWidget { @override @@ -10,16 +11,39 @@ class _RouteViewListingState extends State { Widget build(BuildContext context) { final String id = ModalRoute.of(context).settings.arguments; return Scaffold( - appBar: AppBar( - title: Text("View listing"), - automaticallyImplyLeading: false, // remove the useless back button - ), - body: ListView( - children: [ - ListTile( - title: Text("ID: $id") - ) - ] + body: NestedScrollView( + headerSliverBuilder: (context, innerBoxIsScrolled) => [ + SliverOverlapAbsorber( + sliver: SliverSafeArea( + top: false, + sliver: SliverAppBar( + title: Text("View listing"), + pinned: true, + flexibleSpace: FadeInImage.memoryNetwork( + placeholder: kTransparentImage, + image: 'https://lynnesbian.space/res/ceres/lesbun_full.jpg', + fit: BoxFit.cover, + ), + expandedHeight: 200, + automaticallyImplyLeading: false, // remove the useless back button + ), + ), + handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context), + ), + ], + body: ListView( + children: [ + ListTile( + title: Text("ID"), + trailing: Text(id), + ), + Divider(), + ListTile( + title: Text("Price"), + trailing: Text("¥12345") + ) + ], + ) ) ); } diff --git a/pubspec.lock b/pubspec.lock index a1edecd..f6ec8a4 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -177,6 +177,13 @@ packages: url: "https://pub.dartlang.org" source: hosted version: "0.2.17" + transparent_image: + dependency: "direct main" + description: + name: transparent_image + url: "https://pub.dartlang.org" + source: hosted + version: "1.0.0" typed_data: dependency: transitive description: diff --git a/pubspec.yaml b/pubspec.yaml index 7cb1e07..ccd91a1 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -31,6 +31,7 @@ dependencies: sprintf: "^4.0.0" provider: ^4.1.0 sqflite: ^1.3.0 + transparent_image: ^1.0.0 dev_dependencies: flutter_test: