Flutter ListView and ListView.builder problem

Question

i am beginner in flutter, i created a widget that displays a player informations, i used ListView and ListView.builder but i had an uknown error that said: Failed assertion: line 1785 pos 12: 'hasSize'

i do not know what is the source of this error, it started only when i added the ListView builder, before i add it everything was working fine

here what i have tried:

import 'package:flutter/material.dart';
import 'package:tl_fantasy/widgets/Player_Widget.dart';
import 'player_arguments.dart';

class PlayerDetails extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    final PlayerArguments args = ModalRoute.of(context).settings.arguments;
    List<Stats> stats = [
      Stats("Matches", args.matches ),
      Stats("Goals", args.goals ),
      Stats("Assists", args.assists ),
      Stats("Saves", args.saves ),
    ];

    List<Team> teams = [
      Team("Barcelona B", "https://i.pinimg.com/originals/ef/9c/3f/ef9c3fccec423f70376fcafa05c5d447.jpg","1998" ),
      Team("Barcelona", "https://i.pinimg.com/originals/ef/9c/3f/ef9c3fccec423f70376fcafa05c5d447.jpg","2005" ),
    ];

    return Scaffold(
      appBar: AppBar(
        title: Text("Player Details"),
        backgroundColor: Colors.blue[300],
        elevation: 0.0,
      ),
      body: Container(
        decoration: BoxDecoration(
            gradient: LinearGradient(
                begin: Alignment.centerLeft,
                end: Alignment.centerRight,
                colors: [Colors.purple, Colors.blue])
        ),
        child: Container(
          decoration: BoxDecoration(
              gradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                  colors: [Colors.purple, Colors.black38])),
          child: ListView(
            children: [
              SizedBox(
                height: 20,
              ),
              Container(
                width: double.infinity,
                child:    Card(
                  elevation: 4.0,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10.0),
                  ),
                  child: Padding(
                    padding: const EdgeInsets.all(16.0),
                    child:
                    Row(
                      children: <Widget>[
                        CircleAvatar(
                          backgroundImage: NetworkImage(args.image),
                        ),
                        const SizedBox(width:10.0),
                        Spacer(),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.end,
                          children: <Widget> [
                            Text(args.name, style: TextStyle( fontWeight:FontWeight.bold,
                              fontSize: 18.0,
                            )),
                            const SizedBox(height: 5.0, ),
                            Text(args.club, style: TextStyle( fontWeight:FontWeight.bold,
                              fontSize: 18.0,
                            )),
                            const SizedBox(height: 5.0, ),
                            Text("Role : "+args.role, style: TextStyle( fontWeight:FontWeight.bold,
                              fontSize: 18.0, color: Colors.grey[600],
                            )),
                            const SizedBox(height: 5.0, ),
                            Text("Position : "+args.club, style: TextStyle( fontWeight:FontWeight.bold,
                              fontSize: 18.0, color: Colors.grey[600],
                            )),
                            const SizedBox(height: 5.0, ),
                            Text("Nationality : "+args.nationality, style: TextStyle( fontWeight:FontWeight.bold,
                              fontSize: 18.0, color: Colors.grey[600],
                            )),

                          ],
                        ),

                      ],
                    ),
                  ),
                ),
              ),
              Container(
                  padding: EdgeInsets.all(12.0),
                  child: GridView.builder(
                    shrinkWrap: true,
                    itemCount: stats.length,
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 2,
                        crossAxisSpacing: 4.0,
                        mainAxisSpacing: 4.0
                    ),
                    itemBuilder: (BuildContext context, int index){
                      return Card(
                        child: Center(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.center,
                              children: <Widget>[
                                Container(
                                  alignment: Alignment.topCenter,
                                  padding: EdgeInsets.fromLTRB(0, 5, 0, 0),
                                  child:  Text(stats[index].result,style: TextStyle(fontSize: 20.0)),
                                ),
                                Container(
                                  alignment: Alignment.bottomCenter,
                                  child: Text(stats[index].title,style: TextStyle(fontSize: 25.0)),),

                              ]
                          ),
                        ),
                      );
                    },
                  )
              ),
              SizedBox(
                height: 30,
              ),
             Container(child:
             ListView.builder(
               itemBuilder: (context, index){
                 return Card(
                   elevation: 4.0,
                   shape: RoundedRectangleBorder(
                     borderRadius: BorderRadius.circular(10.0),
                   ),
                   child: Padding(
                     padding: const EdgeInsets.all(16.0),
                     child:
                     Row(
                       children: <Widget>[
                         CircleAvatar(
                           backgroundImage: NetworkImage(teams[index].image),
                         ),
                         const SizedBox(width:10.0),
                         Spacer(),
                         Column(
                           crossAxisAlignment: CrossAxisAlignment.end,
                           children: <Widget> [
                             Text(teams[index].name, style: TextStyle( fontWeight:FontWeight.bold,
                               fontSize: 18.0,
                             )),
                             const SizedBox(height: 5.0, ),
                             Text("joined : "+teams[index].date, style: TextStyle( fontWeight:FontWeight.bold,
                               fontSize: 18.0, color: Colors.grey[600],
                             )),
                           ],
                         ),

                       ],
                     ),
                   ),
                 );
               },
               itemCount: teams.length,
             ),),
            ],
          ),
        ),

      ),
    );
  }
}


