Unable to scroll ListView in Flutter

Question

I am new to flutter and am currently working on a project that is in need of a scrollable Column. So I used ListView. The CollapseTile is a refactored widget.

Here is the code:

Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
          children: <Widget>[
            ListView(
                scrollDirection: Axis.vertical,
                shrinkWrap: true,
                children: <Widget>[
                  SizedBox(height: 20.0),
                  CollapseTile(
                    text: 'Skin',
                    children: <Widget>[
                      ListView.builder(
                          shrinkWrap: true,
                          physics: AlwaysScrollableScrollPhysics(),
                          itemCount: data['skin'].length,
                          itemBuilder: (BuildContext context, int index) {
                            print(_selectedSkin);
                            return CheckboxListTile(
                              title: Text(data['skin'][index]['name']),
                              value: _selectedSkin
                                  .contains(data['skin'][index]['name']),
                              secondary: Image(
                                image: AssetImage(
                                    'images/${skinImageName[index]}'),
                              ),
                              onChanged: (bool selected) {
                                _onSelected(
                                    selected, data['skin'][index]['name']);
                              },
                            );
                          })
                    ],
                  ),
                  CollapseTile(
                    text: 'Teeth',
                    children: <Widget>[],
                  ),
                  CollapseTile(
                    text: 'Mouth',
                    children: <Widget>[],
                  ),
                  CollapseTile(
                    text: 'Eye',
                    children: <Widget>[],
                  ),
                  CollapseTile(
                    text: 'Hair',
                    children: <Widget>[],
                  ),
                  CollapseTile(
                    text: 'Nails',
                    children: <Widget>[],
                  ),
                ],
              ),
            ),
          ],
        );
  }

However, the ListView does not scroll and RenderFlex is overflowed.

Answer 1

Add SingleChildScrollView & add physiscs as NeverScrollableScrollPhysics inside both ListView .

 Scaffold(
  body: SingleChildScrollView( 
    child: Column(
      children: <Widget>[
    ListView(
    scrollDirection: Axis.vertical,
      physics: NeverScrollableScrollPhysics(),
      shrinkWrap: true,
      children: <Widget>[
        SizedBox(height: 20.0),
        CollapseTile(
          text: 'Skin',
          children: <Widget>[
            ListView.builder(
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                itemCount: data['skin'].length,
                itemBuilder: (BuildContext context, int index) {
                  print(_selectedSkin);
                  return CheckboxListTile(
                    title: Text(data['skin'][index]['name']),
                    value: _selectedSkin
                        .contains(data['skin'][index]['name']),
                    secondary: Image(
                      image: AssetImage(
                          'images/${skinImageName[index]}'),
                    ),
                    onChanged: (bool selected) {
                      _onSelected(
                          selected, data['skin'][index]['name']);
                    },
                  );
                })
          ],
        ),
        CollapseTile(
          text: 'Teeth',
          children: <Widget>[],
        ),
        CollapseTile(
          text: 'Mouth',
          children: <Widget>[],
        ),
        CollapseTile(
          text: 'Eye',
          children: <Widget>[],
        ),
        CollapseTile(
          text: 'Hair',
          children: <Widget>[],
        ),
        CollapseTile(
          text: 'Nails',
          children: <Widget>[],
        ),
      ],
    ),
),
  ),
],
);