Flutter GridView

Flutter GridView Example

In Flutter, a GridView is a scrollable grid of widgets, similar to a ListView but arranged in a two-dimensional grid. It’s used when you want to display items in a grid pattern, such as a gallery of images, a collection of products, or any other scenario where a grid layout is appropriate.

Flutter GridView Example

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

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // int _counter = 0;
bool enable=false;
  // void _incrementCounter() {
  //   setState(() {
  //     _counter++;
  //   });
  // }
final List<String> items = List.generate(20, (index) => 'Item ${index + 1}');
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter GridView Example'),
        ),
        body: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2, // Number of columns
            crossAxisSpacing: 8.0, // Spacing between columns
            mainAxisSpacing: 8.0, // Spacing between rows
          ),
          itemCount: items.length,
          itemBuilder: (context, index) {
            return Card(
              color: index %2==0?Colors.green:Colors.red,
              child: Center(
                child: Text(items[index]),
              ),
            );
          },
        ),
      ),
    );
  }
}

Other Popular Article:-