Search code examples
listviewflutter

Flutter: How to add a button widget at the end of a ListView.builder that contains other type of widgets?


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

Solution

  • 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.