How to set children heights in GridView to the maximum height among children? - flutter

I'd like to set the heights of the children of a GridView to the maximum height among all the children. I don't want to type a fixed value in childrenAspectRatio or in mainAxisExtent, I need the heights to adapt to the biggest child.
Code:
GridView.builder(
shrinkWrap: true,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisExtent: 256, // don't want to set this because could cause overflow or waste of blank space
),
itemCount: prizes.length,
itemBuilder: (context, index){
return Card(
elevation: 3.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)),
color: Colors.white,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
Stack(
children: [
Image.asset(prizes[index]["image"]),
]
),
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Text(
prizes[index]["name"],
style: const TextStyle(fontWeight: FontWeight.bold, ),
),
),
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
prizes[index]["cost"].toString(),
style: const TextStyle(fontWeight: FontWeight.normal),
),
Padding(
padding: const EdgeInsets.only(left : 4.0),
child: SizedBox(
width: 14,
height: 14,
child: svg),
),
],
),
),
Padding(
padding: const EdgeInsets.only(top: 10),
child: ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.blue),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
)
)
),
onPressed: () async {
},
child: Padding(
padding: EdgeInsets.all(15.0),
child: Text(AppLocalizations.of(context)!.riscuoti,
style: TextStyle(
fontSize: 16
),
),
),
),
),
],
),
),
);
},
),

Related

Another exception was thrown: RenderBox was not laid out: RenderFlex#6ac69

I want to display list and the data come from API. And I got error
Another exception was thrown: RenderBox was not laid out: RenderPadding#64692 relayoutBoundary=up5
NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I don't know what kind of error is this..
Bellow is my issue code
return AlertDialog(
insetPadding: EdgeInsets.only(bottom: 520),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)),
title: Container(
color: Color.fromARGB(255, 253, 253, 253),
child: Text('Comment', style: TextStyle(color: Color.fromARGB(255, 4, 4, 4))),
padding: const EdgeInsets.all(17),
margin: const EdgeInsets.all(0),
),
titlePadding: const EdgeInsets.all(0),
content: SingleChildScrollView(
child: Column(mainAxisSize: MainAxisSize.min, children: < Widget > [
GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 1,
),
itemCount: commentList.length,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(2.0),
child: Container(
child: InkWell(
child: Container(
padding: EdgeInsets.only(bottom: 10, top: 10, left: 20, right: 20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
border: Border.all(color: Color(0xffD4D4D4), width: 2.0)),
child: Column(
children: < Widget > [
SizedBox(height: 15),
Expanded(
child: Text(
"test",
textAlign: TextAlign.justify,
style: TextStyle(fontSize: 15, fontWeight: FontWeight.normal),
))
],
)),
)),
);
},
),
])),
);
The SingleChildScrollView can only have one child, and the GridView expands to fill the available space.
To fix the problem, wrap your GridView with a SizedBox and give it some height/width:
AlertDialog(
insetPadding: EdgeInsets.only(bottom: 520),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)),
title: Container(
color: Color.fromARGB(255, 253, 253, 253),
child: Text('Comment',
style: TextStyle(color: Color.fromARGB(255, 4, 4, 4))),
padding: const EdgeInsets.all(17),
margin: const EdgeInsets.all(0),
),
titlePadding: const EdgeInsets.all(0),
content: SingleChildScrollView(
child: Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
// <--- Add SizedBox here
SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.5,
child: GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 1,
),
itemCount: commentList.length,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(2.0),
child: Container(
child: InkWell(
child: Container(
padding: EdgeInsets.only(
bottom: 10, top: 10, left: 20, right: 20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
border:
Border.all(color: Color(0xffD4D4D4), width: 2.0)),
child: Column(
children: <Widget>[
SizedBox(height: 15),
Expanded(
child: Text(
"test",
textAlign: TextAlign.justify,
style: TextStyle(
fontSize: 15, fontWeight: FontWeight.normal),
))
],
)),
)),
);
},
),
),
])),
);

Flutter Listview Reverse

I am doing a basic tasks app. When there is a text saved from textfield it appears below in the same page in expanded view. I want to make the final task to go above the previous one but when I do reverse: true, it sends the first task to the bottom of the page. Can I make the first task to appear above and each new task to appear above the one posted before?
You can view my code here:
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
padding: const EdgeInsets.only(left: 8, top: 16),
child: const Text(
'Enter your task',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
),
Container(
padding: const EdgeInsets.only(top: 16, right: 8),
child: TextButton.icon(
onPressed: () {
setState(() {
tasks.add(textController.text);
});
},
icon: const Icon(Icons.save),
label: const Text('Save')),
),
],
),
Padding(
padding: const EdgeInsets.only(top: 16, right: 8, left: 8),
child: TextField(
controller: textController,
style: const TextStyle(color: Colors.black),
decoration: InputDecoration(
fillColor: Colors.grey.shade200,
filled: true,
hintStyle: TextStyle(color: Colors.grey.shade400),
hintText: "Type whatever you want",
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(15),
)),
),
),
const SizedBox(height: 16),
Container(
padding: const EdgeInsets.only(left: 8),
child: const Text(
'Tasks',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
)),
const SizedBox(height: 16),
Expanded(
child: tasks.length > 0
? ListView.builder(
reverse: false,
itemCount: tasks.length,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 100,
color: Colors.grey,
child: Text('${tasks[index]}'),
),
);
})
: Center(
child: Text('No Tasks Yet'),
),
),
],
),
Concept - use listname.insert(int index,element) function to add element at a particular position in your case it is position 1 (after 0)
int i = 0 ;
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
padding: const EdgeInsets.only(left: 8, top: 16),
child: const Text(
'Enter your task',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
),
Container(
padding: const EdgeInsets.only(top: 16, right: 8),
child: TextButton.icon(
onPressed: () {
tasks.isempty == true? i = 0 : i = 1;
setState(() {
tasks.insert(i,textController.text);
});
},
icon: const Icon(Icons.save),
label: const Text('Save')),
),
],
),
Padding(
padding: const EdgeInsets.only(top: 16, right: 8, left: 8),
child: TextField(
controller: textController,
style: const TextStyle(color: Colors.black),
decoration: InputDecoration(
fillColor: Colors.grey.shade200,
filled: true,
hintStyle: TextStyle(color: Colors.grey.shade400),
hintText: "Type whatever you want",
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(15),
)),
),
),
const SizedBox(height: 16),
Container(
padding: const EdgeInsets.only(left: 8),
child: const Text(
'Tasks',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
)),
const SizedBox(height: 16),
Expanded(
child: tasks.length > 0
? ListView.builder(
reverse: false,
itemCount: tasks.length,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 100,
color: Colors.grey,
child: Text('${tasks[index]}'),
),
);
})
: Center(
child: Text('No Tasks Yet'),
),
),
],
),
Try This i use this method when i want to reverse and list
Expanded(
child: tasks.length > 0
? ListView.builder(
reverse: false,
itemCount: tasks.length,
itemBuilder: (context, index) {
int rIndex = tasks.length - 1 - index;
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 100,
color: Colors.grey,
child: Text('${tasks[rIndex]}'),
),
);
})
: Center(
child: Text('No Tasks Yet'),
),
),

Error due to the fact that the widget is full

I ran into a problem that the content does not fit in the widget because of this, an error occurs from the overflow of the widget. Please tell me how can I solve this problem? I want only the list of languages ​​to scroll, not the whole screen. I've tried different options but haven't been able to resolve it yet. If anyone knows a solution to this problem, please let me know. I will be grateful.
Padding(
padding: const EdgeInsets.only(left: 24, right: 24),
child: Column(
children: [
const SizedBox(height: 178),
const BackStepWidget(text: 'Select Language'),
const SizedBox(height: 30),
SizedBox(
width: size.width,
child: Card(
color: constants.Colors.greyDark,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24)),
child: Column(
children: [
const SizedBox(height: 16),
Padding(
padding: const EdgeInsets.only(left: 16, right: 20),
child: Row(
children: [
Expanded(
child: TextFormField(
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(7),
filled: true,
fillColor: constants.Colors.greyLight,
hintText: 'Search',
hintStyle:
TextStyle(color: constants.Colors.white),
prefixIcon: Icon(
Icons.search,
color: constants.Colors.white,
),
suffixIcon: Icon(Icons.keyboard_voice,
color: constants.Colors.white),
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(10)),
)),
)),
const SizedBox(width: 14),
const Text('Cancel',
style: constants.Styles.smallBookTextStyleWhite)
],
),
),
const SizedBox(height: 14),
Padding(
padding: const EdgeInsets.only(left: 16),
child: MediaQuery.removePadding(
context: context,
removeTop: true,
child: ListView.separated(
// physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
separatorBuilder: ((context, index) => Divider(
height: 2,
color: constants.Colors.white.withOpacity(0.2))),
itemCount: language.length,
itemBuilder: (context, index) => Padding(
padding: const EdgeInsets.only(top: 9, bottom: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
language[index],
style:
constants.Styles.smallBoldTextStyleWhite,
),
Text(
language[index],
style: constants
.Styles.smallerBookTextStyleWhite,
),
],
),
// ),
),
),
),
),
],
),
),
)
],
),
);
Change your outer column widget to Listview and also set its physics property to NevenScrollable widget. The Internal list view will remain the same.
Padding(
padding: const EdgeInsets.only(left: 24, right: 24),
child: ListView(
physics : NeverScrollablePhysics(),
shrinkWrap : true,
children: [
const SizedBox(height: 178),
const BackStepWidget(text: 'Select Language'),
const SizedBox(height: 30),
SizedBox(
width: size.width,
child: Card(
color: constants.Colors.greyDark,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24)),
child: ListView(
physics : NeverScrollablePhysics(),
shrinkWrap : true,
children: [
const SizedBox(height: 16),
Padding(
padding: const EdgeInsets.only(left: 16, right: 20),
child: Row(
children: [
Expanded(
child: TextFormField(
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(7),
filled: true,
fillColor: constants.Colors.greyLight,
hintText: 'Search',
hintStyle:
TextStyle(color: constants.Colors.white),
prefixIcon: Icon(
Icons.search,
color: constants.Colors.white,
),
suffixIcon: Icon(Icons.keyboard_voice,
color: constants.Colors.white),
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(10)),
)),
)),
const SizedBox(width: 14),
const Text('Cancel',
style: constants.Styles.smallBookTextStyleWhite)
],
),
),
const SizedBox(height: 14),
Padding(
padding: const EdgeInsets.only(left: 16),
child: MediaQuery.removePadding(
context: context,
removeTop: true,
child: ListView.separated(
shrinkWrap: true,
separatorBuilder: ((context, index) => Divider(
height: 2,
color: constants.Colors.white.withOpacity(0.2))),
itemCount: language.length,
itemBuilder: (context, index) => Padding(
padding: const EdgeInsets.only(top: 9, bottom: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
language[index],
style:
constants.Styles.smallBoldTextStyleWhite,
),
Text(
language[index],
style: constants
.Styles.smallerBookTextStyleWhite,
),
],
),
// ),
),
),
),
),
],
),
),
)
],
),
);

Flutter GridView not scorlling properlly

I am trying to use GridView in flutter and I am trying to use scroll so that the app bar and the filter buttons that I have above the GirdView would go up when I scroll down. However, the appbar is moving up when I scroll down but the filter buttons that I have above the GridView is not moving up. Please help me fix this problem. :(
This is Widget build
#override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: (context, innerBoxIsScrolled) => [
SliverAppBar(
leadingWidth: 130,
leading: Padding(
padding: EdgeInsets.only(top: 10, bottom: 10, left: 15),
child: ToggleButtons(
children: <Widget>[
Text('남성', style: TextStyle(color: Colors.grey)),
Text('여성', style: TextStyle(color: Colors.grey))
],
onPressed: (int index) {
setState(() {
for (int buttonIndex = 0; buttonIndex < _isGenderSelected.length; buttonIndex++) {
if (buttonIndex == index)
_isGenderSelected[buttonIndex] = true;
else
_isGenderSelected[buttonIndex] = false;
}
});
},
isSelected: _isGenderSelected,
fillColor: Color.fromRGBO(43, 68, 112, 1),
borderRadius: BorderRadius.circular(10),
)
),
centerTitle: true,
title: Text(
'아바타 탐색',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold
)
),
backgroundColor: Color.fromRGBO(242, 244, 246, 1),
actions: [
IconButton(
icon: Icon(Icons.refresh, color: Colors.black),
onPressed: () {},
)
]
)
],
body: SafeArea(
minimum: EdgeInsets.symmetric(horizontal: 15),
//child: SingleChildScrollView(
child: Column(
children: <Widget>[
_filterAvatar(),
_avatarBar(),
_avatarImages()
]
)
//)
)
),
);
}
This is the filter buttons that I have above the GridView
Widget _filterAvatar() {
return Column(
children: [
Container(
alignment: Alignment.topLeft,
child: Text('필터', style: TextStyle(color: Colors.grey))
),
Row(
children: [
Padding(
padding: EdgeInsets.only(top:5, bottom: 5),
child: Container(
alignment: Alignment.topLeft,
child: OutlinedButton(
onPressed: () {
setState(() {
if (_isFilterSelected[0] == false)
_isFilterSelected[0] = true;
else
_isFilterSelected[0] = false;
});
},
child: Text('피부색'),
style: OutlinedButton.styleFrom(
primary: Colors.grey,
),
)
)
),
Padding(
padding: EdgeInsets.only(top:5, bottom: 5, right: 3, left: 3),
child: Container(
alignment: Alignment.topLeft,
child: OutlinedButton(
onPressed: () {},
child: Text('쌍커풀'),
style: OutlinedButton.styleFrom(
primary: Colors.grey
)
)
)
),
Padding(
padding: EdgeInsets.only(top:5, bottom: 5, right: 3, left: 3),
child: Container(
alignment: Alignment.topLeft,
child: OutlinedButton(
onPressed: () {},
child: Text('눈'),
style: OutlinedButton.styleFrom(
primary: Colors.grey
)
)
)
),
Padding(
padding: EdgeInsets.only(top:5, bottom: 5),
child: Container(
alignment: Alignment.topLeft,
child: OutlinedButton(
onPressed: () {},
child: Text('얼굴형'),
style: OutlinedButton.styleFrom(
primary: Colors.grey
)
)
)
),
]
),
Divider(color: Colors.grey)
]
);
}
And this is the GridView that I have under the filter button
Widget _avatarImages() {
return Expanded(
child: GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
children: [
Padding(
padding: EdgeInsets.all(3),
child: Image.asset(_avatarList[0])
),
Padding(
padding: EdgeInsets.all(3),
child: Image.asset(_avatarList[1])
),
Padding(
padding: EdgeInsets.all(3),
child: Image.asset(_avatarList[2])
),
Padding(
padding: EdgeInsets.all(3),
child: Image.asset(_avatarList[3])
),
Padding(
padding: EdgeInsets.all(3),
child: Image.asset(_avatarList[4])
),
Padding(
padding: EdgeInsets.all(3),
child: Image.asset(_avatarList[5])
),
Padding(
padding: EdgeInsets.all(3),
child: Image.asset(_avatarList[6])
),
Padding(
padding: EdgeInsets.all(3),
child: Image.asset(_avatarList[7])
),
Padding(
padding: EdgeInsets.all(3),
child: Image.asset(_avatarList[8])
),
Padding(
padding: EdgeInsets.all(3),
child: Image.asset(_avatarList[9])
),
Padding(
padding: EdgeInsets.all(3),
child: Image.asset(_avatarList[10])
),
Padding(
padding: EdgeInsets.all(3),
child: Image.asset(_avatarList[11])
),
Padding(
padding: EdgeInsets.all(3),
child: Image.asset(_avatarList[12])
),
Padding(
padding: EdgeInsets.all(3),
child: Image.asset(_avatarList[13])
),
Padding(
padding: EdgeInsets.all(3),
child: Image.asset(_avatarList[14])
),
Padding(
padding: EdgeInsets.all(3),
child: Image.asset(_avatarList[15])
),
Padding(
padding: EdgeInsets.all(3),
child: Image.asset(_avatarList[16])
),
Padding(
padding: EdgeInsets.all(3),
child: Image.asset(_avatarList[17])
),
Padding(
padding: EdgeInsets.all(3),
child: Image.asset(_avatarList[18])
),
Padding(
padding: EdgeInsets.all(3),
child: Image.asset(_avatarList[19])
),
],
)
);
}

Flutter how to have multiple Lists

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
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.
Use a CustomScrollView with SliverList and/or SliverGrid for multiple scrolling list in the same widget.
Try adding shrinkWrap: true inside listView.builder
--UPDATE--
You can disable the scroll of the child scrollable widget if its parent is already scrollable.
children: [
ListView.builder(
...
physics: NeverScrollableScrollPhysics(),
...
)
...