8

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

1 Answer 1

20

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.

2
  • 3
    I get the error "RangeError (index): invalid value: value range is empty: 0 Dec 29, 2019 at 8:39
  • 3
    That worked! Thank you, i'm working on my first app and people like you are who make this journey so rewarding! Dec 30, 2019 at 1:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.