Nested ListView.builder in Flutter

readme.md

Nested ListView.builder in Flutter

Created with <3 with dartpad.dev.

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Nested ListView.builder Example'),
        ),
        body: MyNestedListView(),
      ),
    );
  }
}

class MyNestedListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 5, // Number of outer list items
      itemBuilder: (context, index) {
        return Card(
          margin: const EdgeInsets.all(8.0),
          child: Column(
            children: [
              ListTile(
                title: Text('Outer List Item $index'),
              ),
              // Inner ListView.builder
              SizedBox(
                height: 150.0, // Set the height of the inner list
                child: ListView.builder(
                  scrollDirection: Axis.horizontal, // Set the direction if needed
                  itemCount: 10, // Number of inner list items
                  itemBuilder: (context, innerIndex) {
                    return Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Container(
                        color: Colors.blue,
                        width: 100.0,
                        child: Center(
                          child: Text('Inner List Item $innerIndex', textAlign: TextAlign.center),
                        ),
                      ),
                    );
                  },
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}