Headers are created above its content. #19
Description
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)";
});
},
);
}),
),
),
);
},
);
},
),
)
],
),
);
}
}