How to implement a horizontal GridView in Flutter

Last updated on November 9, 2020 The Frog Loading... Post a comment

In order to make a horizontal GridView in Flutter, just set its scrollDirection property to Axis.horizontal, like this:

 GridView(
     scrollDirection: Axis.horizontal,
     gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                maxCrossAxisExtent: 200,
                childAspectRatio: 3 / 2,
                crossAxisSpacing: 20,
                mainAxisSpacing: 20
     ),
     children: [
               // Some widgets
     ],
),

Example 1

Screen capture:

The code:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Hide the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Kindacode.com'),
      ),
      body: SafeArea(
        child: SizedBox(
          width: double.infinity,
          height: 300,
          child: GridView(
            scrollDirection: Axis.horizontal,
            gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                maxCrossAxisExtent: 250,
                childAspectRatio: 1 / 2,
                crossAxisSpacing: 20,
                mainAxisSpacing: 20
            ),
            children: [
              Container(
                color: Colors.amber,
                alignment: Alignment.center,
                child: Text('1', style: TextStyle(fontSize: 30),),
              ),
              Container(
                color: Colors.amber,
                alignment: Alignment.center,
                child: Text('2', style: TextStyle(fontSize: 30),),
              ),
              Container(
                color: Colors.amber,
                alignment: Alignment.center,
                child: Text('3', style: TextStyle(fontSize: 30),),
              ),
              Container(
                color: Colors.amber,
                alignment: Alignment.center,
                child: Text('4', style: TextStyle(fontSize: 30),),
              ),
              Container(
                color: Colors.amber,
                alignment: Alignment.center,
                child: Text('5', style: TextStyle(fontSize: 30),),
              ),
              Container(
                color: Colors.amber,
                alignment: Alignment.center,
                child: Text('6', style: TextStyle(fontSize: 30),),
              ),
              Container(
                color: Colors.amber,
                alignment: Alignment.center,
                child: Text('7', style: TextStyle(fontSize: 30),),
              ),
              Container(
                color: Colors.amber,
                alignment: Alignment.center,
                child: Text('8', style: TextStyle(fontSize: 30),),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Example 2: Using GridView.builder

Screen record:

The code:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Hide the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  // Generating dummy data for testing purpose
  final List dummyData = List.generate(10000, (index) => '$index');
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Kindacode.com'),
      ),
      body: SafeArea(
        child: SizedBox(
          width: double.infinity,
          height: 300,
          child: GridView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: dummyData.length,
            gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                maxCrossAxisExtent: 250,
                childAspectRatio: 3 / 2,
                crossAxisSpacing: 20,
                mainAxisSpacing: 20),
            itemBuilder: (context, index) {
              return GridTile(
                  child: Container(
                      color: Colors.blue[200],
                      alignment: Alignment.center,
                      child: Text(dummyData[index])));
            },
          ),
        ),
      ),
    );
  }
}

Related Articles

guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x