Headers are created above its content.

[wizzar]

In a simple horizontally scrollable list, the header is always above the items. There should be some kind of margin.

Code:

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  String text = "init";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Container(
            color: Colors.lightBlue,
            child: Text(text),
          ),
          Container(
            margin: EdgeInsets.symmetric(vertical: 30),
            height: 300,
            child: InfiniteList(
              scrollDirection: Axis.horizontal,
              direction: InfiniteListDirection.multi,
              builder: (context, index) {
                return InfiniteListItem(
                  initialHeaderBuild: true,
                  headerAlignment: HeaderAlignment.centerLeft,
                  headerBuilder: (context) {
                    return Container(
                      color: Colors.white,
                      child: Text("header $index"),
                    );
                  },
                  contentBuilder: (context) {
                    return Container(
                      color: RandomColor().randomColor(),
                      child: Padding(
                        padding: const EdgeInsets.only(
                          left: 0, // <- must be set to whatever the header width is to fix the problem.
                        ),
                        child: Row(
                          children: List.generate(7, (itemIndex) {
                            return RaisedButton(
                              child: Text("item $itemIndex ($index)"),
                              onPressed: () {
                                setState(() {
                                  text = "item $itemIndex ($index)";
                                });
                              },
                            );
                          }),
                        ),
                      ),
                    );
                  },
                );
              },
            ),
          )
        ],
      ),
    );
  }
}

[TatsuUkraine]

Well, it's expected behavior) by default headers are overlay content

[TatsuUkraine]

@wizzar do you want me to make overlay optional for headers?

[wizzar]

Oh.. I did not expect that... I understand it should overlay. However, initially, the first item should be visible. I believe that's what most people would expect, to not have the first item not visible.

[wizzar]

@wizzar do you want me to make overlay optional for headers?

I believe it would make your plugin more robust.

[TatsuUkraine]

@wizzar do you want me to make overlay optional for headers?

I believe it would make your plugin more robust.

@wizzar ok) can't guarantee that I will implement this feature today or tomorrow) but for sure will try to do this as soon as I can)

I was just thinking to make it as simple as possible, even made list item classes extendable if needed, just to give full control over layout to the dev. But I think adding ability to switch off overlay from the box good improvement

[TatsuUkraine]

@wizzar just published v2, now package supports relative positioning

[TatsuUkraine]

if something here is migration guide https://github.com/TatsuUkraine/flutter_sticky_infinite_list/blob/master/MIGRATION.md