fix pixel overflow on iPhone 8

mafreud · May 1, 2021 · 08ebc01 · 08ebc01
1 parent 75244ed
commit 08ebc01
Show file tree

Hide file tree

Showing 2 changed files with 103 additions and 99 deletions.
diff --git a/lib/app/physical_model/physical_model.dart b/lib/app/physical_model/physical_model.dart
@@ -35,69 +35,71 @@ class _PhysicalModelPageState extends State<PhysicalModelPage> {
         ],
       ),
       body: Center(
-        child: Column(
-          children: [
-            Padding(
-              padding: const EdgeInsets.symmetric(vertical: 20),
-              child: Text(
-                'PhysicalModel',
-                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
+        child: SingleChildScrollView(
+          child: Column(
+            children: [
+              Padding(
+                padding: const EdgeInsets.symmetric(vertical: 20),
+                child: Text(
+                  'PhysicalModel',
+                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
+                ),
               ),
-            ),
-            PhysicalModel(
-              child: Container(
-                color: Colors.teal,
-                height: 200,
-                width: 200,
+              PhysicalModel(
+                child: Container(
+                  color: Colors.teal,
+                  height: 200,
+                  width: 200,
+                ),
+                color: Colors.amber,
+                shadowColor: Colors.black,
+                elevation: isSwitched ? 50 : 0,
               ),
-              color: Colors.amber,
-              shadowColor: Colors.black,
-              elevation: isSwitched ? 50 : 0,
-            ),
-            Switch(
-              value: isSwitched,
-              onChanged: (value) {
-                setState(() {
-                  isSwitched = value;
-                });
-              },
-              activeTrackColor: Colors.white,
-              activeColor: Colors.teal,
-            ),
-            Padding(
-              padding: const EdgeInsets.all(20.0),
-              child: Text(
-                'AnimatedPhysicalModel',
-                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
+              Switch(
+                value: isSwitched,
+                onChanged: (value) {
+                  setState(() {
+                    isSwitched = value;
+                  });
+                },
+                activeTrackColor: Colors.white,
+                activeColor: Colors.teal,
               ),
-            ),
-            AnimatedPhysicalModel(
-              duration: const Duration(milliseconds: 500),
-              curve: Curves.fastOutSlowIn,
-              shape: BoxShape.rectangle,
-              child: Container(
-                color: Colors.teal,
-                height: 200,
-                width: 200,
+              Padding(
+                padding: const EdgeInsets.all(20.0),
+                child: Text(
+                  'AnimatedPhysicalModel',
+                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
+                ),
               ),
-              borderRadius: isAnimatedSwitched
-                  ? const BorderRadius.all(Radius.circular(0))
-                  : const BorderRadius.all(Radius.circular(10)),
-              color: Colors.amber,
-              shadowColor: Colors.black,
-              elevation: isAnimatedSwitched ? 50 : 0,
-            ),
-            Switch(
-              value: isAnimatedSwitched,
-              onChanged: (value) {
-                setState(() {
-                  isAnimatedSwitched = value;
-                });
-              },
-              activeTrackColor: Colors.white,
-              activeColor: Colors.teal,
-            )
-          ],
+              AnimatedPhysicalModel(
+                duration: const Duration(milliseconds: 500),
+                curve: Curves.fastOutSlowIn,
+                shape: BoxShape.rectangle,
+                child: Container(
+                  color: Colors.teal,
+                  height: 200,
+                  width: 200,
+                ),
+                borderRadius: isAnimatedSwitched
+                    ? const BorderRadius.all(Radius.circular(0))
+                    : const BorderRadius.all(Radius.circular(10)),
+                color: Colors.amber,
+                shadowColor: Colors.black,
+                elevation: isAnimatedSwitched ? 50 : 0,
+              ),
+              Switch(
+                value: isAnimatedSwitched,
+                onChanged: (value) {
+                  setState(() {
+                    isAnimatedSwitched = value;
+                  });
+                },
+                activeTrackColor: Colors.white,
+                activeColor: Colors.teal,
+              )
+            ],
+          ),
         ),
       ),
     );

diff --git a/lib/home_page.dart b/lib/home_page.dart
@@ -13,46 +13,48 @@ class HomePage extends StatelessWidget {
       appBar: AppBar(
         title: Text('proximity'),
       ),
-      body: Column(
-        children: [
-          _Card(
-            page: AnimatedSwitcherPage(),
-            title: 'AnimatedSwitcher',
-            text: 'Animated cross-fade between 2 widgets.',
-            chipList: ['null safety', 'video', 'widget'],
-            gif: 'assets/gif/animated_switcher.gif',
-          ),
-          _Card(
-            page: RotatedBoxPage(),
-            title: 'RotatedBox',
-            text:
-                'A widget that rotates its child by a integral number of quarter turns.',
-            chipList: ['null safety', 'video', 'widget'],
-            gif: 'assets/gif/rotated_box.gif',
-          ),
-          _Card(
-            page: ScrollbarPage(),
-            title: 'Scrollbar',
-            text: 'A Material Design scrollbar.',
-            chipList: ['null safety', 'video', 'widget'],
-            gif: 'assets/gif/scrollbar.gif',
-          ),
-          _Card(
-            page: ExpansionPanelPage(),
-            title: 'ExpansionPanel',
-            text: 'A material expansion panel.',
-            chipList: ['null safety', 'video', 'widget'],
-            gif: 'assets/gif/expansion_panel.gif',
-          ),
-          _Card(
-            page: PhysicalModelPage(),
-            title: 'PhysicalModel',
-            text:
-                'A widget representing a physical layer that clips its children to a shape.',
-            chipList: ['null safety', 'video', 'widget'],
-            gif: 'assets/gif/animated_physical_model.gif',
-          ),
-        ],
+      body: SingleChildScrollView(
+        child: Column(
+          children: [
+            _Card(
+              page: AnimatedSwitcherPage(),
+              title: 'AnimatedSwitcher',
+              text: 'Animated cross-fade between 2 widgets.',
+              chipList: ['null safety', 'video', 'widget'],
+              gif: 'assets/gif/animated_switcher.gif',
+            ),
+            _Card(
+              page: RotatedBoxPage(),
+              title: 'RotatedBox',
+              text:
+                  'A widget that rotates its child by a integral number of quarter turns.',
+              chipList: ['null safety', 'video', 'widget'],
+              gif: 'assets/gif/rotated_box.gif',
+            ),
+            _Card(
+              page: ScrollbarPage(),
+              title: 'Scrollbar',
+              text: 'A Material Design scrollbar.',
+              chipList: ['null safety', 'video', 'widget'],
+              gif: 'assets/gif/scrollbar.gif',
+            ),
+            _Card(
+              page: ExpansionPanelPage(),
+              title: 'ExpansionPanel',
+              text: 'A material expansion panel.',
+              chipList: ['null safety', 'video', 'widget'],
+              gif: 'assets/gif/expansion_panel.gif',
+            ),
+            _Card(
+              page: PhysicalModelPage(),
+              title: 'PhysicalModel',
+              text:
+                  'A widget representing a physical layer that clips its children to a shape.',
+              chipList: ['null safety', 'video', 'widget'],
+              gif: 'assets/gif/animated_physical_model.gif',
+            ),
+          ],
+        ),
       ),
     );
   }