How do I turn this hardcoded widget into a reusable & modular widget with proper function parameter?

Question

I am intensely confused as to how to go about this, don't even think I have the correct terminology. I am devoid of this basic Flutter knowledge.

I want to make this page widget modular so it can be used in many places with only a function parameter. At least I think thats what I need. I want to be able to pass a function to this reusable custom widget with index for building, well index, until indexCount. Index count will be passed to child count in sliver list widget. So that the passed widget will build using the index param from the sliver builder.

/// WHAT I CURRENTLY HAVE

class PageOne extends StatelessWidget {
  final int indexCount;
  Widget sliverItem({required Widget child, required int index}) {
    return child;
  }
  const PageOne({Key? key, required indexCount}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Row(
        children: [
          const SizedBox(width: 40.0),
          Consumer(builder: (context, ref, child) {
            return Expanded(
              child: EasyRefresh.custom(
                onRefresh: // TODO
                onLoad: // TODO
                slivers: [
                  SliverList(
                    delegate: SliverChildBuilderDelegate(
                      (BuildContext context, int index) {
                        return Card(
                          margin: const EdgeInsets.all(15),
                          child: Container(
                            color: Colors.blue[100 * (index % 9 + 1)],
                            height: 80,
                            alignment: Alignment.center,
                            child: const Text(
                              'item $index',
                              style: TextStyle(fontSize: 30),
                            ),
                          ),
                        );
                      },
                      childCount: indexCount,
                    ),
                  ),
                ],
              ),
            );
          }),
        ],
      ),
    );
  }
}

/// WHAT I THINK I NEED

class PageOne extends StatelessWidget {
final int indexCount;
  Widget sliverItem({required Widget child, required int index}) {
    return child;
  }
  const PageOne({Key? key, required indexCount}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Row(
        children: [
          const SizedBox(width: 40.0),
          Consumer(builder: (context, ref, child) {
            return Expanded(
              child: EasyRefresh.custom(
                onRefresh: // TODO
                onLoad: // TODO
                slivers: [
                  SliverList(
                    delegate: SliverChildBuilderDelegate(
                      (BuildContext context, int index) {
                        return sliverItem(index) // returns custom widget with index until indexCount
                      },
                      childCount: indexCount,
                    ),
                  ),
                ],
              ),
            );
          }),
        ],
      ),
    );
  }
}

Answer 1

The same way you've declared final int indexCount;, you can declare a function as final Function() myFunction; and call the myFunction where you want.