ListView.separated is not building in flutter

Question

here is the code of my screen, and in this screen i'm trying to build a list view.

Container(
      decoration: const BoxDecoration(gradient: kHomeColor),
      child: Column(
        children: [
          const AccountCard(
            name: 'Mishal Haneef',
            channelName: 'MSL DROID',
            courseCount: '3',
            subscribers: '65K',
          ),
          ListView.separated(
            
            itemBuilder: (BuildContext context, int index) {
              print('entered  to itemBuilder');
              return const ListTile(
                title: Text('data $index'),
                leading: Icon(Icons.abc),
                trailing: Icon(Icons.arrow_left),
              );
            },
            itemCount: 3,
            separatorBuilder: (BuildContext context, int index) {
              return const Divider();
            },
          )
        ],
      ),
    );

and this is not working showing this error

#46     _drawFrame (dart:ui/hooks.dart:115:31)
(elided 3 frames from dart:async)
The following RenderObject was being processed when the exception was fired: RenderViewport#3884a NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
RenderObject: RenderViewport#3884a NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    needs compositing
    parentData: <none> (can use size)
    constraints: BoxConstraints(0.0<=w<=392.7, 0.0<=h<=Infinity)
    size: MISSING
    axisDirection: down
    crossAxisDirection: right
    offset: ScrollPositionWithSingleContext#f3aae(offset: 0.0, range: null..null, viewport: null, ScrollableState, AlwaysScrollableScrollPhysics -> ClampingScrollPhysics -> RangeMaintainingScrollPhysics, IdleScrollActivity#7e5b2, ScrollDirection.idle)
    anchor: 0.0
    center child: RenderSliverPadding#8e8d0 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
        parentData: paintOffset=Offset(0.0, 0.0)
        constraints: MISSING
        geometry: null
        padding: EdgeInsets(0.0, 24.0, 0.0, 0.0)
        textDirection: ltr
        child: RenderSliverList#29eb9 NEEDS-LAYOUT NEEDS-PAINT
            parentData: paintOffset=Offset(0.0, 0.0)
            constraints: MISSING
            geometry: null
            no children current live

i don't get it what they are saying and showing a erroe log that relevent error cause this widget (showing all widget name from scaffold to list view), why is this happening, and how can i fix this,

Answer 1

Just wrap the ListView.separated with Expanded Widget like the below one:

Container(
   decoration: const BoxDecoration(gradient: kHomeColor),
   child: Column(
      children: [
         const AccountCard(
           name: 'Mishal Haneef',
           channelName: 'MSL DROID',
           courseCount: '3',
           subscribers: '65K',
         ),
         Expanded(
              child: ListView.separated(
                itemBuilder: (BuildContext context, int index) {
                  print('entered  to itemBuilder');
                  return ListTile(
                    title: Text('data $index'),
                    leading: Icon(Icons.block),
                    trailing: Icon(Icons.arrow_left),
                  );
                },
                itemCount: 3,
                separatorBuilder: (BuildContext context, int index) {
                  return const Divider();
                },
              ),
            ),
          ],
      ),
),