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

Alexey Inkin · Accepted Answer · 2021-03-26 18:06:08Z

3

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.

answered Mar 26, 2021 at 18:06

Alexey Inkin

2,0691 gold badge16 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zephyr Bee · Accepted Answer · 2021-03-26 18:09:02Z

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,
      ),
    ),
  ],
);

Collectives™ on Stack Overflow

Flutter ListView and ListView.builder problem

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related