responsive btoom navigation

dscnitrourkela · Apr 19, 2020 · 6381bab · 6381bab
1 parent 0382853
commit 6381bab
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 48 deletions.
diff --git a/gogrocy/lib/ui/shared/constants.dart b/gogrocy/lib/ui/shared/constants.dart
@@ -8,22 +8,28 @@ double screenWidth = mediaQueryData.size.width;
 class LoginConfig {
   static double loginTextFieldWidth = 0.842 * screenWidth;
   static double loginTextFieldHeight = 0.842 * screenHeight;
+
   //static double loginIllustrationWidth = 0.956 * screenWidth;
   //static double loginIllustrationHeight = 0.384 * screenHeight;
   static double titleTextSize = 0.071 * screenWidth;
 }
 
-class OnBoardingConfig{
+class OnBoardingConfig {
   static double illustrationWidth = 0.956 * screenWidth;
   static double illustrationHeight = 0.384 * screenHeight;
   static double footerTextSize = 0.047 * screenWidth;
 }
 
 class BottomNavBarConfig {
-  static double bottomNavBarHeight = (70/823) * screenHeight;
+  static double bottomNavBarHeight = (70 / 823) * screenHeight;
   static double bottomNavBarWidth = screenWidth;
-  static double activeIconSize=(66/411)*screenWidth;
-  static double inactiveIconSize=(24/411)*screenWidth;
+  static double activeIconSize = (66 / 411) * screenWidth;
+  static double inactiveIconSize = (24 / 411) * screenWidth;
+  static double buttonPadding = 0.047 * screenWidth;
+  static double buttonOffsetMultiplier = 0.196 * screenWidth;
+  static double bottomPositioningValue = 0.271 * screenWidth;
+  static double customPaintBottomPositionValue = 0.177 * screenWidth;
+  static double customNavBarMaxHeight = 0.177 * screenWidth;
 }
 
 class AppBarConfig {

diff --git a/gogrocy/lib/ui/widgets/bottom_navbar.dart b/gogrocy/lib/ui/widgets/bottom_navbar.dart
@@ -5,7 +5,6 @@ import 'package:gogrocy/ui/widgets/navbar/bottom_navbar.dart';
 import 'package:provider/provider.dart';
 import 'package:gogrocy/ui/shared/constants.dart' as constants;
 
-
 class BottomNavBar extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
@@ -14,7 +13,7 @@ class BottomNavBar extends StatelessWidget {
     return CurvedNavigationBar(
       //key: _bottomNavigationKey,
       index: 0,
-      height: 75,
+      height: constants.BottomNavBarConfig.bottomNavBarHeight,
       items: <Widget>[
         Icon(
           Icons.shopping_cart,
@@ -23,12 +22,12 @@ class BottomNavBar extends StatelessWidget {
         ),
         Icon(
           Icons.explore,
-          size: 35,
+          size: constants.BottomNavBarConfig.inactiveIconSize,
           color: Colors.white,
         ),
         Icon(
           Icons.person,
-          size: 35,
+          size: constants.BottomNavBarConfig.inactiveIconSize,
           color: Colors.white,
         ),
       ],

diff --git a/gogrocy/lib/ui/widgets/navbar/bottom_navbar.dart b/gogrocy/lib/ui/widgets/navbar/bottom_navbar.dart
@@ -19,18 +19,18 @@ class CurvedNavigationBar extends StatefulWidget {
     Key key,
     @required this.items,
     this.index = 0,
-    this.color = Colors.white,
+    this.color = Colors.transparent,
     this.buttonBackgroundColor,
     this.backgroundColor = Colors.blueAccent,
     this.onTap,
     this.animationCurve = Curves.easeOut,
     this.animationDuration = const Duration(milliseconds: 600),
-    this.height = 75.0,
+    this.height,
   })
       : assert(items != null),
         assert(items.length >= 1),
         assert(0 <= index && index < items.length),
-        assert(0 <= height && height <= 75.0),
+        assert(0 <= height && height <= constants.BottomNavBarConfig.customNavBarMaxHeight),
         super(key: key);
 
   @override
@@ -94,14 +94,14 @@ class CurvedNavigationBarState extends State<CurvedNavigationBar>
         .of(context)
         .size;
     return Container(
-      color: widget.backgroundColor,
+      color: Colors.transparent,
       height: widget.height,
       child: Stack(
         overflow: Overflow.visible,
         alignment: Alignment.bottomCenter,
         children: <Widget>[
           Positioned(
-            bottom: -40 - (75.0 - widget.height),
+            bottom: widget.height - constants.BottomNavBarConfig.bottomPositioningValue,
             left: Directionality.of(context) == TextDirection.rtl
                 ? null
                 : _pos * size.width,
@@ -113,13 +113,13 @@ class CurvedNavigationBarState extends State<CurvedNavigationBar>
               child: Transform.translate(
                 offset: Offset(
                   0,
-                  -(1 - _buttonHide) * 80,
+                  -(1 - _buttonHide) * constants.BottomNavBarConfig.buttonOffsetMultiplier,
                 ),
                 child: Material(
                   color: widget.buttonBackgroundColor ?? widget.color,
                   type: MaterialType.circle,
                   child: Padding(
-                    padding: EdgeInsets.all(15.0),
+                    padding: EdgeInsets.all(constants.BottomNavBarConfig.buttonPadding),
                     child: Center(child: _icon,),
                   ),
                 ),
@@ -129,12 +129,13 @@ class CurvedNavigationBarState extends State<CurvedNavigationBar>
           Positioned(
             left: 0,
             right: 0,
-            bottom: 0 - (75.0- widget.height),
+            bottom: widget.height-constants.BottomNavBarConfig.customPaintBottomPositionValue,
             child: CustomPaint(
               painter: NavCustomPainter(
                   _pos, _length, widget.color, Directionality.of(context)),
               child: Container(
-                height: constants.BottomNavBarConfig.bottomNavBarHeight,
+                height: constants.BottomNavBarConfig.customNavBarMaxHeight,
+                color: Colors.transparent,
               ),
             ),
           ),
@@ -143,7 +144,7 @@ class CurvedNavigationBarState extends State<CurvedNavigationBar>
             right: 0,
             bottom: 0 - (75 - widget.height),
             child: SizedBox(
-                height: 70.0,
+                height: 75.0,
                 child: Row(
                     children: widget.items.map((item) {
                       return NavButton(
@@ -176,32 +177,4 @@ class CurvedNavigationBarState extends State<CurvedNavigationBar>
           duration: widget.animationDuration, curve: widget.animationCurve);
     });
   }
-}
-
-class MyClipper extends CustomClipper<Path> {
-  final double left;
-  final double radius;
-  final int itemsLength;
-  final AnimationController controller;
-
-  MyClipper(this.left, this.radius, this.controller, this.itemsLength);
-
-  @override
-  Path getClip(Size size) {
-    Path path = Path();
-    path.moveTo(0, 0);
-    path.lineTo(left + 42, 0);
-    path.arcToPoint(Offset(left + radius * 2, 0),
-        clockwise: false, radius: Radius.circular(1));
-    path.lineTo(size.width, 0);
-    path.lineTo(size.width, size.height);
-    path.lineTo(0, size.height);
-    path.close();
-    return path;
-  }
-
-  @override
-  bool shouldReclip(CustomClipper<Path> oldClipper) {
-    return true;
-  }
-}
+}
diff --git a/gogrocy/lib/ui/widgets/navbar/nav_button.dart b/gogrocy/lib/ui/widgets/navbar/nav_button.dart
@@ -22,10 +22,11 @@ class NavButton extends StatelessWidget {
           onTap(index);
         },
         child: Container(
+            color: Colors.transparent,
             height: 75.0,
             child: Transform.translate(
               offset: Offset(
-                  0, difference < 1.0 / length ? verticalAlignment * 50 : 0),
+                  0, difference < 1.0 / length ? verticalAlignment * 70 : 0),
               child: Opacity(
                   opacity: difference < 1.0 / length * 0.99 ? opacity : 1.0,
                   child: child),