flutter – GridView in column

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(
      MaterialApp(
          theme: ThemeData(primarySwatch: Colors.indigo),
          home: Scaffold(
              appBar: AppBar(
                  title: const Text("Flutter - GridView In Column")
              ),
              body: bodyContent()
          )
      )
  );
}

bodyContent(){
  return Column(
      children: [
        SizedBox(
          height: 200,
          child: GridView.count(
              scrollDirection: Axis.horizontal,
              crossAxisCount: 2,
              children: List.generate(50, (index){
                return Card(
                    color: Colors.green.shade300,
                    child: Center(child: Text("${index+1}"))
                );
              })
          ),
        ),
        Expanded(
            child: GridView.count(
                scrollDirection: Axis.horizontal,
                crossAxisCount: 4,
                children: List.generate(75, (index){
                  return Card(
                      color: Colors.pink.shade300,
                      child: Center(child: Text("${index+1}"))
                  );
                })
            )
        )
      ]
  );
}

More flutter tutorials

• flutter – ConstrainedBox scroll
• flutter – SingleChildScrollView vertical
• flutter – SingleChildScrollView horizontal
• flutter – DecoratedBox border
• flutter – BoxDecoration image
• flutter – BoxDecoration opacity
• flutter – BoxDecoration background color
• flutter – How to use FittedBox
• flutter – FittedBox text
• flutter – How to use LimitedBox
• flutter – How to use GridView
• flutter – How to create horizontal GridView
• flutter – GridView horizontal scroll
• flutter – GridView onTap
• flutter – GridView disable scroll