How to have an item in ListView cover to whole screen in Flutter

Issue

I want to have a scrollable view that have fixed number of items. the first item should cover the parent container and than the user can scroll down to see the rest of the items.

I’ve tried to add Expanded to the first item but i get white screen

  ListView(
    children: <Widget>[
      Expanded(child: MainInfo(),),
      Divider(height: 2, color: Colors.black,),    
      MainInfo(),    
      Divider(height: 2, color: Colors.black,),    
      MainInfo(),  
      Divider(height: 2, color: Colors.black,),    
      MainInfo(),  
      Divider(height: 2, color: Colors.black,),    
      MainInfo(),   
    ],
  ),

Should i use ListView or SingleChildScrollView (didn’t worked with Expanded also)?

Solution

I’ve managed to accomplish that by using LayoutBuilder that return ListView

LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
    return ListView(
      children: <Widget>[
        Container(
          child: MainInfo(),
          height: constraints.maxHeight,
        ),
        Divider(
          height: 2,
          color: Colors.black,
        ),
        MainInfo(),
        Divider(
          height: 2,
          color: Colors.black,
        ),
        MainInfo(),
        Divider(
          height: 2,
          color: Colors.black,
        ),
        MainInfo(),
        Divider(
          height: 2,
          color: Colors.black,
        ),
        MainInfo(),
      ],
    );
  }),

Answered By – b k

Answer Checked By – Mildred Charles (FlutterFixes Admin)

Leave a Reply

Your email address will not be published.