I'm trying to build a horizontal slider (ListView) of widgets, and want to add a button at the end of the ListView (so that you could add another card). So far if I try to add it via the list of widgets that is being pulled from to generate the ListView.builder, it doesn't allow me because the widget is different than the widgets I specify the list is being made off.
I don't know how to add it at the end of the list another way. I have been able to put it next to the list, but that takes up screen real estate where it shouldn't, because the desired effect should be that it's added at the end of the ListView, not next to it.
Here's the code:
Column(
children: <Widget>[
Expanded(
flex: 20,
child: Column(
children: <Widget>[
Padding(
padding:
const EdgeInsets.only(left: 20, top: 10, bottom: 10),
child: Align(
alignment: Alignment.topLeft,
child: Text(
'Buildings',
style: TextStyle(
color: Colors.white,
fontSize: 30,
fontFamily: 'Montserrat',
fontWeight: FontWeight.w300),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: SearchBar(),
),
),
],
),
),
Expanded(
flex: 30,
child: Row(
children: <Widget>[
Expanded(
child: Consumer<BuildingData>(
builder: (context, buildingData, child) {
return ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
final building = buildingData.buildingInputs[index];
return BuildingCard(
buildingName: building.buildingName,
);
},
itemCount: buildingData.buildingCount,
);
},
),
),
AddBuildingButton(
onPressed: () {
print('success');
},
),
],
),
),
Expanded(
flex: 50,
child: Container(
padding: EdgeInsets.only(top: 30, left: 30, right: 30),
decoration: BoxDecoration(
color: Color(0xff2e3032),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(50),
topRight: Radius.circular(50),
),
),
),
)
],
),
The itemExtent property is used to adjust the size of each child in the main axis of a list item and it should not be null and must be always a positive value. The other required property is children which are used to define the number of items added to form a list similar to ListView.
Just change your code as follow,
return ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
// checking if the index item is the last item of the list or not
if (index == buildingData.buildingCount){
return Your_New_Card_Widget;
}
final building = buildingData.buildingInputs[index];
return BuildingCard(
buildingName: building.buildingName,
);
},
itemCount: buildingData.buildingCount+1,
);
"Your_New_Card_Widget" is a widget you want for adding a new product in the list.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With