Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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);
                  },
                ),
              ),
            ],
          )
like image 560
Vanessa Avatar asked Jan 31 '26 05:01

Vanessa


2 Answers

To remove extra space after ListView.builder , you can do like this :

child: ListView.builder(
        padding: EdgeInsets.all(0.0),
like image 152
Oualid Kacemi Avatar answered Feb 02 '26 10:02

Oualid Kacemi


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",
      ),
    );
  }),
like image 44
Yeasin Sheikh Avatar answered Feb 02 '26 11:02

Yeasin Sheikh