Merge pull request #228 from mdgspace/responsive

ptch: make widgets responsive

lib/data/core/theme/dimensional/dimensional.dart

@@ -7,7 +7,7 @@ abstract class DimensionalPolicies {
   DimensionalPolicies._();
 
   static double get policyRatioForWidth {
-    const designWidth = 375.0;
+    const designWidth = 360.0;
 
     final deviceWidth = () {
       late double width;

lib/presentation/components/app_banner.dart

@@ -1,41 +1,49 @@
+import 'package:appetizer/data/core/theme/dimensional/dimensional.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg_provider/flutter_svg_provider.dart';
 
+import 'dart:math' as math;
+
 class AppBanner extends StatelessWidget {
   const AppBanner({super.key, required this.height, required this.child});
   final double height;
   final Widget child;
 
   @override
   Widget build(BuildContext context) {
-    return Stack(children: [
-      Container(
-        height: height + 12,
-        width: 360,
-        decoration: const BoxDecoration(
-          image: DecorationImage(
-            image: Svg('assets/images/banner.svg'),
-            fit: BoxFit.cover,
+    return Column(
+      children: [
+        Container(
+          height: height + 12.toAutoScaledHeight,
+          width: double.maxFinite,
+          decoration: const BoxDecoration(
+              image: DecorationImage(
+            image: Svg('assets/images/banner.svg'), //path of image
+            fit: BoxFit.fitWidth,
+          )),
+          child: Padding(
+            padding: EdgeInsets.only(
+                top: math.max(32, MediaQuery.of(context).padding.top),
+                bottom: 12),
+            child: child,
           ),
         ),
-        child: child,
-      ),
-      Positioned(
-        bottom: 0,
-        child: Container(
-          height: 12,
-          width: 360,
-          decoration: const ShapeDecoration(
-            color: Colors.white,
-            shape: RoundedRectangleBorder(
-              borderRadius: BorderRadius.only(
-                topLeft: Radius.circular(12),
-                topRight: Radius.circular(12),
+        Transform.translate(
+          offset: Offset(0, -12.toAutoScaledHeight),
+          child: Container(
+            height: 12.toAutoScaledHeight,
+            decoration: ShapeDecoration(
+              color: Colors.white,
+              shape: RoundedRectangleBorder(
+                borderRadius: BorderRadius.only(
+                  topLeft: Radius.circular(12.toAutoScaledWidth),
+                  topRight: Radius.circular(12.toAutoScaledWidth),
+                ),
               ),
             ),
           ),
-        ),
-      )
-    ]);
+        )
+      ],
+    );
   }
 }

lib/presentation/components/black_button.dart

@@ -1,3 +1,4 @@
+import 'package:appetizer/data/core/theme/dimensional/dimensional.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 
@@ -16,25 +17,25 @@ class BlackButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
-      height: 34,
+      height: 34.toAutoScaledHeight,
       width: width,
       decoration: ShapeDecoration(
         color: Colors.black,
         shape: RoundedRectangleBorder(
-          borderRadius: BorderRadius.circular(6),
+          borderRadius: BorderRadius.circular(6.toAutoScaledWidth),
         ),
       ),
       child: TextButton(
         onPressed: onTap,
         child: Text(
           title,
           textAlign: TextAlign.center,
-          style: const TextStyle(
+          style: TextStyle(
             color: Color(0xFFF6F6F6),
-            fontSize: 12,
+            fontSize: 12.toAutoScaledFont,
             fontFamily: 'Lato',
             fontWeight: FontWeight.w700,
-            height: 1.50,
+            height: 1.50.toAutoScaledHeight,
           ),
         ),
       ),

lib/presentation/components/no_data_found_container.dart

@@ -1,4 +1,6 @@
+import 'package:appetizer/data/core/theme/dimensional/dimensional.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
 import 'package:flutter_svg_provider/flutter_svg_provider.dart';
 
 class NoDataFoundContainer extends StatelessWidget {
@@ -13,25 +15,20 @@ class NoDataFoundContainer extends StatelessWidget {
   Widget build(BuildContext context) {
     return Container(
       alignment: Alignment.center,
-      padding: const EdgeInsets.only(top: 150),
+      padding: EdgeInsets.only(top: 150.toAutoScaledHeight),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.center,
         children: [
-          Container(
-            padding: const EdgeInsets.only(top: 150),
-            height: 178,
-            width: 186,
-            decoration: const BoxDecoration(
-              image: DecorationImage(
-                image: Svg('assets/images/no_data_image.svg'),
-              ),
-            ),
+          SizedBox(height: 150.toAutoScaledHeight),
+          SvgPicture.asset(
+            'assets/images/no_data_image.svg',
+            width: 186.toAutoScaledWidth,
           ),
           Text(
             title,
-            style: const TextStyle(
-              color: Color(0xFF111111),
-              fontSize: 18,
+            style: TextStyle(
+              color: const Color(0xFF111111),
+              fontSize: 18.toAutoScaledFont,
               fontFamily: 'Noto Sans',
               fontWeight: FontWeight.w400,
             ),

lib/presentation/components/round_edge_container.dart

@@ -1,6 +1,7 @@
 // Wrap this widget in a GestureDetector and you are good to go!
 
 import 'package:appetizer/app_theme.dart';
+import 'package:appetizer/data/core/theme/dimensional/dimensional.dart';
 import 'package:flutter/material.dart';
 
 class RoundEdgeContainers extends StatelessWidget {
@@ -10,11 +11,13 @@ class RoundEdgeContainers extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
-      height: 34,
-      padding: const EdgeInsets.symmetric(horizontal: 25, vertical: 8),
+      height: 34.toAutoScaledHeight,
+      padding: EdgeInsets.symmetric(
+          horizontal: 25.toAutoScaledWidth, vertical: 8.toAutoScaledHeight),
       decoration: ShapeDecoration(
         color: AppTheme.black11,
-        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(6)),
+        shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(6.toAutoScaledWidth)),
       ),
       child: Row(
         mainAxisSize: MainAxisSize.min,
@@ -33,7 +36,7 @@ class RoundEdgeTextOnlyContainer extends StatelessWidget {
     return RoundEdgeContainers(
       children: [
         Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 8.0),
+          padding: EdgeInsets.symmetric(horizontal: 8.0.toAutoScaledWidth),
           child: Text(
             text,
             style: AppTheme.button,

lib/presentation/components/shadow_container.dart

@@ -1,4 +1,5 @@
 import 'package:appetizer/app_theme.dart';
+import 'package:appetizer/data/core/theme/dimensional/dimensional.dart';
 import 'package:flutter/material.dart';
 
 class ShadowContainer extends StatelessWidget {
@@ -23,14 +24,14 @@ class ShadowContainer extends StatelessWidget {
       decoration: ShapeDecoration(
         color: Colors.white,
         shape: RoundedRectangleBorder(
-          borderRadius: BorderRadius.circular(10),
+          borderRadius: BorderRadius.circular(10.toAutoScaledWidth),
         ),
         shadows: [
           BoxShadow(
             color: AppTheme.shadowColor,
-            blurRadius: 12,
+            blurRadius: 12.toAutoScaledWidth,
             offset: Offset(offset, offset),
-            spreadRadius: 1,
+            spreadRadius: 1.toAutoScaledWidth,
           )
         ],
       ),

lib/presentation/coupons/components/coupon_card.dart

@@ -1,3 +1,4 @@
+import 'package:appetizer/data/core/theme/dimensional/dimensional.dart';
 import 'package:appetizer/domain/models/coupon/coupon.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
@@ -12,71 +13,65 @@ class CouponCard extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Container(
-      width: 129,
-      height: 61,
-      constraints: const BoxConstraints(maxHeight: 61),
-      child: Row(
-        mainAxisSize: MainAxisSize.min,
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          Container(
-            decoration: const BoxDecoration(
-              color: Color.fromARGB(255, 255, 255, 255),
-            ),
-            width: 28,
-            height: 61,
-            child: SvgPicture.asset('assets/images/coupon.svg'),
+    return Row( //TODO: test if parent widget required or not
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Container(
+          decoration: const BoxDecoration(
+            color: Color.fromARGB(255, 255, 255, 255),
           ),
-          Container(
-            width: 101,
-            height: 61,
-            padding: const EdgeInsets.only(
-              top: 12,
-              left: 8,
-              right: 10,
-              bottom: 12,
-            ),
-            decoration: const ShapeDecoration(
-              color: Color.fromARGB(255, 255, 255, 255),
-              shape: RoundedRectangleBorder(
-                borderRadius: BorderRadius.only(
-                  topLeft: Radius.zero,
-                  topRight: Radius.circular(12),
-                  bottomLeft: Radius.zero,
-                  bottomRight: Radius.circular(12),
-                ),
+          width: 28.toAutoScaledWidth,
+          height: 61.toAutoScaledHeight,
+          child: SvgPicture.asset('assets/images/coupon.svg'),
+        ),
+        Container(
+          width: 101.toAutoScaledWidth,
+          height: 61.toAutoScaledHeight,
+          padding: EdgeInsets.only(
+            top: 12.toAutoScaledHeight,
+            left: 8.toAutoScaledWidth,
+            right: 10.toAutoScaledWidth,
+            bottom: 12.toAutoScaledHeight,
+          ),
+          decoration: ShapeDecoration(
+            color: Color.fromARGB(255, 255, 255, 255),
+            shape: RoundedRectangleBorder(
+              borderRadius: BorderRadius.only(
+                topLeft: Radius.zero,
+                topRight: Radius.circular(12.toAutoScaledWidth),
+                bottomLeft: Radius.zero,
+                bottomRight: Radius.circular(12.toAutoScaledWidth),
               ),
             ),
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              mainAxisSize: MainAxisSize.min,
-              children: [
-                Text(
-                  coupon.title,
-                  textAlign: TextAlign.left,
-                  style: const TextStyle(
-                    color: Color(0xFF111111),
-                    fontSize: 12,
-                    fontFamily: 'Noto Sans',
-                    fontWeight: FontWeight.w600,
-                  ),
+          ),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Text(
+                coupon.title,
+                textAlign: TextAlign.left,
+                style: TextStyle(
+                  color: Color(0xFF111111),
+                  fontSize: 12.toAutoScaledFont,
+                  fontFamily: 'Noto Sans',
+                  fontWeight: FontWeight.w600,
                 ),
-                const SizedBox(height: 6),
-                Text(
-                  coupon.meal,
-                  style: const TextStyle(
-                    color: Color(0xFF2E2E2E),
-                    fontSize: 10,
-                    fontFamily: 'Noto Sans',
-                    fontWeight: FontWeight.w400,
-                  ),
+              ),
+              SizedBox(height: 6.toAutoScaledHeight),
+              Text(
+                coupon.meal,
+                style: TextStyle(
+                  color: Color(0xFF2E2E2E),
+                  fontSize: 10.toAutoScaledFont,
+                  fontFamily: 'Noto Sans',
+                  fontWeight: FontWeight.w400,
                 ),
-              ],
-            ),
-          )
-        ],
-      ),
+              ),
+            ],
+          ),
+        )
+      ],
     );
   }
 }

lib/presentation/coupons/coupons_view.dart

@@ -1,3 +1,4 @@
+import 'package:appetizer/data/core/theme/dimensional/dimensional.dart';
 import 'package:appetizer/presentation/components/no_data_found_container.dart';
 import 'package:appetizer/presentation/coupons/bloc/coupons_page_bloc.dart';
 import 'package:appetizer/presentation/coupons/components/coupon_card.dart';
@@ -15,17 +16,17 @@ class CouponsPage extends StatelessWidget {
           icon: const Icon(Icons.arrow_back),
           onPressed: () {},
         ),
-        title: const Text(
+        title: Text(
           'Coupons',
           style: TextStyle(
             color: Colors.white,
-            fontSize: 24,
+            fontSize: 24.toAutoScaledFont,
             fontFamily: 'Noto Sans',
             fontWeight: FontWeight.w700,
           ),
         ),
         backgroundColor: const Color(0xFFFFCB74),
-        toolbarHeight: 120,
+        toolbarHeight: 120.toAutoScaledHeight,
       ),
       body: BlocProvider(
         create: (context) => CouponsPageBloc(),
@@ -47,11 +48,12 @@ class CouponsPage extends StatelessWidget {
                     title: 'No coupons selected !');
               }
               return Container(
-                padding: const EdgeInsets.only(left: 32, top: 40),
+                padding: EdgeInsets.only(
+                    left: 32.toAutoScaledWidth, top: 40.toAutoScaledHeight),
                 child: GridView.count(
                   crossAxisCount: 2,
-                  crossAxisSpacing: 39,
-                  mainAxisSpacing: 27,
+                  crossAxisSpacing: 39.toAutoScaledWidth,
+                  mainAxisSpacing: 27.toAutoScaledHeight,
                   children: List.generate(
                     state.coupons.length,
                     (index) => CouponCard(coupon: state.coupons[index]),