Published on

solved create a packed horizontal list with fixed rows in flutter

Authors
  • avatar
    Name
    James Williams
    Twitter
    About

Creating a Packed Horizontal List with Fixed Rows in Flutter

Flutter's flexibility allows for creating various layouts, including packed horizontal lists with fixed rows. This article will guide you through the process of achieving this layout, ensuring your list displays items efficiently and aesthetically.

Understanding the Requirements

Before diving into the code, let's clarify the goal:

  • Packed: Items should be tightly packed horizontally, filling the available space.
  • Horizontal: Items are arranged in a row.
  • Fixed Rows: The number of rows in the list is predetermined and remains constant.

Implementing the Solution

We'll use a combination of Flutter widgets to achieve the desired layout:

  1. GridView.count: This widget is ideal for creating grids with a fixed number of columns. We'll use it to define the number of rows and control the layout.
  2. SingleChildScrollView: To enable scrolling when the content exceeds the available screen space, we'll wrap the GridView.count within this widget.
  3. Container: We'll use Container to define the size and styling of each item in the list.

Code Example:

import 'package:flutter/material.dart';

class PackedHorizontalList extends StatelessWidget {
  final List<Widget> items;
  final int rows;

  const PackedHorizontalList({Key? key, required this.items, required this.rows}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: GridView.count(
        crossAxisCount: 1,
        childAspectRatio: 1.0, // Adjust aspect ratio for item width
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        children: items,
        crossAxisSpacing: 8, // Adjust spacing between items
        mainAxisSpacing: 8, // Adjust spacing between rows
      ),
    );
  }
}

Explanation:

  • crossAxisCount: 1 ensures that the grid has only one column, creating a horizontal list.
  • childAspectRatio controls the width-to-height ratio of each item. Adjust this value to achieve the desired item width.
  • shrinkWrap: true allows the GridView to shrink to fit its content.
  • physics: NeverScrollableScrollPhysics() prevents vertical scrolling within the GridView.
  • crossAxisSpacing and mainAxisSpacing define the spacing between items and rows, respectively.

Customizing the Layout

You can further customize the layout by:

  • Adding padding: Use padding within the Container to add space around each item.
  • Changing item size: Adjust the childAspectRatio or use SizedBox to control the size of each item.
  • Adding borders: Use decoration within the Container to add borders to items.

Conclusion

By combining GridView.count, SingleChildScrollView, and Container, you can create a packed horizontal list with fixed rows in Flutter. This approach provides a flexible and efficient way to display your data in a visually appealing manner. Remember to adjust the code parameters to match your specific design requirements.

Discuss on Twitter