In Depth Explanation for SliverGridDelegateWithFixedCrossAxisCount

Explanation

• GridView.builder: This widget creates a scrollable, 2D array of widgets that are created on demand.
• SliverGridDelegateWithFixedCrossAxisCount: This delegate allows you to specify the number of columns (crossAxisCount), horizontal spacing (crossAxisSpacing), vertical spacing (mainAxisSpacing), and the aspect ratio (childAspectRatio) of the grid items.
• itemCount: The number of items in the grid. In this case, it’s the length of the hotelList.
• itemBuilder: This function is called for each item in the grid. It returns the Hotel widget for each item in the hotelList.

This code will display your hotels in a grid layout with 2 columns. You can adjust the crossAxisCount, crossAxisSpacing, mainAxisSpacing, and childAspectRatio properties to customize the grid’s appearance.

class HotelListScreen extends StatelessWidget {
  final List<Map<String, dynamic>> hotelList;

  const HotelListScreen({super.key, required this.hotelList});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2, // Number of columns
            crossAxisSpacing: 16.0, // Horizontal spacing between grid items
            mainAxisSpacing: 16.0, // Vertical spacing between grid items
            childAspectRatio: 0.7, // Aspect ratio of the grid items
          ),
          itemCount: hotelList.length,
          itemBuilder: (context, index) {
            final singleHotel = hotelList[index];
            return Hotel(hotel: singleHotel);
          },
        ),
      ),
    );
  }
}

class Hotel extends StatelessWidget {
  final Map<String, dynamic> hotel;

  const Hotel({super.key, required this.hotel});

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Container(
      padding: const EdgeInsets.all(8.0),
      width: size.width * 0.6,
      height: 350,
      decoration: BoxDecoration(
        color: AppStyles.primaryColor,
        borderRadius: BorderRadius.circular(18),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            height: 180,
            decoration: BoxDecoration(
              color: AppStyles.primaryColor,
              borderRadius: BorderRadius.circular(12),
              image: DecorationImage(
                fit: BoxFit.cover,
                image: AssetImage("assets/images/${hotel['image']}"),
              ),
            ),
          ),
          const SizedBox(height: 10),
          Padding(
            padding: const EdgeInsets.only(left: 15),
            child: Text(
              hotel['place'],
              style: AppStyles.headLineStyle1.copyWith(color: AppStyles.kakiColor),
            ),
          ),
          const SizedBox(height: 5),
          Padding(
            padding: const EdgeInsets.only(left: 15),
            child: Text(
              hotel['destination'],
              style: AppStyles.headLineStyle3.copyWith(color: Colors.white),
            ),
          ),
          const SizedBox(height: 5),
          Padding(
            padding: const EdgeInsets.only(left: 15),
            child: Text(
              "\$${hotel['price']}/night",
              style: AppStyles.headLineStyle1.copyWith(color: AppStyles.kakiColor),
            ),
          ),
        ],
      ),
    );
  }
}

The SliverGridDelegateWithFixedCrossAxisCount is a delegate for GridView that helps create a layout with a fixed number of columns across the horizontal axis. It provides control over the number of columns, spacing between items, and the aspect ratio of each grid item.

Here’s a deeper look into the properties and their usage:

The SliverGridDelegateWithFixedCrossAxisCount is a delegate for GridView that helps create a layout with a fixed number of columns across the horizontal axis. It provides control over the number of columns, spacing between items, and the aspect ratio of each grid item.

Here’s a deeper look into the properties and their usage:

Properties of SliverGridDelegateWithFixedCrossAxisCount

1. crossAxisCount:
   • The number of columns in the grid.
   • Example: crossAxisCount: 2 means the grid will have 2 columns.
2. mainAxisSpacing:
   • The vertical spacing between rows.
   • Example: mainAxisSpacing: 16.0 sets 16 pixels of vertical space between each row.
3. crossAxisSpacing:
   • The horizontal spacing between columns.
   • Example: crossAxisSpacing: 16.0 sets 16 pixels of horizontal space between each column.
4. childAspectRatio:
   • The aspect ratio of the children in the grid. It’s calculated as width / height.
   • Example: childAspectRatio: 0.7 means each child will have a width that is 70% of its height.

Example Usage

Here’s a more detailed example using SliverGridDelegateWithFixedCrossAxisCount:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HotelListScreen(
        hotelList: [
          {'image': 'hotel1.jpg', 'place': 'Place 1', 'destination': 'Destination 1', 'price': 100},
          {'image': 'hotel2.jpg', 'place': 'Place 2', 'destination': 'Destination 2', 'price': 150},
          {'image': 'hotel3.jpg', 'place': 'Place 3', 'destination': 'Destination 3', 'price': 200},
          {'image': 'hotel4.jpg', 'place': 'Place 4', 'destination': 'Destination 4', 'price': 250},
        ],
      ),
    );
  }
}

class HotelListScreen extends StatelessWidget {
  final List<Map<String, dynamic>> hotelList;

  const HotelListScreen({Key? key, required this.hotelList}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Hotels')),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2, // Number of columns
            crossAxisSpacing: 16.0, // Horizontal spacing between grid items
            mainAxisSpacing: 16.0, // Vertical spacing between grid items
            childAspectRatio: 0.7, // Aspect ratio of the grid items (width / height)
          ),
          itemCount: hotelList.length,
          itemBuilder: (context, index) {
            final singleHotel = hotelList[index];
            return Hotel(hotel: singleHotel);
          },
        ),
      ),
    );
  }
}

class Hotel extends StatelessWidget {
  final Map<String, dynamic> hotel;

  const Hotel({Key? key, required this.hotel}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Container(
      padding: const EdgeInsets.all(8.0),
      width: size.width * 0.6,
      height: 350,
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(18),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            height: 180,
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.circular(12),
              image: DecorationImage(
                fit: BoxFit.cover,
                image: AssetImage("assets/images/${hotel['image']}"),
              ),
            ),
          ),
          const SizedBox(height: 10),
          Padding(
            padding: const EdgeInsets.only(left: 15),
            child: Text(
              hotel['place'],
              style: TextStyle(color: Colors.yellow, fontSize: 20, fontWeight: FontWeight.bold),
            ),
          ),
          const SizedBox(height: 5),
          Padding(
            padding: const EdgeInsets.only(left: 15),
            child: Text(
              hotel['destination'],
              style: TextStyle(color: Colors.white, fontSize: 16),
            ),
          ),
          const SizedBox(height: 5),
          Padding(
            padding: const EdgeInsets.only(left: 15),
            child: Text(
              "\$${hotel['price']}/night",
              style: TextStyle(color: Colors.yellow, fontSize: 20, fontWeight: FontWeight.bold),
            ),
          ),
        ],
      ),
    );
  }
}

Explanation

• GridView.builder:
  • gridDelegate: Specifies the layout of the grid using SliverGridDelegateWithFixedCrossAxisCount.
  • crossAxisCount: Defines the number of columns. Here, it is set to 2.
  • mainAxisSpacing: Sets the vertical spacing between rows to 16 pixels.
  • crossAxisSpacing: Sets the horizontal spacing between columns to 16 pixels.
  • childAspectRatio: Sets the aspect ratio of each grid item to 0.7 (width is 70% of the height).
• HotelListScreen:
  • Uses GridView.builder to build a grid of Hotel widgets based on the hotelList.
• Hotel:
  • The Hotel widget is a StatelessWidget that takes a hotel map and displays its details in a styled container.