Create a listview layout with sections in flutter

Question

I want to implement a long listview like below. There are sections and each has a title and a variable amount of images. What is the best way to tackle this issue?

Should I create a section widget and use that in the listview builder?

Answer 1

Yes, creating a section widget and using it in the ListView builder is a good approach to implement a list view with sections in Flutter.

Here's an example implementation of a ListView with sections:

class MyListView extends StatelessWidget {
  final List<MySection> sections;

  MyListView({required this.sections});

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: sections.length,
      itemBuilder: (BuildContext context, int sectionIndex) {
        MySection section = sections[sectionIndex];
        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
              padding: EdgeInsets.all(8.0),
              child: Text(section.title),
            ),
            Container(
              height: 100,
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: section.images.length,
                itemBuilder: (BuildContext context, int imageIndex) {
                  return Image.network(section.images[imageIndex]);
                },
              ),
            ),
          ],
        );
      },
    );
  }
}

In the above implementation, MySection is a custom class that represents each section of the list. It contains a title and a list of image URLs.

The ListView.builder method is used to build the outer list view that displays the sections. For each section, a Column widget is used to display the section title and a horizontal list view of images.

The inner horizontal list view is implemented using another ListView.builder method. This time, the scrollDirection property is set to Axis.horizontal to make the list scroll horizontally.

You can then use the MyListView widget in your Flutter app like this:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: MyListView(
          sections: [
            MySection(
              title: 'Section 1',
              images: ['https://example.com/image1.jpg', 'https://example.com/image2.jpg'],
            ),
            MySection(
              title: 'Section 2',
              images: ['https://example.com/image3.jpg', 'https://example.com/image4.jpg', 'https://example.com/image5.jpg'],
            ),
          ],
        ),
      ),
    );
  }
}

In the above example, MyListView is used to display two sections with different numbers of images.