Search code examples
listviewflutterdartbuilder

ListView.builder() breaking the whole page of my app. What am I doing wrong?


When I implement the ListView class with the .builder() method my app breaks and wont display anything on that page.

Here is how I've implemented ListView

Column(children: <Widget>[
  ListView.builder(
    itemCount: profileListItems.length,
    itemBuilder: (BuildContext context, int index) {
      ProfileListItem profileListItem = profileListItems[index];
      return InkWell(
        onTap: () {},
        child: Padding(
          padding: const EdgeInsets.all(12.0),
          child: Row(
            children: <Widget>[
              Stack(
                children: <Widget>[
                  ClipRRect(
                    borderRadius: BorderRadius.circular(28.0),
                    child: Container(
                       height: 50.0,
                       width: 50.0,
                       color: Theme.of(context).primaryColor,
                       child: profileListItem.icon
                     ),
                   ),
                 ],
               ),
               SizedBox(width: 16),
               Text(
                 profileListItem.text,
                 style: TextStyle(
                   color: Colors.black87,
                   fontWeight: FontWeight.bold,
                   fontSize: 16
                 ),
               )
             ],
           ),
         ),
       );
     }
   )
])

And here is my ProfileListItem class

import 'package:flutter/material.dart';

class ProfileListItem {
  Icon icon;
  String text;
  String navigation;

  ProfileListItem({
    this.icon,
    this.text,
    this.navigation,
  });
}

List<ProfileListItem> profileListItems = [
  ProfileListItem(
    icon: Icon(
      Icons.dashboard,
      color: Colors.white,
      size: 24.0,
    ),
    text: 'Dashoard',
    navigation: 'Italy',
  )
];

When I add the ListView class all of the other widgets on the page disappear as well. Just a white screen.


Solution

  • Maybe you can use the Expanded widget as a parent for the listview

    Column(
     children: <Widget>[
    Expanded(
    child: ListView.builder(
    shrinkWrap: true,
    itemCount: ordersList.length,// Your List
    itemBuilder: (context, index) {
    // Followed by your return widget.
    })),
    ]
    )
    

    If you do not want to use the complete space you can remove the expanded and just keep the shrinkWrap: true, parameter.