Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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),
              ),
            ),
          ),
        )
      ],
    ),
like image 701
MoofinTheExplorer Avatar asked Dec 29 '19 07:12

MoofinTheExplorer


People also ask

What is itemExtent in flutter ListView?

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.


1 Answers

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.

like image 120
Jay Mungara Avatar answered Sep 27 '22 19:09

Jay Mungara