title: How to scale Flutter Gridview content for different screen sizes
body: <p>I am trying to use a grid view to display a grid of 2x5 cards.
  The Gridview is inside a column layout as shown here.
  <a href="https://i.stack.imgur.com/MoFtT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MoFtT.png" alt="enter image description here" /></a></p>
  <p>Now when I run this code for different device sizes, the gridview card size does not scale effectively as I am assuming my “childAspectRatio: 3 / 1.6,” does not work due to different screen proportions.</p>
  <p>This is how I get a scrolling in device with wider screen size.
  No scroll on longer screen.</p>
  <p><a href="https://i.stack.imgur.com/VWRHyl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VWRHyl.png" alt="enter image description here" /></a></p>
  <p>and, scroll on wider screen</p>
  <p><a href="https://i.stack.imgur.com/25hQLl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/25hQLl.png" alt="enter image description here" /></a></p>
  <p>So I was wondering if there is a workaround to fix this?
  Can I use something other than childAspectRatio?</p>
  <p>My Gridview parameters look like this:</p>
  <pre><code>child: GridView.count(
  crossAxisCount: 2,
  mainAxisSpacing: 0,
  crossAxisSpacing: 0,
  childAspectRatio: 3 / 1.6,
  </code></pre>
  <p>Update:
  Additional code as requested.</p>
  <pre><code>import 'package:firebase_auth/firebase_auth.dart';
  import 'package:flutter/material.dart';
  import 'level_slider_carousel.dart';
  import 'package:google_fonts/google_fonts.dart';
  import 'package:xactly/utils/styles.dart';
  import 'package:smooth_page_indicator/smooth_page_indicator.dart';
  import 'package:xactly/utils/size_config.dart';
  
  class GameHome extends StatefulWidget {
    createState() {
      return GameHomePage();
    }
  }
  
  class GameHomePage extends State&lt;GameHome&gt; {
  final PageController _pageController = new PageController();
  int pCount = 0;
  @override
  Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: Column(
        children: [
          Expanded(
            flex: 4,
            child: Container(
              //Header code here
            ),
          ),
          Expanded(
            flex: 23,
            child: PageView(
              controller: _pageController,
              onPageChanged: _onPageChanged,
              children: [
                // Just duplicating the same pages to create multi-page slider
                new LevelSlider(),
                new LevelSlider(),
                new LevelSlider(),
                new LevelSlider(),
              ],
            ),
          ),
          Expanded(
            flex: 5,
            child: Container(
              // Footer code here
            ),
          ),
        ],
      ),
    ),
    floatingActionButton: Container(
      height: 8 * SizeConfig.textMultiplier,
      width: 8 * SizeConfig.textMultiplier,
      child: FittedBox(
        // Button code here
      ),
    ),
    floatingActionButtonLocation: 
  FloatingActionButtonLocation.centerFloat,
  );
   }
      }
  
  
     class LevelSlider extends StatelessWidget { 
  final int level; 
  LevelSlider({this.level});
  @override
  Widget build(BuildContext context) {
  double width = MediaQuery.of(context).size.width;
  String t;
  return Scaffold(
    body: Padding(
      padding: const EdgeInsets.only(
        left: 10,
        right: 10,
      ),
      child: GridView.count(
        crossAxisCount: 2,
        mainAxisSpacing: 0,
        crossAxisSpacing: 0,
        childAspectRatio: 3 / 1.6,
        children: List.generate(
          10,
          (index) {
            switch (index) {
              case 0:
                t = 'One';
                break;
              case 1:
                t = 'Two';
                break;
              case 2:
                t = 'Three';
                break;
              case 3:
                t = 'Four';
                break;
              case 4:
                t = 'Five';
                break;
              case 5:
                t = 'Six';
                break;
              case 6:
                t = 'Seven';
                break;
              case 7:
                t = 'Eight';
                break;
              case 8:
                t = 'Nine';
                break;
              case 9:
                t = 'Ten';
                break;
            }
            return new Card(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(12),
              ),
              elevation: 1.0,
              child: InkWell(
                onTap: () {
                  Fluttertoast.showToast(msg: 'Card $index clicked');
                },
                child: new Container(
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.black),
                    borderRadius: BorderRadius.all(Radius.circular(12)),
                  ),
                  child: Row(
                    children: &lt;Widget&gt;[
                      // Code for stuff inside cards
                    ],
                  ),
                ),
              ),
            );
          },
        ),
            ),
          ),
        );
      }
    }
  </code></pre>