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,
                    ),
                  ),
                ],
              ),
            );
          }),
        ],
      ),
    );
  }
}

so you need to pass a variable of type `IndexedWidgetBuilder` to `PageOne` constructor — pskink, Nov 16 '21 at 04:39
This looks promising, could you explain with an example how to use `IndexedWidgetBuilder` as I am not easily able to find simple examples. Post an answer and if it works I will happily mark check it — RobbB, Nov 16 '21 at 04:52
Screw it I'm going to pass in the whole Sliver child builder delegate. I will need to learn in this area still. Any resources, starting point, terminology clues you can share please? — RobbB, Nov 16 '21 at 05:28
actually it should be `NullableIndexedWidgetBuilder` - something like this: `class Foo extends StatelessWidget { final NullableIndexedWidgetBuilder builder; final int childCount; const Foo({ Key? key, required this.builder, required this.childCount, }) : super(key: key); @override Widget build(BuildContext context) { return CustomScrollView( slivers: [ SliverList( delegate: SliverChildBuilderDelegate(builder, childCount: childCount), ), ], ); } }` — pskink, Nov 16 '21 at 06:28

score 0 · Answer 1 · answered Nov 16 '21 at 06:26

0

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.

answered Nov 16 '21 at 06:26

Albert

81
4

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

1 Answers1