Problem rendering widgets above expanded listview in a column

I’m trying to render a Column (inside CupertinoPageScaffold) where the column has (in the children) widgets before and after an expanded listview. The widgets which are after the listview are rendered but the ones before the listview are not rendered.

Blockquote

class TestWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          constraints: BoxConstraints(
            minHeight: 50.0,
          ),
          child: Center(
            child: Text(
              'Top label',
              style: TextStyle(
                  fontSize: 22.0,
                  fontWeight: FontWeight.bold,
                  color: Colors.teal),
            ),
          ),
        ),
        Expanded(
          child: ListView.separated(
            itemCount: 20,
            separatorBuilder: (context, index) {
              return Divider();
            },
            itemBuilder: (context, index) {
              return Material(
                child: ListTile(
                  leading: CircleAvatar(),
                  title: Text('Test title'),
                ),
              );
            },
          ),
        ),
        Container(
          constraints: BoxConstraints(
            minHeight: 50.0,
          ),
          child: Center(
            child: Text(
              'Bottom label',
              style: TextStyle(
                  fontSize: 22.0,
                  fontWeight: FontWeight.bold,
                  color: Colors.teal),
            ),
          ),
        ),
      ],
    );
  }
}
2 Likes

Hey @maniche. The issue isn;t that it’s not rendering. The widgets are being overlayed. Please try keeping Column as a child of Safe Area, then you will be able to see the widget. Here’s how you can do it in your code:

class TestWidget extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return SafeArea(
     child: Column(
       children: <Widget>[
         Container(
           alignment: Alignment.bottomCenter,
           constraints: BoxConstraints(
             minHeight: 50.0,
           ),
           child: Text(
             'Top label',
             style: TextStyle(
                 fontSize: 22.0,
                 fontWeight: FontWeight.bold,
                 color: Colors.teal),
           ),
         ),
         Expanded(
           child: ListView.separated(
             itemCount: 20,
             separatorBuilder: (context, index) {
               return Divider();
             },
             itemBuilder: (context, index) {
               return Material(
                 child: ListTile(
                   leading: CircleAvatar(),
                   title: Text('Test title'),
                 ),
               );
             },
           ),
         ),
         Container(
           constraints: BoxConstraints(
             minHeight: 50.0,
           ),
           child: Center(
             child: Text(
               'Bottom label',
               style: TextStyle(
                   fontSize: 22.0,
                   fontWeight: FontWeight.bold,
                   color: Colors.teal),
             ),
           ),
         ),
       ],
     ),
   );
 }
}

2 Likes