From 5ca9607ebfd4e1cc66d4e39996f7108d20c82690 Mon Sep 17 00:00:00 2001 From: Vikash singh <46121493+vik4114@users.noreply.github.com> Date: Sat, 26 Mar 2022 21:22:57 +0530 Subject: [PATCH] fix: #1292 Changed Appbar into Sliver appbar (#1339) * intial commit * Changed appbar into sliverbarr * Removed filter from empty screen * Removed unused controller --- .../product/common/product_query_page.dart | 237 +++++++++--------- 1 file changed, 115 insertions(+), 122 deletions(-) diff --git a/packages/smooth_app/lib/pages/product/common/product_query_page.dart b/packages/smooth_app/lib/pages/product/common/product_query_page.dart index e78cc3fe2e9..c7a8bdf3ee6 100644 --- a/packages/smooth_app/lib/pages/product/common/product_query_page.dart +++ b/packages/smooth_app/lib/pages/product/common/product_query_page.dart @@ -43,27 +43,12 @@ class _ProductQueryPageState extends State { late ProductQueryModel _model; int? _lastUpdate; - final ScrollController _scrollController = ScrollController(); - bool _showTitle = true; @override void initState() { super.initState(); _lastUpdate = widget.lastUpdate; _model = ProductQueryModel(widget.productListSupplier); - _scrollController.addListener(() { - if (_scrollController.offset <= - _scrollController.position.minScrollExtent && - !_scrollController.position.outOfRange) { - if (!_showTitle) { - setState(() => _showTitle = true); - } - } else { - if (_showTitle) { - setState(() => _showTitle = false); - } - } - }); } @override @@ -136,16 +121,33 @@ class _ProductQueryPageState extends State { children: [ _getHero(screenSize, themeData), Center(child: emptiness), - AnimatedOpacity( - opacity: _showTitle ? 1.0 : 0.0, - duration: const Duration(milliseconds: 250), - child: Row( - mainAxisSize: MainAxisSize.max, - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - getBackArrow(context, widget.mainColor), - ], - ), + CustomScrollView( + slivers: [ + SliverAppBar( + backgroundColor: themeData.scaffoldBackgroundColor, + expandedHeight: screenSize.height * 0.15, + collapsedHeight: screenSize.height * 0.09, + pinned: true, + elevation: 0, + automaticallyImplyLeading: false, + title: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + getBackArrow(context, widget.mainColor), + ]), + flexibleSpace: LayoutBuilder(builder: + (BuildContext context, BoxConstraints constraints) { + return FlexibleSpaceBar( + centerTitle: true, + title: Text( + widget.name, + textAlign: TextAlign.center, + style: themeData.textTheme.headline1! + .copyWith(color: widget.mainColor), + ), + background: _getHero(screenSize, themeData)); + })), + ], ), ], ), @@ -174,68 +176,87 @@ class _ProductQueryPageState extends State { body: Stack( children: [ _getHero(screenSize, themeData), - ListView.builder( - itemCount: _model.displayProducts!.length, - itemBuilder: (BuildContext context, int index) { - return Padding( - padding: const EdgeInsets.symmetric( - horizontal: 12.0, vertical: 8.0), - child: SmoothProductCardFound( - heroTag: _model.displayProducts![index].barcode!, - product: _model.displayProducts![index], - elevation: - Theme.of(context).brightness == Brightness.light - ? 0.0 - : 4.0, - ).build(context), - ); - }, - padding: EdgeInsets.only( - top: screenSize.height * 0.25, bottom: 80.0), - controller: _scrollController, - ), - AnimatedOpacity( - opacity: _showTitle ? 1.0 : 0.0, - duration: const Duration(milliseconds: 250), - child: Row( - mainAxisSize: MainAxisSize.max, - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - getBackArrow(context, widget.mainColor), - Padding( - padding: const EdgeInsets.only(top: 24.0), - child: TextButton.icon( - icon: Icon( - Icons.filter_list, - color: widget.mainColor, - ), - label: Text(AppLocalizations.of(context)!.filter), - style: TextButton.styleFrom( - textStyle: TextStyle( - color: widget.mainColor, - ), - ), - onPressed: () { - showCupertinoModalBottomSheet( - expand: false, - context: context, - backgroundColor: Colors.transparent, - bounce: true, - builder: (BuildContext context) => - GroupQueryFilterView( - categories: _model.categories, - categoriesList: _model.sortedCategories, - callback: (String category) { - _model.selectCategory(category); - setState(() {}); - }, + CustomScrollView( + slivers: [ + SliverAppBar( + backgroundColor: themeData.scaffoldBackgroundColor, + expandedHeight: screenSize.height * 0.15, + collapsedHeight: screenSize.height * 0.09, + pinned: true, + elevation: 0, + automaticallyImplyLeading: false, + title: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + getBackArrow(context, widget.mainColor), + Padding( + padding: const EdgeInsets.only(top: 24.0), + child: TextButton.icon( + icon: Icon( + Icons.filter_list, + color: widget.mainColor, + ), + label: Text( + AppLocalizations.of(context)!.filter, + style: themeData.textTheme.subtitle1! + .copyWith(color: widget.mainColor)), + style: TextButton.styleFrom( + textStyle: TextStyle( + color: widget.mainColor, + ), + ), + onPressed: () { + showCupertinoModalBottomSheet( + expand: false, + context: context, + backgroundColor: Colors.transparent, + bounce: true, + builder: (BuildContext context) => + GroupQueryFilterView( + categories: _model.categories, + categoriesList: _model.sortedCategories, + callback: (String category) { + _model.selectCategory(category); + setState(() {}); + }, + ), + ); + }, + ), + ) + ]), + flexibleSpace: LayoutBuilder(builder: + (BuildContext context, BoxConstraints constraints) { + return FlexibleSpaceBar( + centerTitle: true, + title: Text( + widget.name, + textAlign: TextAlign.center, + style: themeData.textTheme.headline1! + .copyWith(color: widget.mainColor), ), - ); - }, - ), + background: _getHero(screenSize, themeData)); + })), + SliverList( + delegate: SliverChildBuilderDelegate( + (_, int index) { + return Padding( + padding: const EdgeInsets.symmetric( + horizontal: 12.0, vertical: 8.0), + child: SmoothProductCardFound( + heroTag: _model.displayProducts![index].barcode!, + product: _model.displayProducts![index], + elevation: + Theme.of(context).brightness == Brightness.light + ? 0.0 + : 4.0, + ).build(context), + ); + }, + childCount: _model.displayProducts!.length, ), - ], - ), + ) + ], ), ], ), @@ -243,43 +264,15 @@ class _ProductQueryPageState extends State { ); Widget _getHero(final Size screenSize, final ThemeData themeData) => Hero( - tag: widget.heroTag, - child: Container( - width: screenSize.width, - height: screenSize.height, - decoration: BoxDecoration( - color: widget.mainColor.withAlpha(32), - borderRadius: const BorderRadius.only( - bottomLeft: Radius.circular(20.0), - bottomRight: Radius.circular(20.0)), - ), - padding: const EdgeInsets.only(left: 10.0, right: 10.0, top: 96.0), - child: Column( - children: [ - SizedBox( - height: 80.0, - child: Row( - mainAxisSize: MainAxisSize.max, - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Flexible( - child: AnimatedOpacity( - opacity: _showTitle ? 1.0 : 0.0, - duration: const Duration(milliseconds: 250), - child: Text( - widget.name, - textAlign: TextAlign.center, - style: themeData.textTheme.headline1! - .copyWith(color: widget.mainColor), - )), - ), - ], - ), - ), - ], - )), - ); + tag: widget.heroTag, + child: Container( + width: screenSize.width, + height: screenSize.height, + decoration: BoxDecoration( + color: widget.mainColor.withAlpha(32), + ), + padding: const EdgeInsets.only(left: 10.0, right: 10.0, top: 96.0), + )); Widget _getEmptyText( final ThemeData themeData,