Flutter – Set Custom Height for Widget in GridView

To set the Custom Height and Width of Grid View we can use the property childAspectRatio of the grid view. childAspectRatio takes the ratio of width and height.

childAspectRatio: (itemWidth / itemHeight)

Then we can assign itemWidth and ItemHeight with values.

Dart

// size of the screen
var size = MediaQuery.of(context).size;

/*24 is for notification bar on Android*/
final double itemHeight = (size.height - kToolbarHeight - 24) / 2;
final double itemWidth = size.width / 2;

Here is the sample flutter project that implements the custom height and width of the grid view.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Import the material package

A material package gives us the essential functions and Parameters, Now call the runApp method that needs an Application in the main function.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home:RunMyApp()));
}

You also set debugShowCheckedModeBanner false and theme. In the above code, runApp method calls the class RunMyApp, Now we have to create it.

Step 3: Creating a Stateful Widget

Now we have to make a stateful widget because our application does go to change its state and then return the MaterialApp widget which allows us the set the title and theme and many more of the application.

Shortcut: For creating a stateless or Stateful widget, you can create a stateless or stateful widget by just typing three alphabets ‘stl’ and you can see a stateless widget and then hit enter.

class RunMyApp extends StatefulWidget {
  @override
  _RunMyAppState createState() => _RunMyAppState();
}

class _RunMyAppState extends State<RunMyApp> {
  List<String> widgetList = ['Geeks', 'for', 'Geeks'];

  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;

    /*24 is for notification bar on Android*/
    final double itemHeight = (size.height - kToolbarHeight - 24) / 2;
    final double itemWidth = size.width / 2;

    return Scaffold(
      appBar: AppBar(
        title: Text("Custom Height and Width"),
      ),
      body: 
    );
  }
}

Step 4: In the body of the app, we can simply use the GridView, use the childAspectRatio property, and pass the height and width to it.

Container(
        child: GridView.count(
          crossAxisCount: 2,
          childAspectRatio: (itemWidth / itemHeight),
          controller: ScrollController(keepScrollOffset: false),
          shrinkWrap: true,
          scrollDirection: Axis.vertical,
          children: widgetList.map((String value) {
            return Container(
              color: Colors.amberAccent,
              margin: EdgeInsets.all(1.0),
              child: Center(
                child: Text(
                  value,
                  style: TextStyle(
                    fontSize: 50.0,
                  ),
                ),
              ),

Code Example

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    theme: ThemeData(primarySwatch: Colors.green),
    home: RunMyApp(),
  ));
}

class RunMyApp extends StatefulWidget {
  @override
  _RunMyAppState createState() => _RunMyAppState();
}

class _RunMyAppState extends State<RunMyApp> {
  List<String> widgetList = ['Geeks', 'for', 'Geeks'];

  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;

    /*24 is for notification bar on Android*/
    final double itemHeight = (size.height - kToolbarHeight - 24) / 2;
    final double itemWidth = size.width / 2;

    return Scaffold(
      appBar: AppBar(
        title: Text("Custom Height and Width"),
      ),
      body: Container(
        child: GridView.count(
          crossAxisCount: 2,
          childAspectRatio: (itemWidth / itemHeight),
          controller: ScrollController(keepScrollOffset: false),
          shrinkWrap: true,
          scrollDirection: Axis.vertical,
          children: widgetList.map((String value) {
            return Container(
              color: Colors.amberAccent,
              margin: EdgeInsets.all(1.0),
              child: Center(
                child: Text(
                  value,
                  style: TextStyle(
                    fontSize: 50.0,
                  ),
                ),
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}

Output