feat: Replaced Product Page AppBar with floating action Button (#1275)

* chore(develop): release 0.2.0 * added dark theme on personalized page * Certain Changes * Reverted changelog changes * wrapped the circular progress indicator with center widget * wrapped CircularProgressIndicator with Center Widget * Added Floating ActionButton * Added PopUp Menu Action * Added Pop UP Action Button * Added Pop-Up Action Button * Added PopUp action menu * Added PopUp action Menu * Added Types * Certain Changes * Certain Changes Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Marvin M <39344769+M123-dev@users.noreply.github.com>
openfoodfacts · Mar 20, 2022 · bc78fe2 · bc78fe2
1 parent 19f7c23
commit bc78fe2
Showing 1 changed file with 75 additions and 29 deletions.
diff --git a/packages/smooth_app/lib/pages/product/new_product_page.dart b/packages/smooth_app/lib/pages/product/new_product_page.dart
@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:openfoodfacts/model/KnowledgePanels.dart';
 import 'package:openfoodfacts/openfoodfacts.dart';
@@ -17,7 +18,6 @@ import 'package:smooth_app/generic_lib/buttons/smooth_action_button.dart';
 import 'package:smooth_app/generic_lib/design_constants.dart';
 import 'package:smooth_app/helpers/analytics_helper.dart';
 import 'package:smooth_app/helpers/launch_url_helper.dart';
-import 'package:smooth_app/helpers/product_cards_helper.dart';
 import 'package:smooth_app/pages/product/category_cache.dart';
 import 'package:smooth_app/pages/product/category_picker_page.dart';
 import 'package:smooth_app/pages/product/common/product_dialog_helper.dart';
@@ -42,6 +42,7 @@ enum ProductPageMenuItem { WEB, REFRESH }
 class _ProductPageState extends State<ProductPage> {
   late Product _product;
   late ProductPreferences _productPreferences;
+  bool isVisible = true;
 
   @override
   void initState() {
@@ -63,43 +64,88 @@ class _ProductPageState extends State<ProductPage> {
     final ColorScheme colorScheme = themeData.colorScheme;
     final MaterialColor materialColor =
         SmoothTheme.getMaterialColor(themeProvider);
+
+    final Size size = MediaQuery.of(context).size;
+
     return Scaffold(
       backgroundColor: SmoothTheme.getColor(
         colorScheme,
         materialColor,
         ColorDestination.SURFACE_BACKGROUND,
       ),
-      appBar: AppBar(
-        title: Text(getProductName(_product, appLocalizations)),
-        actions: <Widget>[
-          PopupMenuButton<ProductPageMenuItem>(
-            itemBuilder: (BuildContext context) =>
-                <PopupMenuEntry<ProductPageMenuItem>>[
-              PopupMenuItem<ProductPageMenuItem>(
-                value: ProductPageMenuItem.WEB,
-                child: Text(appLocalizations.label_web),
-              ),
-              PopupMenuItem<ProductPageMenuItem>(
-                value: ProductPageMenuItem.REFRESH,
-                child: Text(appLocalizations.label_refresh),
+      floatingActionButton: isVisible
+          ? FloatingActionButton(
+              backgroundColor: colorScheme.primary,
+              onPressed: () {
+                Navigator.pop(context);
+              },
+              child: const Icon(
+                Icons.arrow_back,
+                color: Colors.white,
               ),
-            ],
-            onSelected: (final ProductPageMenuItem value) async {
-              switch (value) {
-                case ProductPageMenuItem.WEB:
-                  LaunchUrlHelper.launchURL(
-                      'https://openfoodfacts.org/product/${_product.barcode}/',
-                      false);
-                  break;
-                case ProductPageMenuItem.REFRESH:
-                  _refreshProduct(context);
-                  break;
-              }
-            },
-          ),
+            )
+          : null,
+      floatingActionButtonLocation: FloatingActionButtonLocation.startTop,
+      body: Stack(
+        children: <Widget>[
+          NotificationListener<UserScrollNotification>(
+              onNotification: (UserScrollNotification notification) {
+                if (notification.direction == ScrollDirection.forward) {
+                  if (!isVisible) {
+                    setState(() {
+                      isVisible = true;
+                    });
+                  }
+                } else if (notification.direction == ScrollDirection.reverse) {
+                  if (isVisible) {
+                    setState(() {
+                      isVisible = false;
+                    });
+                  }
+                }
+                return true;
+              },
+              child: _buildProductBody(context)),
+
+          //! It is a temporary button for Pop-Up action menu
+          if (isVisible) ...<Widget>[
+            Positioned(
+                bottom: size.height * 0.01,
+                right: size.width * 0.01,
+                child: Container(
+                  height: size.height * 0.05,
+                  width: size.width * 0.2,
+                  decoration: BoxDecoration(
+                      color: colorScheme.primary, shape: BoxShape.circle),
+                  child: PopupMenuButton<ProductPageMenuItem>(
+                    itemBuilder: (BuildContext context) =>
+                        <PopupMenuEntry<ProductPageMenuItem>>[
+                      PopupMenuItem<ProductPageMenuItem>(
+                        value: ProductPageMenuItem.WEB,
+                        child: Text(appLocalizations.label_web),
+                      ),
+                      PopupMenuItem<ProductPageMenuItem>(
+                        value: ProductPageMenuItem.REFRESH,
+                        child: Text(appLocalizations.label_refresh),
+                      ),
+                    ],
+                    onSelected: (final ProductPageMenuItem value) async {
+                      switch (value) {
+                        case ProductPageMenuItem.WEB:
+                          LaunchUrlHelper.launchURL(
+                              'https://openfoodfacts.org/product/${_product.barcode}/',
+                              false);
+                          break;
+                        case ProductPageMenuItem.REFRESH:
+                          _refreshProduct(context);
+                          break;
+                      }
+                    },
+                  ),
+                ))
+          ]
         ],
       ),
-      body: _buildProductBody(context),
     );
   }