SingleChildScrollView and ListView.builder scoll is showing in wrong place in Flutter

Question

The scrollbar of the SingleChildScrollView is appearing for the entire Column, rather than just the content inside the SingleChildScrollView. I want to either remove the scrollbar entirely or ensure that the scrollbar only applies to the SingleChildScrollView. I have tried all the ways but nothing helps, Even I have tried to set height for SingleChildScrollView still the scollbar is going down. Please let me know what I'm doing wrong?

 Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: selectedPickValues!.map((pickValue) {
                return Padding(
                  padding: const EdgeInsets.only(right: 10.0),
                  child: InputChip(
                    backgroundColor: Colors.white,
                    padding: EdgeInsets.zero,
                    labelPadding: EdgeInsets.only(left: 8),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(20.0), // Set the desired radius
                      side: BorderSide(color: UiUtils.getColor().withOpacity(0.30), width: 1.0), // Optional: add a border
                    ),
                    label: Text(CommonUtils.maxLength(pickValue.fieldvalue ?? '', 50),style: TextStyle(fontSize: 10),),
                    deleteIcon: Icon(
                      Icons.cancel,
                      color: UiUtils.getColor(),
                      size: 18.0, // Reduce the icon size as needed
                    ),
                    onDeleted: () {
                      setState(() {
                        selectedPickValues!.remove(pickValue);
                      });
                      widget.selectedFields(selectedPickValues);
                    },
                  ),
                );
              }).toList(),
            ),
          ),
          const SizedBox(height: 10,),
          SizedBox(
            height: 35,
            child: TextField(
              style: TextStyle(fontSize: 13),
              maxLines: 1,
              minLines: 1,
              enabled: true,
              onChanged: (value) {
                setState(() {
                  searchingText = value;
                });
              },
              decoration: InputDecoration(
                prefixIcon: Icon(Icons.search,color: Colors.grey,),
                counterText: "",
                hintText: 'Search here',
                filled: true,
                hintStyle: TextStyle(color: Colors.grey,fontWeight: FontWeight.normal),
                contentPadding: EdgeInsets.only(left: 8),
                fillColor: Colors.white70,
                enabledBorder: UiUtils.searchBorder(),
                disabledBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(8.0),
                  borderSide: BorderSide(color: Colors.grey, width: 0.5),
                ),
                focusedBorder: UiUtils.searchBorder(),
              ),
            ),
          ),
          SizedBox(height: 10),
          Container(
            constraints: BoxConstraints(maxHeight: 360),
            child: Column(
              children: [
                Wrap(
                  children: fieldValues!.pickvalues!.map((pickValues) {
                    bool userMatches = searchingText.isEmpty || pickValues.fieldvalue!.toLowerCase().contains(searchingText.toLowerCase());
                    if (searchingText.isNotEmpty && !userMatches) {
                      return SizedBox();
                    }

                    String fieldValue = pickValues.fieldvalue ?? '';
                    int id = pickValues.id ?? 0;
                    bool isSelected = selectedPickValues!.any((pickValue) => pickValue.id == id);

                    return Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 4.0),
                      child: ChoiceChip(
                        selectedColor: UiUtils.getColor(),
                        backgroundColor: Colors.white,
                        showCheckmark: false,
                        shape: RoundedRectangleBorder(
                          side: BorderSide(color: isSelected ? Colors.white : Colors.grey),
                            borderRadius: BorderRadius.all(Radius.circular(26))),
                        label: Text(fieldValue,style: TextStyle(color: isSelected ? Colors.white : null),),
                        selected: isSelected,
                        onSelected: (selected) {
                          setState(() {
                            if (selected) {
                              selectedPickValues!.add(pickValues);
                            } else {
                              selectedPickValues!.remove(pickValues);
                            }
                            widget.selectedFields(selectedPickValues);
                          });
                        },
                      ),
                    );
                  }).toList(),
                ),
              ],
            ),
          ),
        ],
      ),

I have tried the below ways to remove the scrollbar nothing helps

 ScrollConfiguration(
                  behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false),
                  child: ...,),

Tried by adding

 Scrollbar(
          thickness: 0,
          child: ...
 )

And

NotificationListener<ScrollNotification>(
                onNotification: (_) => true,
                child: ListView(....)
           )

Answer 1

Try below code hope its help to you.

Varibales:

int? _value = 1;
int? _value1 = 0;

UI

Scaffold(
  body: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      SizedBox(height: 20),
      SizedBox(
        height: 40,
        child: ListView.builder(
          itemCount: 20,
          scrollDirection: Axis.horizontal,
          shrinkWrap: true,
          itemBuilder: (context, index) {
            return Padding(
              padding: EdgeInsets.symmetric(horizontal: 5),
              child: ChoiceChip(
                label: Text('Item $index'),
                selected: _value == index,
                onSelected: (bool selected) {
                  setState(() {
                    _value = selected ? index : null;
                  });
                },
              ),
            );
          },
        ),
      ),
      SizedBox(height: 20),
      TextField(
        decoration: InputDecoration(
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(20.0),
          ),
          prefixIcon: Icon(Icons.search),
          hintStyle: TextStyle(color: Colors.grey[800]),
          hintText: "Search",
          fillColor: Colors.white70,
        ),
      ),
      SizedBox(height: 20),
      Expanded(
        child: SingleChildScrollView(
          child: Column(
            children: [
              Wrap(
                spacing: 5.0,
                children: List<Widget>.generate(
                  30,
                  (int index) {
                    return ChoiceChip(
                      label: Text('Item $index'),
                      selected: _value1 == index,
                      onSelected: (bool selected) {
                        setState(() {
                          _value1 = selected ? index : null;
                        });
                      },
                    );
                  },
                ).toList(),
              ),
              SizedBox(height: 20),
              Container(
                height: 100,
                color: Colors.green,
              ),
              SizedBox(height: 20),
              Container(
                height: 200,
                color: Colors.red,
              ),
            ],
          ),
        ),
      ),
    ],
  ),
);

Result->