class Stats{

  String title;
  String result;

  Stats(this.title,this.result);

}

class Team {

  String name;
  String image;
  String date;

  Team(this.name,this.image,this.date);

}

I am trying to know what happened and how to solve the error after i added the ListView.builder

Answer 1

I think your ListView.builder cannot figure out where to grow. ListView.builder' s parent Container has no height nor width specified. Try specifying those parameters like so:

    Container(
height: //your parameter,
width: //your parameter,
child:
             ListView.builder(
               itemBuilder: (context, index){
                 return Card(
                   elevation: 4.0,
                   shape: RoundedRectangleBorder(
                     borderRadius: BorderRadius.circular(10.0),
                   ),
                   child: Padding(
                     padding: const EdgeInsets.all(16.0),
                     child:
                     Row(
                       children: <Widget>[
                         CircleAvatar(
                           backgroundImage: NetworkImage(teams[index].image),
                         ),
                         const SizedBox(width:10.0),
                         Spacer(),
                         Column(
                           crossAxisAlignment: CrossAxisAlignment.end,
                           children: <Widget> [
                             Text(teams[index].name, style: TextStyle( fontWeight:FontWeight.bold,
                               fontSize: 18.0,
                             )),
                             const SizedBox(height: 5.0, ),
                             Text("joined : "+teams[index].date, style: TextStyle( fontWeight:FontWeight.bold,
                               fontSize: 18.0, color: Colors.grey[600],
                             )),
                           ],
                         ),

                       ],
                     ),
                   ),
                 );
               },
               itemCount: teams.length,
             ),),

Or try wrapping it with Column inside Expanded widget:

   Column(
  children: [
    Expanded(
      child: ListView.builder(
        itemBuilder: (context, index) {
          return Card(
            elevation: 4.0,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10.0),
            ),
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Row(
                children: <Widget>[
                  CircleAvatar(
                    backgroundImage: NetworkImage(teams[index].image),
                  ),
                  const SizedBox(width: 10.0),
                  Spacer(),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: <Widget>[
                      Text(teams[index].name,
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 18.0,
                          )),
                      const SizedBox(
                        height: 5.0,
                      ),
                      Text("joined : " + teams[index].date,
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 18.0,
                            color: Colors.grey[600],
                          )),
                    ],
                  ),
                ],
              ),
            ),
          );
        },
        itemCount: teams.length,
      ),
    ),
  ],
);

Answer 2

Both ListView and GridView want to use the entire available height. When you only have ListView , it fits the screen height and is happy about it. As for its content, it cannot have a defined height because ListView provides infinite height to its content.

Now you add GirdView which wants to do the same. It wants to occupy the entire height. But it is infinite. Thus the error.

To fix this, you should tell GirdView to not attempt to fit its parent but use whatever height is needed for the contnents. For this, use shrinkWrap: true on it.