Improve UX

- Remove filter box focus when tapped outside
- Set product list separator size to 1
- Make background of report pages white

lib/src/pages/widgets/product_item.dart

@@ -25,6 +25,7 @@ class ProductItemTile extends StatelessWidget {
  subtitle: buildSubtitle(),
  trailing: buildPrice(),
  onLongPress: () => _saleProduct(context),
+ onTap: () => FocusScope.of(context).unfocus(),
  ),
  ),
  actions: <Widget>[
@@ -83,25 +84,41 @@ class ProductItemTile extends StatelessWidget {
  return Text.rich(
  TextSpan(
  children: [
- TextSpan(text: 'Each unit costs '),
+ TextSpan(text: 'Added on '),
  TextSpan(
- text: product.unitCostStr,
+ text: product.dateStr,
  style: TextStyle(
- fontWeight: FontWeight.w600,
- fontFamily: 'monospace',
+ fontWeight: FontWeight.bold,
  ),
  ),
  ],
  ),
  );
  }
 
- Text buildPrice() {
- return Text(
- product.costStr,
- style: TextStyle(
- fontWeight: FontWeight.w600,
- fontFamily: 'monospace',
+ Widget buildPrice() {
+ return Container(
+ constraints: BoxConstraints(
+ minWidth: 75,
+ ),
+ child: Column(
+ mainAxisSize: MainAxisSize.min,
+ children: [
+ Text(
+ product.costStr,
+ style: TextStyle(
+ fontSize: 15,
+ fontWeight: FontWeight.bold,
+ ),
+ ),
+ Text(
+ '${product.quantity} × ${product.unitCostStr}',
+ style: TextStyle(
+ fontSize: 12,
+ color: Colors.grey,
+ ),
+ ),
+ ],
  ),
  );
  }

lib/src/pages/widgets/product_list.dart

@@ -36,7 +36,7 @@ class _ProductListViewState extends State<ProductListView> {
  return ListView.separated(
  itemCount: filteredProducts.length + 2,
  padding: EdgeInsets.only(bottom: 100, top: 0),
- separatorBuilder: (context, index) => Container(height: 5),
+ separatorBuilder: (context, index) => Container(height: 1),
  itemBuilder: (context, index) {
  if (index == 0) {
  return buildFilterInput();
@@ -82,10 +82,10 @@ class _ProductListViewState extends State<ProductListView> {
  }
 
  Widget buildFilterInput() {
- if (widget.products.length < 7) {
+ if (widget.products.length < 8) {
  return Container();
  }
- return Padding(
+ return Container(
  padding: EdgeInsets.all(8.0),
  child: TextField(
  controller: filterInput,

lib/src/pages/widgets/report_page_widget.dart

@@ -31,7 +31,7 @@ class ReportPageWidget<T extends Report> extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
  return Scaffold(
- backgroundColor: Colors.grey[300],
+ backgroundColor: Colors.white,
  appBar: AppBar(
  title: Text(titleText),
  ),

pubspec.yaml

@@ -1,7 +1,7 @@
 name: sales_tracker
 description: A generic sales tracking application
 publish_to: 'none' # Remove this line if you wish to publish to pub.dev
-version: 1.2.1+4
+version: 1.2.2+5
 
 environment:
  sdk: ">=2.13.0 <3.0.0"