added a cool header bar with hero image transition thingy to the listing view

This commit is contained in:
Lynne Megido 2020-09-30 18:20:27 +10:00
parent 3f3e2c5f2e
commit 7f4aac0b00
Signed by: lynnesbian
GPG Key ID: F0A184B5213D9F90
3 changed files with 42 additions and 10 deletions

View File

@ -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<RouteViewListing> {
Widget build(BuildContext context) {
final String id = ModalRoute.of(context).settings.arguments;
return Scaffold(
appBar: AppBar(
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: $id")
title: Text("ID"),
trailing: Text(id),
),
Divider(),
ListTile(
title: Text("Price"),
trailing: Text("¥12345")
)
],
)
]
)
);
}

View File

@ -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:

View File

@ -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: