Flutter how to have multiple Lists

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' and Vertical viewport was given unbounded height.

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

oww it works thank you , the problem the screen has a lot of scrollable elements , how to make it with better scrolling while keeping the listviews? — Fares Ben Slama
You can set the primary: false for all the inner scrollviews so that only the parent scrollview is primary — Syed Ali Raza Bokhari

Huthaifa Muayyad Huthaifa Muayyad · Accepted Answer · 2021-03-26T17:53:33

Change this:

Container(child:
ListView.builder(
itemBuilder: (context, index){
return Card(

to this:

Flexible(child:
ListView.builder(
shrinkwrap: true,
itemBuilder: (context, index){
return Card(

This is caused because you're using a listviewbuilder inside a column, and both expand in the same direction, flutter doesn't know when to stop laying out the listview. If Flexible doesn't work, use expanded instead, and keep the shrink wrap.

Flutter how to have multiple Lists

3 Answers