{"id":12382,"date":"2024-07-04T09:26:08","date_gmt":"2024-07-04T09:26:08","guid":{"rendered":"https:\/\/www.webmasterindia.com\/blog\/?post_type=web-story&#038;p=12382"},"modified":"2025-06-24T08:07:41","modified_gmt":"2025-06-24T08:07:41","slug":"building-responsive-ui-mobile-app-flutter-tips-tricks","status":"publish","type":"web-story","link":"https:\/\/www.opalinfotech.com\/blog\/web-stories\/building-responsive-ui-mobile-app-flutter-tips-tricks","title":{"rendered":"Building a Responsive UI Mobile App with Flutter: Tips and Tricks"},"content":{"rendered":"<html amp=\"\" lang=\"en\"><head><meta charSet=\"utf-8\"\/><meta name=\"viewport\" content=\"width=device-width,minimum-scale=1,initial-scale=1\"\/><script async=\"\" src=\"https:\/\/cdn.ampproject.org\/v0.js\"><\/script><script async=\"\" src=\"https:\/\/cdn.ampproject.org\/v0\/amp-story-1.0.js\" custom-element=\"amp-story\"><\/script><link href=\"https:\/\/fonts.googleapis.com\/css2?display=swap&amp;family=Source+Serif+4%3Awght%40700&amp;family=Work+Sans\" rel=\"stylesheet\"\/><style amp-boilerplate=\"\">body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}<\/style><noscript><style amp-boilerplate=\"\">body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}<\/style><\/noscript><style amp-custom=\"\">\n              h1, h2, h3 { font-weight: normal; }\n\n              amp-story-page {\n                background-color: #131516;\n              }\n\n              amp-story-grid-layer {\n                overflow: visible;\n              }\n\n              @media (max-aspect-ratio: 9 \/ 16)  {\n                @media (min-aspect-ratio: 320 \/ 678) {\n                  amp-story-grid-layer.grid-layer {\n                    margin-top: calc((100% \/ 0.5625 - 100% \/ 0.6666666666666666) \/ 2);\n                  }\n                }\n              }\n          \n              @media not all and (min-resolution:.001dpcm) {\n                @media {\n                  p.text-wrapper > span {\n                    font-size: calc(100% - 0.5px);\n                  }\n                }\n              }\n\n              .page-fullbleed-area,\n              .page-background-overlay-area {\n                position: absolute;\n                overflow: hidden;\n                width: 100%;\n                left: 0;\n                height: calc(1.1851851851851851 * 100%);\n                top: calc((1 - 1.1851851851851851) * 100% \/ 2);\n              }\n\n              .element-overlay-area {\n                position: absolute;\n                width: 100%;\n                height: 100%;\n                top: 0;\n                left: 0;\n              }\n\n              .page-safe-area {\n                overflow: visible;\n                position: absolute;\n                top: 0;\n                bottom: 0;\n                left: 0;\n                right: 0;\n                width: 100%;\n                height: calc(0.84375 * 100%);\n                margin: auto 0;\n              }\n\n              .mask {\n                position: absolute;\n                overflow: hidden;\n              }\n\n              .fill {\n                position: absolute;\n                top: 0;\n                left: 0;\n                right: 0;\n                bottom: 0;\n                margin: 0;\n              }\n\n              @media (prefers-reduced-motion: no-preference) {\n                .animation-wrapper {\n                  opacity: var(--initial-opacity);\n                  transform: var(--initial-transform);\n                }\n              }\n\n              amp-story-grid-layer.align-bottom {\n                align-content: end;\n                padding: 0;\n                \/*\n                  AMP CTA Layer will exactly occupy 74px regardless of any device.\n                  To space out captions 74px from the BOTTOM (AMP CTA Layer),\n                  74px from the TOP should also be spaced out and thus: 2 * 74px\n                  will be the desired max-height.\n                *\/\n                max-height: calc(100vh - (2 * 74px));\n              }\n\n              .captions-area {\n                padding: 0 32px 0;\n              }\n\n              amp-story-captions {\n                margin-bottom: 16px;\n                text-align: center;\n              }\n\n              amp-story-audio-sticker {\n                height: 100%;\n              }\n\n              .audio-sticker {\n                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;\n              }\n              <\/style><meta name=\"web-stories-replace-head-start\"\/><title>Building a Responsive UI Mobile App with Flutter: Tips and Tricks<\/title><link rel=\"canonical\" href=\"https:\/\/www.opalinfotech.com\/blog\/web-stories\/building-responsive-ui-mobile-app-flutter-tips-tricks\/\"\/><meta name=\"web-stories-replace-head-end\"\/><\/head><body><amp-story standalone=\"\" publisher=\"Webmasterindia\" publisher-logo-src=\"https:\/\/www.opalinfotech.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-logo-2-1.png\" title=\"Building a Responsive UI Mobile App with Flutter: Tips and Tricks\" poster-portrait-src=\"https:\/\/www.opalinfotech.com\/blog\/wp-content\/uploads\/2024\/06\/cropped-flutter-1.jpg\"><amp-story-page id=\"dbc6b0ee-b102-434f-847b-f652ffc38607\" auto-advance-after=\"7s\"><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><div class=\"page-fullbleed-area\" style=\"background-color:#fff\"><div class=\"page-safe-area\"><div style=\"position:absolute;pointer-events:none;left:0;top:-9.25926%;width:100%;height:118.51852%;opacity:1\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-7b1ccfb0-8b43-40ec-9e10-804e98c2fea3\"><div class=\"fill\" style=\"will-change:transform\"><\/div><\/div><\/div><\/div><\/div><\/amp-story-grid-layer><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><div class=\"page-fullbleed-area\"><div class=\"page-safe-area\"><div style=\"position:absolute;pointer-events:none;left:-1.94175%;top:-114.88673%;width:204.36893%;height:136.24595%;transform:rotate(69deg);opacity:1\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;clip-path:url(#el-5027b4d7-7609-43c4-9557-61acf1dfa6ad);-webkit-clip-path:url(#el-5027b4d7-7609-43c4-9557-61acf1dfa6ad)\" class=\"mask\"><svg width=\"0\" height=\"0\"><defs><clipPath id=\"el-5027b4d7-7609-43c4-9557-61acf1dfa6ad\" transform=\"scale(1 1.01704694)\" clipPathUnits=\"objectBoundingBox\"><path d=\"M 0.157040 , 0.886024 C 0.081227 , 0.837803 , 0.030944 , 0.761733 , 0.009541 , 0.687983 c -0.023724 -0.081485 -0.006704 -0.152140 , 0.084580 -0.190562 c 0.095152 -0.039969 , 0.144404 -0.089479 , 0.182568 -0.125322 c 0.069108 -0.064724 , 0.073749 -0.121196 , 0.101857 -0.181795 c 0.021919 -0.047189 , 0.063950 -0.091542 , 0.161939 -0.142084 c 0.095926 -0.049510 , 0.175090 -0.063693 , 0.240330 -0.028623 c 0.056730 , 0.030428 , 0.102114 , 0.097473 , 0.142341 , 0.194172 c 0.025529 , 0.060598 , 0.044611 , 0.135121 , 0.065498 , 0.222537 c 0.016503 , 0.070139 , 0.014183 , 0.134605 -0.004126 , 0.194430 c -0.019082 , 0.062919 -0.045900 , 0.125580 -0.096699 , 0.172254 c -0.047705 , 0.043837 -0.119907 , 0.065498 -0.190046 , 0.091542 c -0.069881 , 0.025786 -0.122744 , 0.055441 -0.173801 , 0.068076 c -0.072976 , 0.017793 -0.134348 , 0.028107 -0.193914 , 0.014956 C 0.276173 , 0.965188 , 0.224342 , 0.928314 , 0.157040 , 0.886024 z\"><\/path><\/clipPath><\/defs><\/svg><div class=\"fill\" style=\"background-color:#fdf5dc;will-change:transform\"><\/div><\/div><\/div><div style=\"position:absolute;pointer-events:none;left:-3.64078%;top:83.33333%;width:129.12621%;height:86.08414%;transform:rotate(73deg);opacity:1\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;clip-path:url(#el-1d2f1f66-f966-4f3c-8da9-f338cb8ce908);-webkit-clip-path:url(#el-1d2f1f66-f966-4f3c-8da9-f338cb8ce908)\" class=\"mask\"><svg width=\"0\" height=\"0\"><defs><clipPath id=\"el-1d2f1f66-f966-4f3c-8da9-f338cb8ce908\" transform=\"scale(1 1.01704694)\" clipPathUnits=\"objectBoundingBox\"><path d=\"M 0.157040 , 0.886024 C 0.081227 , 0.837803 , 0.030944 , 0.761733 , 0.009541 , 0.687983 c -0.023724 -0.081485 -0.006704 -0.152140 , 0.084580 -0.190562 c 0.095152 -0.039969 , 0.144404 -0.089479 , 0.182568 -0.125322 c 0.069108 -0.064724 , 0.073749 -0.121196 , 0.101857 -0.181795 c 0.021919 -0.047189 , 0.063950 -0.091542 , 0.161939 -0.142084 c 0.095926 -0.049510 , 0.175090 -0.063693 , 0.240330 -0.028623 c 0.056730 , 0.030428 , 0.102114 , 0.097473 , 0.142341 , 0.194172 c 0.025529 , 0.060598 , 0.044611 , 0.135121 , 0.065498 , 0.222537 c 0.016503 , 0.070139 , 0.014183 , 0.134605 -0.004126 , 0.194430 c -0.019082 , 0.062919 -0.045900 , 0.125580 -0.096699 , 0.172254 c -0.047705 , 0.043837 -0.119907 , 0.065498 -0.190046 , 0.091542 c -0.069881 , 0.025786 -0.122744 , 0.055441 -0.173801 , 0.068076 c -0.072976 , 0.017793 -0.134348 , 0.028107 -0.193914 , 0.014956 C 0.276173 , 0.965188 , 0.224342 , 0.928314 , 0.157040 , 0.886024 z\"><\/path><\/clipPath><\/defs><\/svg><div class=\"fill\" style=\"background-color:#1f2a2e;will-change:transform\"><\/div><\/div><\/div><div style=\"position:absolute;pointer-events:none;left:11.65049%;top:20.38835%;width:78.15534%;height:39.15858%;opacity:1\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-60c97102-b69d-46d6-9dba-5186c73ecf9e\"><a href=\"https:\/\/www.opalinfotech.com\/mobile-app-development\/mobile-app-development-using-flutter\" data-tooltip-icon=\"https:\/\/www.opalinfotech.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-logo-2-1-3.png\" data-tooltip-text=\"Flutter Mobile App Development &amp; Maintenance Company\" target=\"_blank\" rel=\"noreferrer\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0\"><h1 class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:1.7673913043478258% 0;font-family:&quot;Source Serif 4&quot;,serif;font-size:0.679612em;line-height:1.1;text-align:center;padding:0;color:#000000\"><span><span style=\"font-weight: 700; color: #1f2a2e\">Building a Responsive UI Mobile App with Flutter: Tips &amp; Tricks<\/span><\/span><\/h1><\/a><\/div><\/div><div style=\"position:absolute;pointer-events:none;left:29.85437%;top:63.59223%;width:41.74757%;height:15.53398%;opacity:1\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-78affc20-d0e8-4cb4-9ae3-e0a5877a6099\"><div style=\"position:absolute;width:101.33598%;height:100%;left:-0.66799%;top:0%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"https:\/\/www.opalinfotech.com\/blog\/wp-content\/uploads\/2024\/04\/Opal-Logo.png\" alt=\"Opal Logo\" srcSet=\"https:\/\/www.opalinfotech.com\/blog\/wp-content\/uploads\/2024\/04\/Opal-Logo.png 2048w,https:\/\/www.opalinfotech.com\/blog\/wp-content\/uploads\/2024\/04\/Opal-Logo-1536x846.png 1536w,https:\/\/www.opalinfotech.com\/blog\/wp-content\/uploads\/2024\/04\/Opal-Logo-1024x564.png 1024w,https:\/\/www.opalinfotech.com\/blog\/wp-content\/uploads\/2024\/04\/Opal-Logo-768x423.png 768w,https:\/\/www.opalinfotech.com\/blog\/wp-content\/uploads\/2024\/04\/Opal-Logo-300x165.png 300w,https:\/\/www.opalinfotech.com\/blog\/wp-content\/uploads\/2024\/04\/Opal-Logo-150x83.png 150w\" sizes=\"(min-width: 1024px) 19vh, 42vw\" disable-inline-width=\"true\"><\/amp-img><\/div><\/div><\/div><\/div><\/div><\/amp-story-grid-layer><\/amp-story-page><amp-story-page id=\"fadb492c-414f-40bc-9e39-0fc74cdc1468\" auto-advance-after=\"7s\"><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-a99e2db7-1b22-48ad-9e7a-6e61081febca\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":600,\"duration\":2000,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-89143bc5-6999-4188-9f80-1c1412919948\",\"keyframes\":{\"transform\":[\"translate3d(-115.18988%, 0px, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":600,\"duration\":2000,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-3d46e350-fbfc-4f83-8484-ea446f490d66\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":1000,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-2c7a3f31-4a43-40f0-8973-e5df58a9cce3\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":1200,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-e06bbcc4-311c-491c-9c2e-62bb974b3334\",\"keyframes\":{\"transform\":[\"translate3d(0px, 1294.77081%, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":1200,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><div class=\"page-fullbleed-area\" style=\"background-color:#fff\"><div class=\"page-safe-area\"><div style=\"position:absolute;pointer-events:none;left:0;top:-9.25926%;width:100%;height:118.51852%;opacity:1\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-a4f25add-9f2a-4588-83bd-777fe014f6a5\"><div class=\"fill\" style=\"will-change:transform\"><\/div><\/div><\/div><\/div><\/div><\/amp-story-grid-layer><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><div class=\"page-fullbleed-area\"><div class=\"page-safe-area\"><div style=\"position:absolute;pointer-events:none;left:-82.28155%;top:57.76699%;width:204.36893%;height:136.24595%;transform:rotate(69deg);opacity:1\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;clip-path:url(#el-164189ef-7b57-4d0a-9523-9e77f666d457);-webkit-clip-path:url(#el-164189ef-7b57-4d0a-9523-9e77f666d457)\" class=\"mask\"><svg width=\"0\" height=\"0\"><defs><clipPath id=\"el-164189ef-7b57-4d0a-9523-9e77f666d457\" transform=\"scale(1 1.01704694)\" clipPathUnits=\"objectBoundingBox\"><path d=\"M 0.157040 , 0.886024 C 0.081227 , 0.837803 , 0.030944 , 0.761733 , 0.009541 , 0.687983 c -0.023724 -0.081485 -0.006704 -0.152140 , 0.084580 -0.190562 c 0.095152 -0.039969 , 0.144404 -0.089479 , 0.182568 -0.125322 c 0.069108 -0.064724 , 0.073749 -0.121196 , 0.101857 -0.181795 c 0.021919 -0.047189 , 0.063950 -0.091542 , 0.161939 -0.142084 c 0.095926 -0.049510 , 0.175090 -0.063693 , 0.240330 -0.028623 c 0.056730 , 0.030428 , 0.102114 , 0.097473 , 0.142341 , 0.194172 c 0.025529 , 0.060598 , 0.044611 , 0.135121 , 0.065498 , 0.222537 c 0.016503 , 0.070139 , 0.014183 , 0.134605 -0.004126 , 0.194430 c -0.019082 , 0.062919 -0.045900 , 0.125580 -0.096699 , 0.172254 c -0.047705 , 0.043837 -0.119907 , 0.065498 -0.190046 , 0.091542 c -0.069881 , 0.025786 -0.122744 , 0.055441 -0.173801 , 0.068076 c -0.072976 , 0.017793 -0.134348 , 0.028107 -0.193914 , 0.014956 C 0.276173 , 0.965188 , 0.224342 , 0.928314 , 0.157040 , 0.886024 z\"><\/path><\/clipPath><\/defs><\/svg><div class=\"fill\" style=\"background-color:#fdf5dc;will-change:transform\"><\/div><\/div><\/div><div style=\"position:absolute;pointer-events:none;left:-14.56311%;top:-53.8835%;width:129.12621%;height:86.08414%;transform:rotate(73deg);opacity:1\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;clip-path:url(#el-5ad9fa55-21f5-495a-a21b-5e22909ed22d);-webkit-clip-path:url(#el-5ad9fa55-21f5-495a-a21b-5e22909ed22d)\" class=\"mask\"><svg width=\"0\" height=\"0\"><defs><clipPath id=\"el-5ad9fa55-21f5-495a-a21b-5e22909ed22d\" transform=\"scale(1 1.01704694)\" clipPathUnits=\"objectBoundingBox\"><path d=\"M 0.157040 , 0.886024 C 0.081227 , 0.837803 , 0.030944 , 0.761733 , 0.009541 , 0.687983 c -0.023724 -0.081485 -0.006704 -0.152140 , 0.084580 -0.190562 c 0.095152 -0.039969 , 0.144404 -0.089479 , 0.182568 -0.125322 c 0.069108 -0.064724 , 0.073749 -0.121196 , 0.101857 -0.181795 c 0.021919 -0.047189 , 0.063950 -0.091542 , 0.161939 -0.142084 c 0.095926 -0.049510 , 0.175090 -0.063693 , 0.240330 -0.028623 c 0.056730 , 0.030428 , 0.102114 , 0.097473 , 0.142341 , 0.194172 c 0.025529 , 0.060598 , 0.044611 , 0.135121 , 0.065498 , 0.222537 c 0.016503 , 0.070139 , 0.014183 , 0.134605 -0.004126 , 0.194430 c -0.019082 , 0.062919 -0.045900 , 0.125580 -0.096699 , 0.172254 c -0.047705 , 0.043837 -0.119907 , 0.065498 -0.190046 , 0.091542 c -0.069881 , 0.025786 -0.122744 , 0.055441 -0.173801 , 0.068076 c -0.072976 , 0.017793 -0.134348 , 0.028107 -0.193914 , 0.014956 C 0.276173 , 0.965188 , 0.224342 , 0.928314 , 0.157040 , 0.886024 z\"><\/path><\/clipPath><\/defs><\/svg><div class=\"fill\" style=\"background-color:#1f2a2e;will-change:transform\"><\/div><\/div><\/div><div style=\"position:absolute;pointer-events:none;left:10.92233%;top:38.02589%;width:78.15534%;height:5.50162%;opacity:1\"><div id=\"anim-2c7a3f31-4a43-40f0-8973-e5df58a9cce3\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\"><div id=\"anim-e06bbcc4-311c-491c-9c2e-62bb974b3334\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(0px, 1294.77081%, 0)\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-b5bfb7fb-ef99-421f-9d46-f1999fda85e7\"><h2 class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:1.052018633540372% 0;font-family:&quot;Source Serif 4&quot;,serif;font-size:0.404531em;line-height:1.1;text-align:center;padding:0;color:#000000\"><span class=\"ez-toc-section\" id=\"focus-on-flex\"><\/span><span><span style=\"font-weight: 700; color: #1f2a2e\">Focus on Flex<\/span><\/span><span class=\"ez-toc-section-end\"><\/span><\/h2><\/div><\/div><\/div><\/div><div style=\"position:absolute;pointer-events:none;left:11.65049%;top:45.79288%;width:76.69903%;height:26.21359%;opacity:1\"><div id=\"anim-a99e2db7-1b22-48ad-9e7a-6e61081febca\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\"><div id=\"anim-89143bc5-6999-4188-9f80-1c1412919948\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(-115.18988%, 0px, 0)\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-537bb3ac-e1f8-488f-ae8c-6dd4df16bc58\"><p class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:-0.3617088607594939% 0;font-family:&quot;Work Sans&quot;,sans-serif;font-size:0.291262em;line-height:1.3;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #2b393e\">Flutter&#8217;s Expanded and Flexible widgets are &nbsp;for responsive layouts on mobile. They distribute available space proportionally within a row or column, ensuring elements resize and adapt to different screen sizes.<\/span><\/span><\/p><\/div><\/div><\/div><\/div><div style=\"position:absolute;pointer-events:none;left:10.67961%;top:15.53398%;width:78.15534%;height:12.13592%;opacity:1\"><div id=\"anim-3d46e350-fbfc-4f83-8484-ea446f490d66\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-6fb58dc5-7445-44d0-9b9b-2310e21bd1b3\"><h2 class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:2.3144409937888186% 0;font-family:&quot;Source Serif 4&quot;,serif;font-size:0.889968em;line-height:1.1;text-align:center;padding:0;color:#000000\"><span class=\"ez-toc-section\" id=\"1\"><\/span><span><span style=\"font-weight: 700; color: #fff\">1<\/span><\/span><span class=\"ez-toc-section-end\"><\/span><\/h2><\/div><\/div><\/div><\/div><\/div><\/amp-story-grid-layer><\/amp-story-page><amp-story-page id=\"d7874fdf-d1ef-4f4e-989f-83e1b6a39fc0\" auto-advance-after=\"7s\"><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-151c334a-f9a1-4f4c-aecf-bcc6322e5ec1\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":1200,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-9992c511-d432-4584-b018-8b1658dab677\",\"keyframes\":{\"transform\":[\"translate3d(0px, 698.76577%, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":1200,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-1cb7a848-abf5-4c6c-821a-64464839d42b\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":600,\"duration\":2000,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-036fdaa6-5924-408c-a12b-1a57b6e3eeed\",\"keyframes\":{\"transform\":[\"translate3d(-115.18988%, 0px, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":600,\"duration\":2000,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-642cc1b0-7b14-401d-a8a9-9cce924a856c\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":1000,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><div class=\"page-fullbleed-area\" style=\"background-color:#fff\"><div class=\"page-safe-area\"><div style=\"position:absolute;pointer-events:none;left:0;top:-9.25926%;width:100%;height:118.51852%;opacity:1\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-b9ba6b26-91e3-495b-b92d-94f86959edb6\"><div class=\"fill\" style=\"will-change:transform\"><\/div><\/div><\/div><\/div><\/div><\/amp-story-grid-layer><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><div class=\"page-fullbleed-area\"><div class=\"page-safe-area\"><div style=\"position:absolute;pointer-events:none;left:-82.28155%;top:57.76699%;width:204.36893%;height:136.24595%;transform:rotate(69deg);opacity:1\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;clip-path:url(#el-b4816274-0e80-4b4f-bc23-493ed1ebf12f);-webkit-clip-path:url(#el-b4816274-0e80-4b4f-bc23-493ed1ebf12f)\" class=\"mask\"><svg width=\"0\" height=\"0\"><defs><clipPath id=\"el-b4816274-0e80-4b4f-bc23-493ed1ebf12f\" transform=\"scale(1 1.01704694)\" clipPathUnits=\"objectBoundingBox\"><path d=\"M 0.157040 , 0.886024 C 0.081227 , 0.837803 , 0.030944 , 0.761733 , 0.009541 , 0.687983 c -0.023724 -0.081485 -0.006704 -0.152140 , 0.084580 -0.190562 c 0.095152 -0.039969 , 0.144404 -0.089479 , 0.182568 -0.125322 c 0.069108 -0.064724 , 0.073749 -0.121196 , 0.101857 -0.181795 c 0.021919 -0.047189 , 0.063950 -0.091542 , 0.161939 -0.142084 c 0.095926 -0.049510 , 0.175090 -0.063693 , 0.240330 -0.028623 c 0.056730 , 0.030428 , 0.102114 , 0.097473 , 0.142341 , 0.194172 c 0.025529 , 0.060598 , 0.044611 , 0.135121 , 0.065498 , 0.222537 c 0.016503 , 0.070139 , 0.014183 , 0.134605 -0.004126 , 0.194430 c -0.019082 , 0.062919 -0.045900 , 0.125580 -0.096699 , 0.172254 c -0.047705 , 0.043837 -0.119907 , 0.065498 -0.190046 , 0.091542 c -0.069881 , 0.025786 -0.122744 , 0.055441 -0.173801 , 0.068076 c -0.072976 , 0.017793 -0.134348 , 0.028107 -0.193914 , 0.014956 C 0.276173 , 0.965188 , 0.224342 , 0.928314 , 0.157040 , 0.886024 z\"><\/path><\/clipPath><\/defs><\/svg><div class=\"fill\" style=\"background-color:#fdf5dc;will-change:transform\"><\/div><\/div><\/div><div style=\"position:absolute;pointer-events:none;left:-14.56311%;top:-53.8835%;width:129.12621%;height:86.08414%;transform:rotate(73deg);opacity:1\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;clip-path:url(#el-53107c97-3556-4fc4-8a04-5acb881380c9);-webkit-clip-path:url(#el-53107c97-3556-4fc4-8a04-5acb881380c9)\" class=\"mask\"><svg width=\"0\" height=\"0\"><defs><clipPath id=\"el-53107c97-3556-4fc4-8a04-5acb881380c9\" transform=\"scale(1 1.01704694)\" clipPathUnits=\"objectBoundingBox\"><path d=\"M 0.157040 , 0.886024 C 0.081227 , 0.837803 , 0.030944 , 0.761733 , 0.009541 , 0.687983 c -0.023724 -0.081485 -0.006704 -0.152140 , 0.084580 -0.190562 c 0.095152 -0.039969 , 0.144404 -0.089479 , 0.182568 -0.125322 c 0.069108 -0.064724 , 0.073749 -0.121196 , 0.101857 -0.181795 c 0.021919 -0.047189 , 0.063950 -0.091542 , 0.161939 -0.142084 c 0.095926 -0.049510 , 0.175090 -0.063693 , 0.240330 -0.028623 c 0.056730 , 0.030428 , 0.102114 , 0.097473 , 0.142341 , 0.194172 c 0.025529 , 0.060598 , 0.044611 , 0.135121 , 0.065498 , 0.222537 c 0.016503 , 0.070139 , 0.014183 , 0.134605 -0.004126 , 0.194430 c -0.019082 , 0.062919 -0.045900 , 0.125580 -0.096699 , 0.172254 c -0.047705 , 0.043837 -0.119907 , 0.065498 -0.190046 , 0.091542 c -0.069881 , 0.025786 -0.122744 , 0.055441 -0.173801 , 0.068076 c -0.072976 , 0.017793 -0.134348 , 0.028107 -0.193914 , 0.014956 C 0.276173 , 0.965188 , 0.224342 , 0.928314 , 0.157040 , 0.886024 z\"><\/path><\/clipPath><\/defs><\/svg><div class=\"fill\" style=\"background-color:#1f2a2e;will-change:transform\"><\/div><\/div><\/div><div style=\"position:absolute;pointer-events:none;left:10.92233%;top:38.02589%;width:78.15534%;height:10.19417%;opacity:1\"><div id=\"anim-151c334a-f9a1-4f4c-aecf-bcc6322e5ec1\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\"><div id=\"anim-9992c511-d432-4584-b018-8b1658dab677\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(0px, 698.76577%, 0)\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-9e58d875-f263-4a2a-b6d1-b8a87c6c290a\"><h2 class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:1.052018633540372% 0;font-family:&quot;Source Serif 4&quot;,serif;font-size:0.404531em;line-height:1.1;text-align:center;padding:0;color:#000000\"><span class=\"ez-toc-section\" id=\"prioritize-for-small-screens\"><\/span><span><span style=\"font-weight: 700; color: #1f2a2e\">Prioritize for&nbsp;<\/span>\n<span style=\"font-weight: 700; color: #1f2a2e\">Small Screens<\/span><\/span><span class=\"ez-toc-section-end\"><\/span><\/h2><\/div><\/div><\/div><\/div><div style=\"position:absolute;pointer-events:none;left:11.65049%;top:50%;width:76.69903%;height:26.21359%;opacity:1\"><div id=\"anim-1cb7a848-abf5-4c6c-821a-64464839d42b\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\"><div id=\"anim-036fdaa6-5924-408c-a12b-1a57b6e3eeed\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(-115.18988%, 0px, 0)\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-a34a793c-fa7a-4904-9949-d5f3d9c63281\"><a href=\"https:\/\/www.opalinfotech.com\/web-design\/responsive-web-design-mobile-website\" data-tooltip-icon=\"https:\/\/www.opalinfotech.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-logo-2-1-3.png\" data-tooltip-text=\"Responsive Web Design Services by Expert Designers Company\" target=\"_blank\" rel=\"noreferrer\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0\"><p class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:-0.3617088607594939% 0;font-family:&quot;Work Sans&quot;,sans-serif;font-size:0.291262em;line-height:1.3;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #2b393e\">Design your UI with small screens in mind first. This ensures core functionalities and content display well on the most common mobile form factor. Larger screens can then be enhanced with additional features or layouts.<\/span><\/span><\/p><\/a><\/div><\/div><\/div><\/div><div style=\"position:absolute;pointer-events:none;left:10.67961%;top:15.53398%;width:78.15534%;height:12.29773%;opacity:1\"><div id=\"anim-642cc1b0-7b14-401d-a8a9-9cce924a856c\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-5cabeed7-e7c2-48a5-8419-8852f608c747\"><h2 class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:2.3144409937888186% 0;font-family:&quot;Source Serif 4&quot;,serif;font-size:0.889968em;line-height:1.1;text-align:center;padding:0;color:#000000\"><span class=\"ez-toc-section\" id=\"2\"><\/span><span><span style=\"font-weight: 700; color: #fff\">2<\/span><\/span><span class=\"ez-toc-section-end\"><\/span><\/h2><\/div><\/div><\/div><\/div><\/div><\/amp-story-grid-layer><\/amp-story-page><amp-story-page id=\"ad276e4c-d0a0-4ee3-a5d0-a5f61fa8091b\" auto-advance-after=\"7s\"><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-269ee8dd-cda9-4205-99c5-f14ac640410c\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":1200,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-9619643e-1743-4e70-b0e3-17f77614ef6c\",\"keyframes\":{\"transform\":[\"translate3d(0px, 1294.77081%, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":1200,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-e936e706-7d6e-4e61-b501-4b8e3aa9748f\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":600,\"duration\":2000,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-76a0dd75-4374-4d76-b50c-31325692298c\",\"keyframes\":{\"transform\":[\"translate3d(-115.18988%, 0px, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":600,\"duration\":2000,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-00fd3042-1a9a-4625-b3c4-f20a06f2020b\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":1000,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><div class=\"page-fullbleed-area\" style=\"background-color:#fff\"><div class=\"page-safe-area\"><div style=\"position:absolute;pointer-events:none;left:0;top:-9.25926%;width:100%;height:118.51852%;opacity:1\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-2260e4d7-59a6-4f0c-9cdb-188b94a6f23b\"><div class=\"fill\" style=\"will-change:transform\"><\/div><\/div><\/div><\/div><\/div><\/amp-story-grid-layer><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><div class=\"page-fullbleed-area\"><div class=\"page-safe-area\"><div style=\"position:absolute;pointer-events:none;left:-82.28155%;top:57.76699%;width:204.36893%;height:136.24595%;transform:rotate(69deg);opacity:1\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;clip-path:url(#el-adb5701c-4828-42fa-89ce-ca77d3baa101);-webkit-clip-path:url(#el-adb5701c-4828-42fa-89ce-ca77d3baa101)\" class=\"mask\"><svg width=\"0\" height=\"0\"><defs><clipPath id=\"el-adb5701c-4828-42fa-89ce-ca77d3baa101\" transform=\"scale(1 1.01704694)\" clipPathUnits=\"objectBoundingBox\"><path d=\"M 0.157040 , 0.886024 C 0.081227 , 0.837803 , 0.030944 , 0.761733 , 0.009541 , 0.687983 c -0.023724 -0.081485 -0.006704 -0.152140 , 0.084580 -0.190562 c 0.095152 -0.039969 , 0.144404 -0.089479 , 0.182568 -0.125322 c 0.069108 -0.064724 , 0.073749 -0.121196 , 0.101857 -0.181795 c 0.021919 -0.047189 , 0.063950 -0.091542 , 0.161939 -0.142084 c 0.095926 -0.049510 , 0.175090 -0.063693 , 0.240330 -0.028623 c 0.056730 , 0.030428 , 0.102114 , 0.097473 , 0.142341 , 0.194172 c 0.025529 , 0.060598 , 0.044611 , 0.135121 , 0.065498 , 0.222537 c 0.016503 , 0.070139 , 0.014183 , 0.134605 -0.004126 , 0.194430 c -0.019082 , 0.062919 -0.045900 , 0.125580 -0.096699 , 0.172254 c -0.047705 , 0.043837 -0.119907 , 0.065498 -0.190046 , 0.091542 c -0.069881 , 0.025786 -0.122744 , 0.055441 -0.173801 , 0.068076 c -0.072976 , 0.017793 -0.134348 , 0.028107 -0.193914 , 0.014956 C 0.276173 , 0.965188 , 0.224342 , 0.928314 , 0.157040 , 0.886024 z\"><\/path><\/clipPath><\/defs><\/svg><div class=\"fill\" style=\"background-color:#fdf5dc;will-change:transform\"><\/div><\/div><\/div><div style=\"position:absolute;pointer-events:none;left:-14.56311%;top:-53.8835%;width:129.12621%;height:86.08414%;transform:rotate(73deg);opacity:1\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;clip-path:url(#el-3c023684-fa14-4162-98f5-d0763a69f8b1);-webkit-clip-path:url(#el-3c023684-fa14-4162-98f5-d0763a69f8b1)\" class=\"mask\"><svg width=\"0\" height=\"0\"><defs><clipPath id=\"el-3c023684-fa14-4162-98f5-d0763a69f8b1\" transform=\"scale(1 1.01704694)\" clipPathUnits=\"objectBoundingBox\"><path d=\"M 0.157040 , 0.886024 C 0.081227 , 0.837803 , 0.030944 , 0.761733 , 0.009541 , 0.687983 c -0.023724 -0.081485 -0.006704 -0.152140 , 0.084580 -0.190562 c 0.095152 -0.039969 , 0.144404 -0.089479 , 0.182568 -0.125322 c 0.069108 -0.064724 , 0.073749 -0.121196 , 0.101857 -0.181795 c 0.021919 -0.047189 , 0.063950 -0.091542 , 0.161939 -0.142084 c 0.095926 -0.049510 , 0.175090 -0.063693 , 0.240330 -0.028623 c 0.056730 , 0.030428 , 0.102114 , 0.097473 , 0.142341 , 0.194172 c 0.025529 , 0.060598 , 0.044611 , 0.135121 , 0.065498 , 0.222537 c 0.016503 , 0.070139 , 0.014183 , 0.134605 -0.004126 , 0.194430 c -0.019082 , 0.062919 -0.045900 , 0.125580 -0.096699 , 0.172254 c -0.047705 , 0.043837 -0.119907 , 0.065498 -0.190046 , 0.091542 c -0.069881 , 0.025786 -0.122744 , 0.055441 -0.173801 , 0.068076 c -0.072976 , 0.017793 -0.134348 , 0.028107 -0.193914 , 0.014956 C 0.276173 , 0.965188 , 0.224342 , 0.928314 , 0.157040 , 0.886024 z\"><\/path><\/clipPath><\/defs><\/svg><div class=\"fill\" style=\"background-color:#1f2a2e;will-change:transform\"><\/div><\/div><\/div><div style=\"position:absolute;pointer-events:none;left:10.92233%;top:38.02589%;width:78.15534%;height:5.50162%;opacity:1\"><div id=\"anim-269ee8dd-cda9-4205-99c5-f14ac640410c\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\"><div id=\"anim-9619643e-1743-4e70-b0e3-17f77614ef6c\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(0px, 1294.77081%, 0)\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-5a7bdc56-f195-4353-b28a-8188ca8c4854\"><h2 class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:1.052018633540372% 0;font-family:&quot;Source Serif 4&quot;,serif;font-size:0.404531em;line-height:1.1;text-align:center;padding:0;color:#000000\"><span class=\"ez-toc-section\" id=\"optimize-navigation\"><\/span><span><span style=\"font-weight: 700; color: #1f2a2e\">Optimize Navigation<\/span><\/span><span class=\"ez-toc-section-end\"><\/span><\/h2><\/div><\/div><\/div><\/div><div style=\"position:absolute;pointer-events:none;left:11.65049%;top:46.44013%;width:76.69903%;height:22.16828%;opacity:1\"><div id=\"anim-e936e706-7d6e-4e61-b501-4b8e3aa9748f\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\"><div id=\"anim-76a0dd75-4374-4d76-b50c-31325692298c\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(-115.18988%, 0px, 0)\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-7cce6532-b5c4-4229-a9aa-1f70cbd780db\"><a href=\"https:\/\/www.opalinfotech.com\/mobile-app-development\/hybrid-mobile-app-development\" data-tooltip-icon=\"https:\/\/www.opalinfotech.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-logo-2-1-3.png\" data-tooltip-text=\"Mobile App Development, Migration, &amp; Maintenance Company\" target=\"_blank\" rel=\"noreferrer\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0\"><p class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:-0.3617088607594939% 0;font-family:&quot;Work Sans&quot;,sans-serif;font-size:0.291262em;line-height:1.3;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #2b393e\">Consider using a bottom navigation bar for mobile apps. They are familiar to users and provide easy access to core functionalities without overwhelming the limited screen space.<\/span><\/span><\/p><\/a><\/div><\/div><\/div><\/div><div style=\"position:absolute;pointer-events:none;left:10.67961%;top:15.53398%;width:78.15534%;height:12.29773%;opacity:1\"><div id=\"anim-00fd3042-1a9a-4625-b3c4-f20a06f2020b\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-5eccad23-ca47-4641-a79c-529084cbcddb\"><h2 class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:2.3144409937888186% 0;font-family:&quot;Source Serif 4&quot;,serif;font-size:0.889968em;line-height:1.1;text-align:center;padding:0;color:#000000\"><span class=\"ez-toc-section\" id=\"3\"><\/span><span><span style=\"font-weight: 700; color: #fff\">3<\/span><\/span><span class=\"ez-toc-section-end\"><\/span><\/h2><\/div><\/div><\/div><\/div><\/div><\/amp-story-grid-layer><\/amp-story-page><amp-story-page id=\"adc1974a-64fb-493b-ab7c-13b1e3a0487e\" auto-advance-after=\"7s\"><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-57eeced5-4e71-430c-b8a1-aa9f4abbd4af\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":1200,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-e563a7f0-1327-415c-9f53-cf35ceb7b33d\",\"keyframes\":{\"transform\":[\"translate3d(0px, 1294.77081%, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":1200,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-229044fe-d797-4fe1-9770-3395056bdb6b\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":600,\"duration\":2000,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-a33c1a59-b84a-4f70-8cda-1f88d9187ed1\",\"keyframes\":{\"transform\":[\"translate3d(-115.18988%, 0px, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":600,\"duration\":2000,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-183b7fb3-1afe-40f2-9bad-63af97658f16\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":1000,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><div class=\"page-fullbleed-area\" style=\"background-color:#fff\"><div class=\"page-safe-area\"><div style=\"position:absolute;pointer-events:none;left:0;top:-9.25926%;width:100%;height:118.51852%;opacity:1\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-8011a99b-0fa9-4800-a326-2e63537e2495\"><div class=\"fill\" style=\"will-change:transform\"><\/div><\/div><\/div><\/div><\/div><\/amp-story-grid-layer><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><div class=\"page-fullbleed-area\"><div class=\"page-safe-area\"><div style=\"position:absolute;pointer-events:none;left:-82.28155%;top:57.76699%;width:204.36893%;height:136.24595%;transform:rotate(69deg);opacity:1\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;clip-path:url(#el-fe3b74e5-27ba-43ed-ab89-c5e2e9a5f7eb);-webkit-clip-path:url(#el-fe3b74e5-27ba-43ed-ab89-c5e2e9a5f7eb)\" class=\"mask\"><svg width=\"0\" height=\"0\"><defs><clipPath id=\"el-fe3b74e5-27ba-43ed-ab89-c5e2e9a5f7eb\" transform=\"scale(1 1.01704694)\" clipPathUnits=\"objectBoundingBox\"><path d=\"M 0.157040 , 0.886024 C 0.081227 , 0.837803 , 0.030944 , 0.761733 , 0.009541 , 0.687983 c -0.023724 -0.081485 -0.006704 -0.152140 , 0.084580 -0.190562 c 0.095152 -0.039969 , 0.144404 -0.089479 , 0.182568 -0.125322 c 0.069108 -0.064724 , 0.073749 -0.121196 , 0.101857 -0.181795 c 0.021919 -0.047189 , 0.063950 -0.091542 , 0.161939 -0.142084 c 0.095926 -0.049510 , 0.175090 -0.063693 , 0.240330 -0.028623 c 0.056730 , 0.030428 , 0.102114 , 0.097473 , 0.142341 , 0.194172 c 0.025529 , 0.060598 , 0.044611 , 0.135121 , 0.065498 , 0.222537 c 0.016503 , 0.070139 , 0.014183 , 0.134605 -0.004126 , 0.194430 c -0.019082 , 0.062919 -0.045900 , 0.125580 -0.096699 , 0.172254 c -0.047705 , 0.043837 -0.119907 , 0.065498 -0.190046 , 0.091542 c -0.069881 , 0.025786 -0.122744 , 0.055441 -0.173801 , 0.068076 c -0.072976 , 0.017793 -0.134348 , 0.028107 -0.193914 , 0.014956 C 0.276173 , 0.965188 , 0.224342 , 0.928314 , 0.157040 , 0.886024 z\"><\/path><\/clipPath><\/defs><\/svg><div class=\"fill\" style=\"background-color:#fdf5dc;will-change:transform\"><\/div><\/div><\/div><div style=\"position:absolute;pointer-events:none;left:-14.56311%;top:-53.8835%;width:129.12621%;height:86.08414%;transform:rotate(73deg);opacity:1\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;clip-path:url(#el-e0fd9438-9cdd-4474-9816-27bed68766ea);-webkit-clip-path:url(#el-e0fd9438-9cdd-4474-9816-27bed68766ea)\" class=\"mask\"><svg width=\"0\" height=\"0\"><defs><clipPath id=\"el-e0fd9438-9cdd-4474-9816-27bed68766ea\" transform=\"scale(1 1.01704694)\" clipPathUnits=\"objectBoundingBox\"><path d=\"M 0.157040 , 0.886024 C 0.081227 , 0.837803 , 0.030944 , 0.761733 , 0.009541 , 0.687983 c -0.023724 -0.081485 -0.006704 -0.152140 , 0.084580 -0.190562 c 0.095152 -0.039969 , 0.144404 -0.089479 , 0.182568 -0.125322 c 0.069108 -0.064724 , 0.073749 -0.121196 , 0.101857 -0.181795 c 0.021919 -0.047189 , 0.063950 -0.091542 , 0.161939 -0.142084 c 0.095926 -0.049510 , 0.175090 -0.063693 , 0.240330 -0.028623 c 0.056730 , 0.030428 , 0.102114 , 0.097473 , 0.142341 , 0.194172 c 0.025529 , 0.060598 , 0.044611 , 0.135121 , 0.065498 , 0.222537 c 0.016503 , 0.070139 , 0.014183 , 0.134605 -0.004126 , 0.194430 c -0.019082 , 0.062919 -0.045900 , 0.125580 -0.096699 , 0.172254 c -0.047705 , 0.043837 -0.119907 , 0.065498 -0.190046 , 0.091542 c -0.069881 , 0.025786 -0.122744 , 0.055441 -0.173801 , 0.068076 c -0.072976 , 0.017793 -0.134348 , 0.028107 -0.193914 , 0.014956 C 0.276173 , 0.965188 , 0.224342 , 0.928314 , 0.157040 , 0.886024 z\"><\/path><\/clipPath><\/defs><\/svg><div class=\"fill\" style=\"background-color:#1f2a2e;will-change:transform\"><\/div><\/div><\/div><div style=\"position:absolute;pointer-events:none;left:10.92233%;top:38.02589%;width:78.15534%;height:5.50162%;opacity:1\"><div id=\"anim-57eeced5-4e71-430c-b8a1-aa9f4abbd4af\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\"><div id=\"anim-e563a7f0-1327-415c-9f53-cf35ceb7b33d\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(0px, 1294.77081%, 0)\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-bd75e7af-e59a-42da-8b84-640b4d906eff\"><h2 class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:1.052018633540372% 0;font-family:&quot;Source Serif 4&quot;,serif;font-size:0.404531em;line-height:1.1;text-align:center;padding:0;color:#000000\"><span class=\"ez-toc-section\" id=\"think-in-single-column\"><\/span><span><span style=\"font-weight: 700; color: #1f2a2e\">Think in Single Column<\/span><\/span><span class=\"ez-toc-section-end\"><\/span><\/h2><\/div><\/div><\/div><\/div><div style=\"position:absolute;pointer-events:none;left:11.65049%;top:46.44013%;width:76.69903%;height:22.16828%;opacity:1\"><div id=\"anim-229044fe-d797-4fe1-9770-3395056bdb6b\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\"><div id=\"anim-a33c1a59-b84a-4f70-8cda-1f88d9187ed1\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(-115.18988%, 0px, 0)\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-193da24c-e20f-4f2e-83a5-1b6043f76ff1\"><p class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:-0.3617088607594939% 0;font-family:&quot;Work Sans&quot;,sans-serif;font-size:0.291262em;line-height:1.3;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #2b393e\">For most mobile views, a single-column layout is a good starting point. This simplifies scrolling and ensures information is presented linearly, improving readability on small screens.<\/span><\/span><\/p><\/div><\/div><\/div><\/div><div style=\"position:absolute;pointer-events:none;left:10.67961%;top:15.53398%;width:78.15534%;height:12.29773%;opacity:1\"><div id=\"anim-183b7fb3-1afe-40f2-9bad-63af97658f16\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-430d02fd-d458-46cd-bbc2-984ef25fda99\"><h2 class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:2.3144409937888186% 0;font-family:&quot;Source Serif 4&quot;,serif;font-size:0.889968em;line-height:1.1;text-align:center;padding:0;color:#000000\"><span class=\"ez-toc-section\" id=\"4\"><\/span><span><span style=\"font-weight: 700; color: #fff\">4<\/span><\/span><span class=\"ez-toc-section-end\"><\/span><\/h2><\/div><\/div><\/div><\/div><\/div><\/amp-story-grid-layer><\/amp-story-page><amp-story-page id=\"99813600-9d4c-402a-8238-0e4b90bdc376\" auto-advance-after=\"7s\"><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-8cb38d3a-119e-4e8b-a4e8-83abc84d58fc\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":1200,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-cfc59324-9a1b-4bee-8cdc-69f02b1615f0\",\"keyframes\":{\"transform\":[\"translate3d(0px, 1294.77081%, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":1200,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-5eb413e4-7cec-46de-8c3f-cadc8e75ae02\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":600,\"duration\":2000,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-6ce11220-9651-4a8b-b6d4-1f51cf47f669\",\"keyframes\":{\"transform\":[\"translate3d(-115.18988%, 0px, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":600,\"duration\":2000,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-59e6408f-7c81-4025-ba3b-ef77eb546fba\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":1000,\"easing\":\"cubic-bezier(0.4, 0.4, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><div class=\"page-fullbleed-area\" style=\"background-color:#fff\"><div class=\"page-safe-area\"><div style=\"position:absolute;pointer-events:none;left:0;top:-9.25926%;width:100%;height:118.51852%;opacity:1\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-e1b896b3-9114-4e58-85cb-fca80992852e\"><div class=\"fill\" style=\"will-change:transform\"><\/div><\/div><\/div><\/div><\/div><\/amp-story-grid-layer><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><div class=\"page-fullbleed-area\"><div class=\"page-safe-area\"><div style=\"position:absolute;pointer-events:none;left:-82.28155%;top:57.76699%;width:204.36893%;height:136.24595%;transform:rotate(69deg);opacity:1\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;clip-path:url(#el-db067f8d-3f07-4928-92e5-4cbd3643142c);-webkit-clip-path:url(#el-db067f8d-3f07-4928-92e5-4cbd3643142c)\" class=\"mask\"><svg width=\"0\" height=\"0\"><defs><clipPath id=\"el-db067f8d-3f07-4928-92e5-4cbd3643142c\" transform=\"scale(1 1.01704694)\" clipPathUnits=\"objectBoundingBox\"><path d=\"M 0.157040 , 0.886024 C 0.081227 , 0.837803 , 0.030944 , 0.761733 , 0.009541 , 0.687983 c -0.023724 -0.081485 -0.006704 -0.152140 , 0.084580 -0.190562 c 0.095152 -0.039969 , 0.144404 -0.089479 , 0.182568 -0.125322 c 0.069108 -0.064724 , 0.073749 -0.121196 , 0.101857 -0.181795 c 0.021919 -0.047189 , 0.063950 -0.091542 , 0.161939 -0.142084 c 0.095926 -0.049510 , 0.175090 -0.063693 , 0.240330 -0.028623 c 0.056730 , 0.030428 , 0.102114 , 0.097473 , 0.142341 , 0.194172 c 0.025529 , 0.060598 , 0.044611 , 0.135121 , 0.065498 , 0.222537 c 0.016503 , 0.070139 , 0.014183 , 0.134605 -0.004126 , 0.194430 c -0.019082 , 0.062919 -0.045900 , 0.125580 -0.096699 , 0.172254 c -0.047705 , 0.043837 -0.119907 , 0.065498 -0.190046 , 0.091542 c -0.069881 , 0.025786 -0.122744 , 0.055441 -0.173801 , 0.068076 c -0.072976 , 0.017793 -0.134348 , 0.028107 -0.193914 , 0.014956 C 0.276173 , 0.965188 , 0.224342 , 0.928314 , 0.157040 , 0.886024 z\"><\/path><\/clipPath><\/defs><\/svg><div class=\"fill\" style=\"background-color:#fdf5dc;will-change:transform\"><\/div><\/div><\/div><div style=\"position:absolute;pointer-events:none;left:-14.56311%;top:-53.8835%;width:129.12621%;height:86.08414%;transform:rotate(73deg);opacity:1\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;clip-path:url(#el-1a08aa77-5bca-492d-9c2b-eecee1cb0c80);-webkit-clip-path:url(#el-1a08aa77-5bca-492d-9c2b-eecee1cb0c80)\" class=\"mask\"><svg width=\"0\" height=\"0\"><defs><clipPath id=\"el-1a08aa77-5bca-492d-9c2b-eecee1cb0c80\" transform=\"scale(1 1.01704694)\" clipPathUnits=\"objectBoundingBox\"><path d=\"M 0.157040 , 0.886024 C 0.081227 , 0.837803 , 0.030944 , 0.761733 , 0.009541 , 0.687983 c -0.023724 -0.081485 -0.006704 -0.152140 , 0.084580 -0.190562 c 0.095152 -0.039969 , 0.144404 -0.089479 , 0.182568 -0.125322 c 0.069108 -0.064724 , 0.073749 -0.121196 , 0.101857 -0.181795 c 0.021919 -0.047189 , 0.063950 -0.091542 , 0.161939 -0.142084 c 0.095926 -0.049510 , 0.175090 -0.063693 , 0.240330 -0.028623 c 0.056730 , 0.030428 , 0.102114 , 0.097473 , 0.142341 , 0.194172 c 0.025529 , 0.060598 , 0.044611 , 0.135121 , 0.065498 , 0.222537 c 0.016503 , 0.070139 , 0.014183 , 0.134605 -0.004126 , 0.194430 c -0.019082 , 0.062919 -0.045900 , 0.125580 -0.096699 , 0.172254 c -0.047705 , 0.043837 -0.119907 , 0.065498 -0.190046 , 0.091542 c -0.069881 , 0.025786 -0.122744 , 0.055441 -0.173801 , 0.068076 c -0.072976 , 0.017793 -0.134348 , 0.028107 -0.193914 , 0.014956 C 0.276173 , 0.965188 , 0.224342 , 0.928314 , 0.157040 , 0.886024 z\"><\/path><\/clipPath><\/defs><\/svg><div class=\"fill\" style=\"background-color:#1f2a2e;will-change:transform\"><\/div><\/div><\/div><div style=\"position:absolute;pointer-events:none;left:10.92233%;top:38.02589%;width:78.15534%;height:5.50162%;opacity:1\"><div id=\"anim-8cb38d3a-119e-4e8b-a4e8-83abc84d58fc\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\"><div id=\"anim-cfc59324-9a1b-4bee-8cdc-69f02b1615f0\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(0px, 1294.77081%, 0)\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-59743f35-4219-435a-9955-7adf39b7caf8\"><h2 class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:1.052018633540372% 0;font-family:&quot;Source Serif 4&quot;,serif;font-size:0.404531em;line-height:1.1;text-align:center;padding:0;color:#000000\"><span class=\"ez-toc-section\" id=\"touch-friendly-elements\"><\/span><span><span style=\"font-weight: 700; color: #1f2a2e\">Touch-Friendly Elements<\/span><\/span><span class=\"ez-toc-section-end\"><\/span><\/h2><\/div><\/div><\/div><\/div><div style=\"position:absolute;pointer-events:none;left:11.65049%;top:46.44013%;width:76.69903%;height:26.21359%;opacity:1\"><div id=\"anim-5eb413e4-7cec-46de-8c3f-cadc8e75ae02\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\"><div id=\"anim-6ce11220-9651-4a8b-b6d4-1f51cf47f669\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(-115.18988%, 0px, 0)\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-cb9f1398-2a4a-4a09-95db-4e55d7210923\"><p class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:-0.3617088607594939% 0;font-family:&quot;Work Sans&quot;,sans-serif;font-size:0.291262em;line-height:1.3;text-align:center;padding:0;color:#000000\"><span><span style=\"color: #2b393e\">Ensure there&#8217;s enough padding and spacing around interactive elements to avoid accidental touches.Increase the hit area of buttons and other interactive elements &nbsp;to tap on smaller screens easily.<\/span><\/span><\/p><\/div><\/div><\/div><\/div><div style=\"position:absolute;pointer-events:none;left:10.67961%;top:15.53398%;width:78.15534%;height:12.29773%;opacity:1\"><div id=\"anim-59e6408f-7c81-4025-ba3b-ef77eb546fba\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-db15850c-7dad-4510-a310-a60e983cc744\"><h2 class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:2.3144409937888186% 0;font-family:&quot;Source Serif 4&quot;,serif;font-size:0.889968em;line-height:1.1;text-align:center;padding:0;color:#000000\"><span class=\"ez-toc-section\" id=\"5\"><\/span><span><span style=\"font-weight: 700; color: #fff\">5<\/span><\/span><span class=\"ez-toc-section-end\"><\/span><\/h2><\/div><\/div><\/div><\/div><\/div><\/amp-story-grid-layer><\/amp-story-page><amp-story-page id=\"48120a49-ceb9-48c5-bc68-28895e981f20\" auto-advance-after=\"7s\"><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-3db416ec-cdc0-4ca9-9a53-e474b8f57503\",\"keyframes\":{\"opacity\":[0,1]},\"delay\":0,\"duration\":1200,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-animation layout=\"nodisplay\" trigger=\"visibility\"><script type=\"application\/json\">[{\"selector\":\"#anim-911c85fc-737f-4502-a578-89f9bd16d505\",\"keyframes\":{\"transform\":[\"translate3d(0px, 192.5073%, 0)\",\"translate3d(0px, 0px, 0)\"]},\"delay\":0,\"duration\":1200,\"easing\":\"cubic-bezier(0.2, 0.6, 0.0, 1)\",\"fill\":\"both\"}]<\/script><\/amp-story-animation><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><div class=\"page-fullbleed-area\" style=\"background-color:#fff\"><div class=\"page-safe-area\"><div style=\"position:absolute;pointer-events:none;left:0;top:-9.25926%;width:100%;height:118.51852%;opacity:1\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-389412ee-bbc9-4a74-92f0-fafb0fe533d8\"><div class=\"fill\" style=\"will-change:transform\"><\/div><\/div><\/div><\/div><\/div><\/amp-story-grid-layer><amp-story-grid-layer template=\"vertical\" aspect-ratio=\"412:618\" class=\"grid-layer\"><div class=\"page-fullbleed-area\"><div class=\"page-safe-area\"><div style=\"position:absolute;pointer-events:none;left:-91.26214%;top:63.43042%;width:204.36893%;height:136.24595%;transform:rotate(69deg);opacity:1\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;clip-path:url(#el-a3be6177-9448-4235-972b-f241ff331c4a);-webkit-clip-path:url(#el-a3be6177-9448-4235-972b-f241ff331c4a)\" class=\"mask\"><svg width=\"0\" height=\"0\"><defs><clipPath id=\"el-a3be6177-9448-4235-972b-f241ff331c4a\" transform=\"scale(1 1.01704694)\" clipPathUnits=\"objectBoundingBox\"><path d=\"M 0.157040 , 0.886024 C 0.081227 , 0.837803 , 0.030944 , 0.761733 , 0.009541 , 0.687983 c -0.023724 -0.081485 -0.006704 -0.152140 , 0.084580 -0.190562 c 0.095152 -0.039969 , 0.144404 -0.089479 , 0.182568 -0.125322 c 0.069108 -0.064724 , 0.073749 -0.121196 , 0.101857 -0.181795 c 0.021919 -0.047189 , 0.063950 -0.091542 , 0.161939 -0.142084 c 0.095926 -0.049510 , 0.175090 -0.063693 , 0.240330 -0.028623 c 0.056730 , 0.030428 , 0.102114 , 0.097473 , 0.142341 , 0.194172 c 0.025529 , 0.060598 , 0.044611 , 0.135121 , 0.065498 , 0.222537 c 0.016503 , 0.070139 , 0.014183 , 0.134605 -0.004126 , 0.194430 c -0.019082 , 0.062919 -0.045900 , 0.125580 -0.096699 , 0.172254 c -0.047705 , 0.043837 -0.119907 , 0.065498 -0.190046 , 0.091542 c -0.069881 , 0.025786 -0.122744 , 0.055441 -0.173801 , 0.068076 c -0.072976 , 0.017793 -0.134348 , 0.028107 -0.193914 , 0.014956 C 0.276173 , 0.965188 , 0.224342 , 0.928314 , 0.157040 , 0.886024 z\"><\/path><\/clipPath><\/defs><\/svg><div class=\"fill\" style=\"background-color:#fdf5dc;will-change:transform\"><\/div><\/div><\/div><div style=\"position:absolute;pointer-events:none;left:24.27184%;top:-121.35922%;width:204.36893%;height:136.24595%;transform:rotate(69deg);opacity:1\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0;clip-path:url(#el-1eeb37b2-1f89-405c-b4b3-7f55aa375e2c);-webkit-clip-path:url(#el-1eeb37b2-1f89-405c-b4b3-7f55aa375e2c)\" class=\"mask\"><svg width=\"0\" height=\"0\"><defs><clipPath id=\"el-1eeb37b2-1f89-405c-b4b3-7f55aa375e2c\" transform=\"scale(1 1.01704694)\" clipPathUnits=\"objectBoundingBox\"><path d=\"M 0.157040 , 0.886024 C 0.081227 , 0.837803 , 0.030944 , 0.761733 , 0.009541 , 0.687983 c -0.023724 -0.081485 -0.006704 -0.152140 , 0.084580 -0.190562 c 0.095152 -0.039969 , 0.144404 -0.089479 , 0.182568 -0.125322 c 0.069108 -0.064724 , 0.073749 -0.121196 , 0.101857 -0.181795 c 0.021919 -0.047189 , 0.063950 -0.091542 , 0.161939 -0.142084 c 0.095926 -0.049510 , 0.175090 -0.063693 , 0.240330 -0.028623 c 0.056730 , 0.030428 , 0.102114 , 0.097473 , 0.142341 , 0.194172 c 0.025529 , 0.060598 , 0.044611 , 0.135121 , 0.065498 , 0.222537 c 0.016503 , 0.070139 , 0.014183 , 0.134605 -0.004126 , 0.194430 c -0.019082 , 0.062919 -0.045900 , 0.125580 -0.096699 , 0.172254 c -0.047705 , 0.043837 -0.119907 , 0.065498 -0.190046 , 0.091542 c -0.069881 , 0.025786 -0.122744 , 0.055441 -0.173801 , 0.068076 c -0.072976 , 0.017793 -0.134348 , 0.028107 -0.193914 , 0.014956 C 0.276173 , 0.965188 , 0.224342 , 0.928314 , 0.157040 , 0.886024 z\"><\/path><\/clipPath><\/defs><\/svg><div class=\"fill\" style=\"background-color:#fdf5dc;will-change:transform\"><\/div><\/div><\/div><div style=\"position:absolute;pointer-events:none;left:10.92233%;top:14.56311%;width:76.69903%;height:49.19094%;opacity:1\"><div id=\"anim-3db416ec-cdc0-4ca9-9a53-e474b8f57503\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:0;--initial-transform:none\"><div id=\"anim-911c85fc-737f-4502-a578-89f9bd16d505\" class=\"animation-wrapper\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0;--initial-opacity:1;--initial-transform:translate3d(0px, 192.5073%, 0)\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" id=\"el-059c2680-8c51-42fd-ad1f-9b2e307bb328\"><a href=\"https:\/\/www.opalinfotech.com\/mobile-app-development\/hybrid-mobile-app-development\" data-tooltip-icon=\"https:\/\/www.opalinfotech.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-logo-2-1-3.png\" data-tooltip-text=\"Mobile App Development, Migration, &amp; Maintenance Company\" target=\"_blank\" rel=\"noreferrer\" style=\"width:100%;height:100%;display:block;position:absolute;top:0;left:0\"><h2 class=\"fill text-wrapper\" style=\"white-space:pre-line;overflow-wrap:break-word;word-break:break-word;margin:1.2863924050632916% 0;font-family:&quot;Source Serif 4&quot;,serif;font-size:0.485437em;line-height:1.1;text-align:center;padding:0;color:#000000\"><span class=\"ez-toc-section\" id=\"building-a-responsive-ui-mobile-app-with-flutter-ensures-your-app-delivers-a-seamless-experience-across-all-devices-discuss-your-project-with-us\"><\/span><span><span style=\"font-weight: 700; color: #1f2a2e\">Building a responsive UI mobile app with Flutter ensures your app delivers a seamless experience across all devices.<\/span>\n<span style=\"font-weight: 700; color: #1f2a2e\">&nbsp;Discuss your project with us<\/span><\/span><span class=\"ez-toc-section-end\"><\/span><\/h2><\/a><\/div><\/div><\/div><\/div><div style=\"position:absolute;pointer-events:none;left:26.33495%;top:68.60841%;width:45.87379%;height:16.66667%;opacity:1\"><div style=\"pointer-events:initial;width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:0\" class=\"mask\" id=\"el-6190bb15-a0ec-4182-89e5-ec27d01642d3\"><div style=\"position:absolute;width:100%;height:101.06567%;left:0%;top:-0.53284%\" data-leaf-element=\"true\"><amp-img layout=\"fill\" src=\"https:\/\/www.opalinfotech.com\/blog\/wp-content\/uploads\/2024\/04\/Opal-Logo.png\" alt=\"Opal Logo\" srcSet=\"https:\/\/www.opalinfotech.com\/blog\/wp-content\/uploads\/2024\/04\/Opal-Logo.png 2048w,https:\/\/www.opalinfotech.com\/blog\/wp-content\/uploads\/2024\/04\/Opal-Logo-1536x846.png 1536w,https:\/\/www.opalinfotech.com\/blog\/wp-content\/uploads\/2024\/04\/Opal-Logo-1024x564.png 1024w,https:\/\/www.opalinfotech.com\/blog\/wp-content\/uploads\/2024\/04\/Opal-Logo-768x423.png 768w,https:\/\/www.opalinfotech.com\/blog\/wp-content\/uploads\/2024\/04\/Opal-Logo-300x165.png 300w,https:\/\/www.opalinfotech.com\/blog\/wp-content\/uploads\/2024\/04\/Opal-Logo-150x83.png 150w\" sizes=\"(min-width: 1024px) 21vh, 46vw\" disable-inline-width=\"true\"><\/amp-img><\/div><\/div><\/div><\/div><\/div><\/amp-story-grid-layer><\/amp-story-page><\/amp-story><\/body><\/html>","protected":false},"excerpt":{"rendered":"<p>Create exceptional mobile app UIs in Flutter that adapt and provide a great user experience on any phone size.<\/p>\n","protected":false},"author":1,"featured_media":12384,"template":"","meta":{"_acf_changed":false,"web_stories_publisher_logo":9105,"web_stories_poster":[],"web_stories_products":[],"footnotes":""},"web_story_category":[81],"web_story_tag":[188,189,109,111,191,192,84,83,86,89,190,202,198,201,187,85,108,110,98,193,88,101,155,157,99],"class_list":["post-12382","web-story","type-web-story","status-publish","has-post-thumbnail","hentry"],"story_data":{"version":47,"pages":[{"elements":[{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"x":1,"y":1,"width":1,"height":1,"mask":{"type":"rectangle"},"isBackground":true,"id":"7b1ccfb0-8b43-40ec-9e10-804e98c2fea3","isDefaultBackground":true,"type":"shape"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":69,"lockAspectRatio":true,"backgroundColor":{"color":{"r":253,"g":245,"b":220}},"x":-8,"y":-710,"width":842,"height":842,"mask":{"type":"blob-2"},"id":"5027b4d7-7609-43c4-9557-61acf1dfa6ad","type":"shape","groupId":null},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":73,"lockAspectRatio":true,"backgroundColor":{"color":{"r":31,"g":42,"b":46}},"x":-15,"y":515,"width":532,"height":532,"mask":{"type":"blob-2"},"id":"1d2f1f66-f966-4f3c-8da9-f338cb8ce908","type":"shape","groupId":null},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Source Serif 4"},"fontSize":42,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.100000000000000088817841970012523233890533447265625,"textAlign":"center","padding":{"horizontal":0,"vertical":0},"x":48,"y":126,"width":322,"height":242,"id":"60c97102-b69d-46d6-9dba-5186c73ecf9e","content":"<span style=\"font-weight: 700; color: #1f2a2e\">Building a Responsive UI Mobile App with Flutter: Tips &amp; Tricks<\/span>","tagName":"h1","type":"text","link":{"needsProxy":false,"url":"https:\/\/www.webmasterindia.com\/mobile-app-development\/mobile-app-development-using-flutter","rel":[],"type":"regular","pageId":null,"icon":"https:\/\/www.webmasterindia.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-logo-2-1-3.png","desc":"Flutter Mobile App Development & Maintenance Company"}},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":false,"scale":100,"focalX":50,"focalY":50,"resource":{"type":"image","mimeType":"image\/png","width":2048,"height":1128,"sizes":{"medium":{"file":"Opal-Logo-300x165.png","width":300,"height":165,"filesize":6379,"mimeType":"image\/png","sourceUrl":"https:\/\/www.webmasterindia.com\/blog\/wp-content\/uploads\/2024\/04\/Opal-Logo-300x165.png"},"large":{"file":"Opal-Logo-1024x564.png","width":1024,"height":564,"filesize":27202,"mimeType":"image\/png","sourceUrl":"https:\/\/www.webmasterindia.com\/blog\/wp-content\/uploads\/2024\/04\/Opal-Logo-1024x564.png"},"thumbnail":{"file":"Opal-Logo-150x150.png","width":150,"height":150,"filesize":4780,"mimeType":"image\/png","sourceUrl":"https:\/\/www.webmasterindia.com\/blog\/wp-content\/uploads\/2024\/04\/Opal-Logo-150x150.png"},"medium_large":{"file":"Opal-Logo-768x423.png","width":768,"height":423,"filesize":20205,"mimeType":"image\/png","sourceUrl":"https:\/\/www.webmasterindia.com\/blog\/wp-content\/uploads\/2024\/04\/Opal-Logo-768x423.png"},"1536x1536":{"file":"Opal-Logo-1536x846.png","width":1536,"height":846,"filesize":51816,"mimeType":"image\/png","sourceUrl":"https:\/\/www.webmasterindia.com\/blog\/wp-content\/uploads\/2024\/04\/Opal-Logo-1536x846.png"},"post-thumbnail":{"file":"Opal-Logo-825x510.png","width":825,"height":510,"filesize":25720,"mimeType":"image\/png","sourceUrl":"https:\/\/www.webmasterindia.com\/blog\/wp-content\/uploads\/2024\/04\/Opal-Logo-825x510.png"},"web-stories-poster-portrait":{"file":"Opal-Logo-640x853.png","width":640,"height":853,"filesize":38188,"mimeType":"image\/png","sourceUrl":"https:\/\/www.webmasterindia.com\/blog\/wp-content\/uploads\/2024\/04\/Opal-Logo-640x853.png"},"web-stories-publisher-logo":{"file":"Opal-Logo-96x96.png","width":96,"height":96,"filesize":2843,"mimeType":"image\/png","sourceUrl":"https:\/\/www.webmasterindia.com\/blog\/wp-content\/uploads\/2024\/04\/Opal-Logo-96x96.png"},"web-stories-thumbnail":{"file":"Opal-Logo-150x83.png","width":150,"height":83,"filesize":3025,"mimeType":"image\/png","sourceUrl":"https:\/\/www.webmasterindia.com\/blog\/wp-content\/uploads\/2024\/04\/Opal-Logo-150x83.png"},"full":{"file":"Opal-Logo.png","width":2048,"height":1128,"mimeType":"image\/png","sourceUrl":"https:\/\/www.webmasterindia.com\/blog\/wp-content\/uploads\/2024\/04\/Opal-Logo.png"}},"isPlaceholder":false,"isExternal":false,"needsProxy":false,"baseColor":"#84848c","blurHash":"U02rgXj[00a},:j[0zWCDif6-=fkEgay^kof","creationDate":"2024-04-16T13:12:40","src":"https:\/\/www.webmasterindia.com\/blog\/wp-content\/uploads\/2024\/04\/Opal-Logo.png","id":9418,"alt":"Opal Logo","local":false},"type":"image","x":123,"y":393,"width":172,"height":96,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"78affc20-d0e8-4cb4-9ae3-e0a5877a6099"}],"backgroundColor":{"color":{"r":255,"g":255,"b":255}},"animations":[],"type":"page","id":"dbc6b0ee-b102-434f-847b-f652ffc38607","pageTemplateType":"list","groups":{"d2e4a7ff-a799-4fe0-9b90-d78d40e0a754":{"name":"Section","isLocked":false,"isCollapsed":true},"311afe47-563f-4e56-94e9-5f932fd8d018":{"name":"Section","isLocked":false,"isCollapsed":true}}},{"elements":[{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"x":1,"y":1,"width":1,"height":1,"mask":{"type":"rectangle"},"isBackground":true,"id":"a4f25add-9f2a-4588-83bd-777fe014f6a5","isDefaultBackground":true,"type":"shape"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":69,"lockAspectRatio":true,"backgroundColor":{"color":{"r":253,"g":245,"b":220}},"x":-339,"y":357,"width":842,"height":842,"mask":{"type":"blob-2"},"id":"164189ef-7b57-4d0a-9523-9e77f666d457","groupId":null,"type":"shape"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":73,"lockAspectRatio":true,"backgroundColor":{"color":{"r":31,"g":42,"b":46}},"x":-60,"y":-333,"width":532,"height":532,"mask":{"type":"blob-2"},"id":"5ad9fa55-21f5-495a-a21b-5e22909ed22d","groupId":null,"type":"shape"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Source Serif 4"},"fontSize":25,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.100000000000000088817841970012523233890533447265625,"textAlign":"center","padding":{"horizontal":0,"vertical":0},"x":45,"y":235,"width":322,"height":34,"id":"b5bfb7fb-ef99-421f-9d46-f1999fda85e7","content":"<span style=\"font-weight: 700; color: #1f2a2e\">Focus on Flex<\/span>","tagName":"h2","type":"text"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Work Sans"},"fontSize":18,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.3000000000000000444089209850062616169452667236328125,"textAlign":"center","padding":{"horizontal":0,"vertical":0},"x":48,"y":283,"width":316,"height":162,"id":"537bb3ac-e1f8-488f-ae8c-6dd4df16bc58","content":"<span style=\"color: #2b393e\">Flutter's Expanded and Flexible widgets are &nbsp;for responsive layouts on mobile. They distribute available space proportionally within a row or column, ensuring elements resize and adapt to different screen sizes.<\/span>","tagName":"p","groupId":null,"type":"text"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Source Serif 4"},"fontSize":55,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.100000000000000088817841970012523233890533447265625,"textAlign":"center","padding":{"horizontal":0,"vertical":0},"x":44,"y":96,"width":322,"height":75,"id":"6fb58dc5-7445-44d0-9b9b-2310e21bd1b3","content":"<span style=\"font-weight: 700; color: #fff\">1<\/span>","tagName":"h2","type":"text"}],"backgroundColor":{"color":{"r":255,"g":255,"b":255}},"animations":[{"id":"5ecaa8ca-0299-4557-bc1a-e0e9a556c724","type":"effect-fly-in","targets":["537bb3ac-e1f8-488f-ae8c-6dd4df16bc58"],"flyInDir":"leftToRight","duration":2000,"delay":600},{"id":"b5dbf356-98d1-467f-a46c-15de5eb9520c","type":"effect-fade-in","duration":1000,"delay":0,"targets":["6fb58dc5-7445-44d0-9b9b-2310e21bd1b3"]},{"id":"a1946abc-9027-4ae9-8c37-292880d3a513","type":"effect-fly-in","flyInDir":"bottomToTop","duration":1200,"delay":0,"targets":["b5bfb7fb-ef99-421f-9d46-f1999fda85e7"]}],"type":"page","id":"fadb492c-414f-40bc-9e39-0fc74cdc1468","pageTemplateType":"list","groups":{"d2e4a7ff-a799-4fe0-9b90-d78d40e0a754":{"name":"Section","isLocked":false,"isCollapsed":true},"311afe47-563f-4e56-94e9-5f932fd8d018":{"name":"Section","isLocked":false,"isCollapsed":true}}},{"elements":[{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"x":1,"y":1,"width":1,"height":1,"mask":{"type":"rectangle"},"isBackground":true,"id":"b9ba6b26-91e3-495b-b92d-94f86959edb6","isDefaultBackground":true,"type":"shape"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":69,"lockAspectRatio":true,"backgroundColor":{"color":{"r":253,"g":245,"b":220}},"x":-339,"y":357,"width":842,"height":842,"mask":{"type":"blob-2"},"id":"b4816274-0e80-4b4f-bc23-493ed1ebf12f","groupId":null,"type":"shape"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":73,"lockAspectRatio":true,"backgroundColor":{"color":{"r":31,"g":42,"b":46}},"x":-60,"y":-333,"width":532,"height":532,"mask":{"type":"blob-2"},"id":"53107c97-3556-4fc4-8a04-5acb881380c9","groupId":null,"type":"shape"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Source Serif 4"},"fontSize":25,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.100000000000000088817841970012523233890533447265625,"textAlign":"center","padding":{"horizontal":0,"vertical":0},"x":45,"y":235,"width":322,"height":63,"id":"9e58d875-f263-4a2a-b6d1-b8a87c6c290a","content":"<span style=\"font-weight: 700; color: #1f2a2e\">Prioritize for&nbsp;<\/span>\n<span style=\"font-weight: 700; color: #1f2a2e\">Small Screens<\/span>","tagName":"h2","type":"text"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Work Sans"},"fontSize":18,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.3000000000000000444089209850062616169452667236328125,"textAlign":"center","padding":{"horizontal":0,"vertical":0},"x":48,"y":309,"width":316,"height":162,"id":"a34a793c-fa7a-4904-9949-d5f3d9c63281","content":"<span style=\"color: #2b393e\">Design your UI with small screens in mind first. This ensures core functionalities and content display well on the most common mobile form factor. Larger screens can then be enhanced with additional features or layouts.<\/span>","tagName":"p","groupId":null,"type":"text","link":{"needsProxy":false,"url":"https:\/\/www.webmasterindia.com\/web-design\/responsive-web-design-mobile-website","rel":[],"type":"regular","pageId":null,"icon":"https:\/\/www.webmasterindia.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-logo-2-1-3.png","desc":"Responsive Web Design Services by Expert Designers Company"}},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Source Serif 4"},"fontSize":55,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.100000000000000088817841970012523233890533447265625,"textAlign":"center","padding":{"horizontal":0,"vertical":0},"x":44,"y":96,"width":322,"height":76,"id":"5cabeed7-e7c2-48a5-8419-8852f608c747","content":"<span style=\"font-weight: 700; color: #fff\">2<\/span>","tagName":"h2","type":"text"}],"backgroundColor":{"color":{"r":255,"g":255,"b":255}},"animations":[{"id":"fc934adb-aad1-438e-b7b8-253fee9a162d","type":"effect-fly-in","flyInDir":"bottomToTop","duration":1200,"delay":0,"targets":["9e58d875-f263-4a2a-b6d1-b8a87c6c290a"]},{"id":"096e8f3f-e615-4e88-972a-0a4e858a9c80","type":"effect-fly-in","targets":["a34a793c-fa7a-4904-9949-d5f3d9c63281"],"flyInDir":"leftToRight","duration":2000,"delay":600},{"id":"62971bbe-347f-419b-87c9-49475f1e2a24","type":"effect-fade-in","duration":1000,"delay":0,"targets":["5cabeed7-e7c2-48a5-8419-8852f608c747"]}],"type":"page","id":"d7874fdf-d1ef-4f4e-989f-83e1b6a39fc0","pageTemplateType":"list","groups":{"d2e4a7ff-a799-4fe0-9b90-d78d40e0a754":{"name":"Section","isLocked":false,"isCollapsed":true},"311afe47-563f-4e56-94e9-5f932fd8d018":{"name":"Section","isLocked":false,"isCollapsed":true}}},{"elements":[{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"x":1,"y":1,"width":1,"height":1,"mask":{"type":"rectangle"},"isBackground":true,"id":"2260e4d7-59a6-4f0c-9cdb-188b94a6f23b","isDefaultBackground":true,"type":"shape"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":69,"lockAspectRatio":true,"backgroundColor":{"color":{"r":253,"g":245,"b":220}},"x":-339,"y":357,"width":842,"height":842,"mask":{"type":"blob-2"},"id":"adb5701c-4828-42fa-89ce-ca77d3baa101","groupId":null,"type":"shape"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":73,"lockAspectRatio":true,"backgroundColor":{"color":{"r":31,"g":42,"b":46}},"x":-60,"y":-333,"width":532,"height":532,"mask":{"type":"blob-2"},"id":"3c023684-fa14-4162-98f5-d0763a69f8b1","groupId":null,"type":"shape"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Source Serif 4"},"fontSize":25,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.100000000000000088817841970012523233890533447265625,"textAlign":"center","padding":{"horizontal":0,"vertical":0},"x":45,"y":235,"width":322,"height":34,"id":"5a7bdc56-f195-4353-b28a-8188ca8c4854","content":"<span style=\"font-weight: 700; color: #1f2a2e\">Optimize Navigation<\/span>","tagName":"h2","type":"text"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Work Sans"},"fontSize":18,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.3000000000000000444089209850062616169452667236328125,"textAlign":"center","padding":{"horizontal":0,"vertical":0},"x":48,"y":287,"width":316,"height":137,"id":"7cce6532-b5c4-4229-a9aa-1f70cbd780db","content":"<span style=\"color: #2b393e\">Consider using a bottom navigation bar for mobile apps. They are familiar to users and provide easy access to core functionalities without overwhelming the limited screen space.<\/span>","tagName":"p","groupId":null,"type":"text","link":{"needsProxy":false,"url":"https:\/\/www.webmasterindia.com\/mobile-app-development\/hybrid-mobile-app-development","rel":[],"type":"regular","pageId":null,"icon":"https:\/\/www.webmasterindia.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-logo-2-1-3.png","desc":"Mobile App Development, Migration, & Maintenance Company"}},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Source Serif 4"},"fontSize":55,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.100000000000000088817841970012523233890533447265625,"textAlign":"center","padding":{"horizontal":0,"vertical":0},"x":44,"y":96,"width":322,"height":76,"id":"5eccad23-ca47-4641-a79c-529084cbcddb","content":"<span style=\"font-weight: 700; color: #fff\">3<\/span>","tagName":"h2","type":"text"}],"backgroundColor":{"color":{"r":255,"g":255,"b":255}},"animations":[{"id":"ed2a8099-5aee-4817-a6ef-4d88ffcb372a","type":"effect-fly-in","flyInDir":"bottomToTop","duration":1200,"delay":0,"targets":["5a7bdc56-f195-4353-b28a-8188ca8c4854"]},{"id":"787cdad1-e6a7-41a7-931a-eadba2eaf819","type":"effect-fly-in","targets":["7cce6532-b5c4-4229-a9aa-1f70cbd780db"],"flyInDir":"leftToRight","duration":2000,"delay":600},{"id":"6fa9db3c-ad8e-42e5-bdf9-306387938706","type":"effect-fade-in","duration":1000,"delay":0,"targets":["5eccad23-ca47-4641-a79c-529084cbcddb"]}],"type":"page","id":"ad276e4c-d0a0-4ee3-a5d0-a5f61fa8091b","pageTemplateType":"list","groups":{"d2e4a7ff-a799-4fe0-9b90-d78d40e0a754":{"name":"Section","isLocked":false,"isCollapsed":true},"311afe47-563f-4e56-94e9-5f932fd8d018":{"name":"Section","isLocked":false,"isCollapsed":true}}},{"elements":[{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"x":1,"y":1,"width":1,"height":1,"mask":{"type":"rectangle"},"isBackground":true,"id":"8011a99b-0fa9-4800-a326-2e63537e2495","isDefaultBackground":true,"type":"shape"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":69,"lockAspectRatio":true,"backgroundColor":{"color":{"r":253,"g":245,"b":220}},"x":-339,"y":357,"width":842,"height":842,"mask":{"type":"blob-2"},"id":"fe3b74e5-27ba-43ed-ab89-c5e2e9a5f7eb","groupId":null,"type":"shape"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":73,"lockAspectRatio":true,"backgroundColor":{"color":{"r":31,"g":42,"b":46}},"x":-60,"y":-333,"width":532,"height":532,"mask":{"type":"blob-2"},"id":"e0fd9438-9cdd-4474-9816-27bed68766ea","groupId":null,"type":"shape"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Source Serif 4"},"fontSize":25,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.100000000000000088817841970012523233890533447265625,"textAlign":"center","padding":{"horizontal":0,"vertical":0},"x":45,"y":235,"width":322,"height":34,"id":"bd75e7af-e59a-42da-8b84-640b4d906eff","content":"<span style=\"font-weight: 700; color: #1f2a2e\">Think in Single Column<\/span>","tagName":"h2","type":"text"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Work Sans"},"fontSize":18,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.3000000000000000444089209850062616169452667236328125,"textAlign":"center","padding":{"horizontal":0,"vertical":0},"x":48,"y":287,"width":316,"height":137,"id":"193da24c-e20f-4f2e-83a5-1b6043f76ff1","content":"<span style=\"color: #2b393e\">For most mobile views, a single-column layout is a good starting point. This simplifies scrolling and ensures information is presented linearly, improving readability on small screens.<\/span>","tagName":"p","groupId":null,"type":"text"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Source Serif 4"},"fontSize":55,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.100000000000000088817841970012523233890533447265625,"textAlign":"center","padding":{"horizontal":0,"vertical":0},"x":44,"y":96,"width":322,"height":76,"id":"430d02fd-d458-46cd-bbc2-984ef25fda99","content":"<span style=\"font-weight: 700; color: #fff\">4<\/span>","tagName":"h2","type":"text"}],"backgroundColor":{"color":{"r":255,"g":255,"b":255}},"animations":[{"id":"6c54ee84-abe9-406f-8dca-8569eb3c264c","type":"effect-fly-in","flyInDir":"bottomToTop","duration":1200,"delay":0,"targets":["bd75e7af-e59a-42da-8b84-640b4d906eff"]},{"id":"1da3e85f-2db6-4f13-b173-0689f2b0b775","type":"effect-fly-in","targets":["193da24c-e20f-4f2e-83a5-1b6043f76ff1"],"flyInDir":"leftToRight","duration":2000,"delay":600},{"id":"724186e8-25f5-4171-835c-d0542c8c75be","type":"effect-fade-in","duration":1000,"delay":0,"targets":["430d02fd-d458-46cd-bbc2-984ef25fda99"]}],"type":"page","id":"adc1974a-64fb-493b-ab7c-13b1e3a0487e","pageTemplateType":"list","groups":{"d2e4a7ff-a799-4fe0-9b90-d78d40e0a754":{"name":"Section","isLocked":false,"isCollapsed":true},"311afe47-563f-4e56-94e9-5f932fd8d018":{"name":"Section","isLocked":false,"isCollapsed":true}}},{"elements":[{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"x":1,"y":1,"width":1,"height":1,"mask":{"type":"rectangle"},"isBackground":true,"id":"e1b896b3-9114-4e58-85cb-fca80992852e","isDefaultBackground":true,"type":"shape"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":69,"lockAspectRatio":true,"backgroundColor":{"color":{"r":253,"g":245,"b":220}},"x":-339,"y":357,"width":842,"height":842,"mask":{"type":"blob-2"},"id":"db067f8d-3f07-4928-92e5-4cbd3643142c","groupId":null,"type":"shape"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":73,"lockAspectRatio":true,"backgroundColor":{"color":{"r":31,"g":42,"b":46}},"x":-60,"y":-333,"width":532,"height":532,"mask":{"type":"blob-2"},"id":"1a08aa77-5bca-492d-9c2b-eecee1cb0c80","groupId":null,"type":"shape"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Source Serif 4"},"fontSize":25,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.100000000000000088817841970012523233890533447265625,"textAlign":"center","padding":{"horizontal":0,"vertical":0},"x":45,"y":235,"width":322,"height":34,"id":"59743f35-4219-435a-9955-7adf39b7caf8","content":"<span style=\"font-weight: 700; color: #1f2a2e\">Touch-Friendly Elements<\/span>","tagName":"h2","type":"text"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Work Sans"},"fontSize":18,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.3000000000000000444089209850062616169452667236328125,"textAlign":"center","padding":{"horizontal":0,"vertical":0},"x":48,"y":287,"width":316,"height":162,"id":"cb9f1398-2a4a-4a09-95db-4e55d7210923","content":"<span style=\"color: #2b393e\">Ensure there's enough padding and spacing around interactive elements to avoid accidental touches.Increase the hit area of buttons and other interactive elements &nbsp;to tap on smaller screens easily.<\/span>","tagName":"p","groupId":null,"type":"text"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Source Serif 4"},"fontSize":55,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.100000000000000088817841970012523233890533447265625,"textAlign":"center","padding":{"horizontal":0,"vertical":0},"x":44,"y":96,"width":322,"height":76,"id":"db15850c-7dad-4510-a310-a60e983cc744","content":"<span style=\"font-weight: 700; color: #fff\">5<\/span>","tagName":"h2","type":"text"}],"backgroundColor":{"color":{"r":255,"g":255,"b":255}},"animations":[{"id":"ac08975b-9784-4e6a-9742-cee6571ad509","type":"effect-fly-in","flyInDir":"bottomToTop","duration":1200,"delay":0,"targets":["59743f35-4219-435a-9955-7adf39b7caf8"]},{"id":"d42d27ea-4351-440e-bf8e-794a6f578245","type":"effect-fly-in","targets":["cb9f1398-2a4a-4a09-95db-4e55d7210923"],"flyInDir":"leftToRight","duration":2000,"delay":600},{"id":"4d2f2119-16ef-43b1-bbaf-cf868d652a88","type":"effect-fade-in","duration":1000,"delay":0,"targets":["db15850c-7dad-4510-a310-a60e983cc744"]}],"type":"page","id":"99813600-9d4c-402a-8238-0e4b90bdc376","pageTemplateType":"list","groups":{"d2e4a7ff-a799-4fe0-9b90-d78d40e0a754":{"name":"Section","isLocked":false,"isCollapsed":true},"311afe47-563f-4e56-94e9-5f932fd8d018":{"name":"Section","isLocked":false,"isCollapsed":true}}},{"elements":[{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"x":1,"y":1,"width":1,"height":1,"mask":{"type":"rectangle"},"isBackground":true,"id":"389412ee-bbc9-4a74-92f0-fafb0fe533d8","isDefaultBackground":true,"type":"shape"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":69,"lockAspectRatio":true,"backgroundColor":{"color":{"r":253,"g":245,"b":220}},"x":-376,"y":392,"width":842,"height":842,"mask":{"type":"blob-2"},"id":"a3be6177-9448-4235-972b-f241ff331c4a","groupId":null,"type":"shape"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":69,"lockAspectRatio":true,"backgroundColor":{"color":{"r":253,"g":245,"b":220}},"x":100,"y":-750,"width":842,"height":842,"mask":{"type":"blob-2"},"id":"1eeb37b2-1f89-405c-b4b3-7f55aa375e2c","groupId":null,"type":"shape"},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":true,"backgroundTextMode":"NONE","font":{"family":"Source Serif 4"},"fontSize":30,"backgroundColor":{"color":{"r":196,"g":196,"b":196}},"lineHeight":1.100000000000000088817841970012523233890533447265625,"textAlign":"center","padding":{"horizontal":0,"vertical":0},"x":45,"y":90,"width":316,"height":304,"id":"059c2680-8c51-42fd-ad1f-9b2e307bb328","content":"<span style=\"font-weight: 700; color: #1f2a2e\">Building a responsive UI mobile app with Flutter ensures your app delivers a seamless experience across all devices.<\/span>\n<span style=\"font-weight: 700; color: #1f2a2e\">&nbsp;Discuss your project with us<\/span>","tagName":"h2","type":"text","link":{"needsProxy":false,"url":"https:\/\/www.webmasterindia.com\/mobile-app-development\/hybrid-mobile-app-development","rel":[],"type":"regular","pageId":null,"icon":"https:\/\/www.webmasterindia.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-logo-2-1-3.png","desc":"Mobile App Development, Migration, & Maintenance Company"}},{"opacity":100,"flip":{"vertical":false,"horizontal":false},"rotationAngle":0,"lockAspectRatio":false,"scale":100,"focalX":50,"focalY":50,"resource":{"type":"image","mimeType":"image\/png","width":2048,"height":1128,"sizes":{"medium":{"file":"Opal-Logo-300x165.png","width":300,"height":165,"filesize":6379,"mimeType":"image\/png","sourceUrl":"https:\/\/www.webmasterindia.com\/blog\/wp-content\/uploads\/2024\/04\/Opal-Logo-300x165.png"},"large":{"file":"Opal-Logo-1024x564.png","width":1024,"height":564,"filesize":27202,"mimeType":"image\/png","sourceUrl":"https:\/\/www.webmasterindia.com\/blog\/wp-content\/uploads\/2024\/04\/Opal-Logo-1024x564.png"},"thumbnail":{"file":"Opal-Logo-150x150.png","width":150,"height":150,"filesize":4780,"mimeType":"image\/png","sourceUrl":"https:\/\/www.webmasterindia.com\/blog\/wp-content\/uploads\/2024\/04\/Opal-Logo-150x150.png"},"medium_large":{"file":"Opal-Logo-768x423.png","width":768,"height":423,"filesize":20205,"mimeType":"image\/png","sourceUrl":"https:\/\/www.webmasterindia.com\/blog\/wp-content\/uploads\/2024\/04\/Opal-Logo-768x423.png"},"1536x1536":{"file":"Opal-Logo-1536x846.png","width":1536,"height":846,"filesize":51816,"mimeType":"image\/png","sourceUrl":"https:\/\/www.webmasterindia.com\/blog\/wp-content\/uploads\/2024\/04\/Opal-Logo-1536x846.png"},"post-thumbnail":{"file":"Opal-Logo-825x510.png","width":825,"height":510,"filesize":25720,"mimeType":"image\/png","sourceUrl":"https:\/\/www.webmasterindia.com\/blog\/wp-content\/uploads\/2024\/04\/Opal-Logo-825x510.png"},"web-stories-poster-portrait":{"file":"Opal-Logo-640x853.png","width":640,"height":853,"filesize":38188,"mimeType":"image\/png","sourceUrl":"https:\/\/www.webmasterindia.com\/blog\/wp-content\/uploads\/2024\/04\/Opal-Logo-640x853.png"},"web-stories-publisher-logo":{"file":"Opal-Logo-96x96.png","width":96,"height":96,"filesize":2843,"mimeType":"image\/png","sourceUrl":"https:\/\/www.webmasterindia.com\/blog\/wp-content\/uploads\/2024\/04\/Opal-Logo-96x96.png"},"web-stories-thumbnail":{"file":"Opal-Logo-150x83.png","width":150,"height":83,"filesize":3025,"mimeType":"image\/png","sourceUrl":"https:\/\/www.webmasterindia.com\/blog\/wp-content\/uploads\/2024\/04\/Opal-Logo-150x83.png"},"full":{"file":"Opal-Logo.png","width":2048,"height":1128,"mimeType":"image\/png","sourceUrl":"https:\/\/www.webmasterindia.com\/blog\/wp-content\/uploads\/2024\/04\/Opal-Logo.png"}},"isPlaceholder":false,"isExternal":false,"needsProxy":false,"baseColor":"#84848c","blurHash":"U02rgXj[00a},:j[0zWCDif6-=fkEgay^kof","creationDate":"2024-04-16T13:12:40","src":"https:\/\/www.webmasterindia.com\/blog\/wp-content\/uploads\/2024\/04\/Opal-Logo.png","id":9418,"alt":"Opal Logo","local":false},"type":"image","x":108.5,"y":424,"width":189,"height":103,"mask":{"type":"rectangle","showInLibrary":true,"name":"Rectangle","path":"M 0,0 1,0 1,1 0,1 0,0 Z","ratio":1,"supportsBorder":true},"id":"6190bb15-a0ec-4182-89e5-ec27d01642d3"}],"backgroundColor":{"color":{"r":255,"g":255,"b":255}},"animations":[{"id":"f941417b-9f3e-4ea7-9014-7609fd987f3b","type":"effect-fly-in","flyInDir":"bottomToTop","duration":1200,"delay":0,"targets":["059c2680-8c51-42fd-ad1f-9b2e307bb328"]}],"type":"page","id":"48120a49-ceb9-48c5-bc68-28895e981f20","pageTemplateType":"list","groups":{"d2e4a7ff-a799-4fe0-9b90-d78d40e0a754":{"name":"Section","isLocked":false,"isCollapsed":true},"311afe47-563f-4e56-94e9-5f932fd8d018":{"name":"Section","isLocked":false,"isCollapsed":true}}}],"fonts":{"Source Serif 4":{"family":"Source Serif 4","fallbacks":["serif"],"weights":[200,300,400,500,600,700,800,900],"styles":["regular","italic"],"variants":[[0,200],[0,300],[0,400],[0,500],[0,600],[0,700],[0,800],[0,900],[1,200],[1,300],[1,400],[1,500],[1,600],[1,700],[1,800],[1,900]],"service":"fonts.google.com","metrics":{"upm":1000,"asc":1036,"des":-335,"tAsc":1036,"tDes":-335,"tLGap":0,"wAsc":1009,"wDes":324,"xH":475,"capH":670,"yMin":-328,"yMax":998,"hAsc":1036,"hDes":-335,"lGap":0}},"Work Sans":{"family":"Work Sans","fallbacks":["sans-serif"],"weights":[100,200,300,400,500,600,700,800,900],"styles":["regular","italic"],"variants":[[0,100],[0,200],[0,300],[0,400],[0,500],[0,600],[0,700],[0,800],[0,900],[1,100],[1,200],[1,300],[1,400],[1,500],[1,600],[1,700],[1,800],[1,900]],"service":"fonts.google.com","metrics":{"upm":1000,"asc":930,"des":-243,"tAsc":930,"tDes":-243,"tLGap":0,"wAsc":1105,"wDes":343,"xH":500,"capH":660,"yMin":-337,"yMax":1100,"hAsc":930,"hDes":-243,"lGap":0}}},"autoAdvance":true,"defaultPageDuration":7,"currentStoryStyles":{"colors":[]}},"story_poster":{"id":12384,"url":"https:\/\/www.opalinfotech.com\/blog\/wp-content\/uploads\/2024\/06\/cropped-flutter-1.jpg","width":640,"height":853,"needsProxy":false},"_links":{"self":[{"href":"https:\/\/www.opalinfotech.com\/blog\/wp-json\/web-stories\/v1\/web-story\/12382","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.opalinfotech.com\/blog\/wp-json\/web-stories\/v1\/web-story"}],"about":[{"href":"https:\/\/www.opalinfotech.com\/blog\/wp-json\/wp\/v2\/types\/web-story"}],"author":[{"embeddable":true,"href":"https:\/\/www.opalinfotech.com\/blog\/wp-json\/web-stories\/v1\/users\/1"}],"version-history":[{"count":8,"href":"https:\/\/www.opalinfotech.com\/blog\/wp-json\/web-stories\/v1\/web-story\/12382\/revisions"}],"predecessor-version":[{"id":29618,"href":"https:\/\/www.opalinfotech.com\/blog\/wp-json\/web-stories\/v1\/web-story\/12382\/revisions\/29618"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.opalinfotech.com\/blog\/wp-json\/web-stories\/v1\/media\/12384"}],"wp:attachment":[{"href":"https:\/\/www.opalinfotech.com\/blog\/wp-json\/web-stories\/v1\/media?parent=12382"}],"wp:term":[{"taxonomy":"web_story_category","embeddable":true,"href":"https:\/\/www.opalinfotech.com\/blog\/wp-json\/web-stories\/v1\/web_story_category?post=12382"},{"taxonomy":"web_story_tag","embeddable":true,"href":"https:\/\/www.opalinfotech.com\/blog\/wp-json\/web-stories\/v1\/web_story_tag?post=12382"}],"wp:lock":[{"embeddable":true,"href":"https:\/\/www.opalinfotech.com\/blog\/wp-json\/web-stories\/v1\/web-story\/12382\/lock"}],"wp:publisherlogo":[{"embeddable":true,"href":"https:\/\/www.opalinfotech.com\/blog\/wp-json\/web-stories\/v1\/media\/9105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}