CODEWITHSUNDEEP
flutter
killerbeast
killerbeast

Reputation: 35

Flutter - Scrollable List of Widgets

I have a screen that displays a list of widgets, something like this:

Column(                              
    children: listW,
),

The listW object is of type List<Widget>. The first index contains a ListTitle and all others are of type Card. The number of cards are added dynamically. Now the problem is that when the list has lets say 10 Card objects, it is hidden below the screen. I need some sort of a ScrollableView to contain my list. How can I do that since SingleChildScrollableView can bear only one widget. How can I deal with this issue?

Upvotes: 2

Views: 6730

Answers (2)

user6628028
user6628028

Reputation:

You can use a ListView() for this.

ListView(
    children: <Widget>[
         //Your widgets
    ]
)

Keep in mind, that a list view renders all the items currently in the list, which means huge lists will cause performance issues. You can get around this using a ListView.builder, since this creates items as they are scrolled on the screen.

class FruitList extends StatelessWidget{
  final List<String> fruits = [ "Apple", "Banana", "Pear", "Orange", "Kiwi" ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
          padding: EdgeInsets.all(5),
          child: ListView.builder(
            itemBuilder: _buildFruitItem,
            itemCount: fruits.length,
          )
        )
    );
  }

  Widget _buildFruitItem( BuildContext context, int index ){
    return Card(
      child: Text( fruits[index] ),
    );
  }

}

You can checkout more documentation on this here: https://flutter.io/docs/cookbook/lists/long-lists

Upvotes: 3

Guy Luz
Guy Luz

Reputation: 4009

Try changing you code to this

ListView(children: listW,)

Upvotes: 3

Related Questions