flutter – GridView horizontal scroll

main.dart

import 'dart:math';
import 'package:flutter/material.dart';

void main() {
  runApp(
      MaterialApp(
          theme: ThemeData(primarySwatch: Colors.indigo),
          home: Scaffold(
              appBar: AppBar(
                  title: const Text("GridView Horizontal Scroll")
              ),
              body: bodyContent(),
              backgroundColor: Colors.indigo.shade50
          )
      )
  );
}

bodyContent(){
  return GridView.builder(
      scrollDirection: Axis.horizontal,
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 6,
      ),
      itemCount: 200,
      itemBuilder: (context, index) {
        return Card(
            color: Colors.primaries[
            Random().nextInt(Colors.primaries.length)
            ].shade600,
            child: Center(
                child: Text(
                    "${index+1}",
                    style: const TextStyle(
                        color: Colors.white70,
                        fontWeight: FontWeight.bold
                    )
                )
            )
        );
      }
  );
}

More flutter tutorials

• flutter – How to create horizontal GridView
• flutter – GridView in column
• flutter – GridView onTap
• flutter – GridView disable scroll
• flutter – How to use Card
• flutter – Card border radius
• flutter – Card height
• flutter – Card padding
• flutter – Card with image
• flutter – Card with image and text
• flutter – Card circle image
• flutter – Card circle image padding
• flutter – Card rounded corners image
• flutter – Container clip behavior
• flutter – How to use InkResponse