Search code examples
flutterdartlistviewflutter-layout

Remove extra space after ListView.builder


I am trying to remove extra space after the listview builder but i am not successful I tried different approaches like I wrapped my listview.builder with MediaQuery.removePadding and set the padding value to zero I also set the padding for the listview.builder to zero as well but i am not getting the required output. I don't know where i am making the mistake.

Here is the code:

SizedBox(
    width: widget.isDialog ? 600 : double.infinity,
    height: MediaQuery.of(context).size.height / 2.5,
    child: ThemeConfig.selectFilterAsCheckBox
        ? Column(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Flexible(
                child: ListView.builder(
                    physics: const ScrollPhysics(),
                    itemCount: tags.length,
                    itemBuilder: (context, index) {
                      return CheckboxListTile(
                        value: tempSelectedTags.contains(tags[index].id),
                        onChanged: (e) {
                          setState(() {
                            if (tempSelectedTags.contains(tags[index].id)) {
                              tempSelectedTags.remove(tags[index].id);
                            } else {
                              tempSelectedTags.add(tags[index].id);
                            }
                          });
                        },
                        title: Text(
                          tags[index].name,
                          style: !tempSelectedTags.contains(tags[index].id)
                              ? textTheme.labelMedium?.copyWith(
                                  color: ThemeConfig.colorgreen)
                              : textTheme.titleSmall?.copyWith(
                                  color: ThemeConfig.colorgreen),
                        ),
                      );
                    }),
              ),
              Padding(
                padding: const EdgeInsets.only(bottom: 12),
                child: PrimaryButton(
                  title: Apply,
                  onPressed: () {
                    viewModel.setting(tempSelectedTags);
                    Navigator.pop(context);
                  },
                ),
              ),
            ],
          )

Solution

  • You can include shrinkWrap: true, on listView this will solve,

    Flexible(
      child: ListView.builder(
          shrinkWrap: true,
          physics: const ScrollPhysics(),
    

    But I will prefer increasing item length by one.

    ListView.builder(
      physics: const ScrollPhysics(),
      itemCount: itemLength + 1,
      itemBuilder: (context, index) {
        if (index == itemLength) {
          return Align(
            alignment: Alignment.centerRight,
            child: Padding(
                padding: const EdgeInsets.only(bottom: 11),
                child: Text("BTN")),
          );
        }
        return CheckboxListTile(
          value: true,
          onChanged: (e) {},
          title: Text(
            "tags[index].name",
          ),
        );
      }),