Here is my the GridView that I use in my app when I run it locally :
And here when I make build (flutter build web) and run it on a server :
I get this error in the browser's console:
TypeError: Instance of 'minified:jO': type 'minified:jO' is not a
subtype of type 'minified:fC' main.dart.js:11277 at Object.c
(http://localhost/web/main.dart.js:10095:3) main.dart.js:11277 at
Object.az8 (http://localhost/web/main.dart.js:10740:18)
main.dart.js:11277 at iR.aMx [as a]
(http://localhost/web/main.dart.js:10735:3) main.dart.js:11277 at
eR.tq (http://localhost/web/main.dart.js:63249:6) main.dart.js:11277
at tE.xS (http://localhost/web/main.dart.js:66379:58)
main.dart.js:11277 at tE.ep
(http://localhost/web/main.dart.js:66299:3) main.dart.js:11277 at
tE.ep (http://localhost/web/main.dart.js:66408:3) main.dart.js:11277
at eD.ul (http://localhost/web/main.dart.js:66063:3)
main.dart.js:11277 at eD.eu
(http://localhost/web/main.dart.js:66023:16) main.dart.js:11277 at
eD.iZ (http://localhost/web/main.dart.js:66186:32)
edit : I added the code of CardTest
Here is the code of my GridView :
Column(
children: [
buildSubheadingText('Mes projets'),
buildVerticalSpace(5.0),
GridView.count(
shrinkWrap: true,
physics: BouncingScrollPhysics(),
childAspectRatio: kIsWeb ? 4/1.3 : 1 /1.4,
//physics: NeverScrollableScrollPhysics(),
crossAxisCount: 2,
children: [
CardTest(
loadingPercent: 0.25,
title: 'Making History Notes',
subtitle: '20 hours progress',
dueDate: DateTime(2022, 4, 12)
),
CardTest(
loadingPercent: 0.25,
title: 'Making History Notes',
subtitle: '20 hours progress',
dueDate: DateTime(2022, 4, 12)
),
CardTest(
loadingPercent: 0.25,
title: 'Making History Notes',
subtitle: '20 hours progress',
dueDate: DateTime(2022, 4, 12)
)
)
],
);
Here is the code of CardTest widget :
import 'package:flutter/material.dart';
class CardTest extends StatelessWidget {
final double loadingPercent;
final String title;
final String subtitle;
final DateTime dueDate;
CardTest({
required this.loadingPercent,
required this.title,
required this.subtitle,
required this.dueDate
});
#override
Widget build(BuildContext context) {
return Flexible(
child: Container(
color: Colors.amber,
child : Column(
children: [
Text(loadingPercent.toString()),
Text(title),
Text(subtitle),
Text(dueDate.toString()),
],
),
),
);
}
}
From #MarianoZorrilla in the comments :
I simply had to remove the Flexible from my CardTest.
I want to update the data of my chart, but it doesn't work. I used the chart I saw on a YouTube Video, which is using the fl_chart package. This is the whole code of the Youtube Video: https://github.com/JohannesMilke/fl_bar_chart_example. I think I have to use a setState somewhere, but I don't know where... I tried some options, but all failed, so I saw no other way than asking you. The weekChartDataGlobal is the varaiable which I want to be able to change, so my goal is to make the chart dynamic. I just putted you more or less the whole code into the question, because I don't know exactly what you need in order to answer my question. If you need more code please write me. Thanks in advance for helping me out with this big, big question.
class BarChartWidget extends StatefulWidget {
#override
_BarChartWidgetState createState() => _BarChartWidgetState();
}
class _BarChartWidgetState extends State<BarChartWidget> {
final double barWidth = 22;
#override
Widget build(BuildContext context) {
return BarChart(
BarChartData(
alignment: BarChartAlignment.center,
maxY: 20,
minY: 0,
groupsSpace: MediaQuery.of(context).size.width * 0.05,
barTouchData: BarTouchData(enabled: true),
titlesData: FlTitlesData(
bottomTitles: BarTitles.getTopBottomTitles(),
leftTitles: BarTitles.getSideTitles(),
),
gridData: FlGridData(
checkToShowHorizontalLine: (value) => value % BarData.interval == 0,
getDrawingHorizontalLine: (value) {
if (value == 0) {
return FlLine(
color: const Color(0xff363753),
strokeWidth: 3,
);
} else {
return FlLine(
color: const Color(0xff2a2747),
strokeWidth: 0.8,
);
}
},
),
barGroups: BarData.barData
.map(
(data) => BarChartGroupData(
x: data.id,
barRods: [
BarChartRodData(
y: data.y,
width: barWidth,
colors: [data.color],
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10),
)),
],
),
)
.toList(),
),
);
}
}
class BarTitles {
static SideTitles getTopBottomTitles() => SideTitles(
showTitles: true,
getTextStyles: (value) =>
const TextStyle(color: Colors.white, fontSize: 12),
margin: 0,
getTitles: (double id) => BarData.barData
.firstWhere((element) => element.id == id.toInt())
.name,
);
static SideTitles getSideTitles() => SideTitles(
showTitles: true,
getTextStyles: (value) =>
const TextStyle(color: Colors.white, fontSize: 12),
rotateAngle: 90,
interval: BarData.interval.toDouble(),
margin: 0,
reservedSize: 30,
getTitles: (double value) => value == 0 ? '0' : '${value.toInt()}',
);
}
class BarData {
static int interval = 5;
static List<Data> barData = [
Data(
id: 0,
name: 'Mon',
y: weekChartDataGlobal[0]['dayTime'].toDouble(),
color: Color(0xff19bfff),
),
Data(
name: 'Tue',
id: 1,
y: weekChartDataGlobal[1]['dayTime'].toDouble(),
color: Color(0xffff4d94),
),
Data(
name: 'Wed',
id: 2,
y: weekChartDataGlobal[2]['dayTime'].toDouble(),
color: Color(0xff2bdb90),
),
Data(
name: 'Thu',
id: 3,
y: weekChartDataGlobal[3]['dayTime'].toDouble(),
color: Color(0xffffdd80),
),
Data(
name: 'Fri',
id: 4,
y: weekChartDataGlobal[4]['dayTime'].toDouble(),
color: Color(0xff2bdb90),
),
Data(
name: 'Sat',
id: 5,
y: weekChartDataGlobal[5]['dayTime'].toDouble(),
color: Color(0xffffdd80),
),
Data(
name: 'Sun',
id: 6,
y: weekChartDataGlobal[6]['dayTime'].toDouble(),
color: Color(0xffff4d94),
),
];
}
class Data {
// for ordering in the graph
final int id;
final String name;
final double y;
final Color color;
const Data({
#required this.name,
#required this.id,
#required this.y,
#required this.color,
});
}
Well the only way I got to update this chart is to put the chart inside a list variable, put this list inside the build method and replace the chart using a function everytime I want to update the chart. Let me try to explain it. Follow the steps in order to understand what i'm doing here and be patient. To test it right away just copy the code, delete my comments and run it. Don't forget to use pub get for fl_chart dependencies in pubspec.yaml and importing the library with the import 'package:fl_chart/fl_chart.dart';
// STEP 1 - create the global variables - this is to adapt your code to this approach.
//Put all these variables outside and above any function of your BarChartWidget class.
late BuildContext sameContext; //we will initialize this variable later, its the build's method context variable
late _BarChartWidgetState thisState; //we will initialize this variable later, its the class State variable, wich contains the setState method
double theChanges = 0; // this is a placeholder for your weekChartDataGlobal variable since i don't know what is this weekChartDataGlobal but i know its the info that will be displayed and updated in the Y axis of the chart so i replaced it with this double variable to ilustrate this approach
final double barWidth = 22; // your barWidth variable made global
// STEP 4 - here is the method to get a new chart. It's the exact same code of our theChart list
//but once we throw the old BarChart widget away we need to get another and this new one will call all
//its methods again and be updated with the new Y values from theChanges in new Data objects.
//So this method just return the BarChart widget.
Widget getTheChart(){
return BarChart(
BarChartData(
alignment: BarChartAlignment.center,
maxY: 20,
minY: 0,
groupsSpace: MediaQuery.of(sameContext).size.width * 0.05,
barTouchData: BarTouchData(enabled: true),
titlesData: FlTitlesData(
bottomTitles: BarTitles.getTopBottomTitles(),
leftTitles: BarTitles.getSideTitles(),
),
gridData: FlGridData(
checkToShowHorizontalLine: (value) => value % BarData.interval == 0,
getDrawingHorizontalLine: (value) {
if (value == 0) {
return FlLine(
color: const Color(0xff363753),
strokeWidth: 3,
);
} else {
return FlLine(
color: const Color(0xff2a2747),
strokeWidth: 0.8,
);
}
},
),
barGroups: BarData.barData
.map(
(data) => BarChartGroupData(
x: data.id,
barRods: [
BarChartRodData(
y: data.y,
width: barWidth,
colors: [data.color],
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10),
)),
],
),
).toList(),
),
);
}
// STEP 2 - Here i putted all the widgets of your page inside a list variable called theChart,
//this is to make things easier to control, so we can update the BarChart widget easily.
//In this list i'm putting your BarChart widget and a Button widget below it for you to be able to see
//the chart being updated. I created this list too as a global variable.
//Note that since this list is being declared outside the build method, we are using
//sameContext variable instead of context and thisState.setState((){}) instead of setState((){}).
//As you can see in the list, the BarChart widget is placed at 0 and the Container holding the
//MaterialButton is placed at 1.
List<Widget> theChart = <Widget>[
BarChart(
BarChartData(
alignment: BarChartAlignment.center,
maxY: 20,
minY: 0,
//sameContext variable being used here
groupsSpace: MediaQuery.of(sameContext).size.width * 0.05,
barTouchData: BarTouchData(enabled: true),
titlesData: FlTitlesData(
bottomTitles: BarTitles.getTopBottomTitles(),
leftTitles: BarTitles.getSideTitles(),
),
gridData: FlGridData(
checkToShowHorizontalLine: (value) => value % BarData.interval == 0,
getDrawingHorizontalLine: (value) {
if (value == 0) {
return FlLine(
color: const Color(0xff363753),
strokeWidth: 3,
);
} else {
return FlLine(
color: const Color(0xff2a2747),
strokeWidth: 0.8,
);
}
},
),
barGroups: BarData.barData
.map(
(data) => BarChartGroupData(
x: data.id,
barRods: [
BarChartRodData(
y: data.y,
width: barWidth,
colors: [data.color],
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10),
)),
],
),
).toList(),
),
),
//this is the button widget, click to increase Y (theChanges variable) by 5,
//long press to decrease Y (theChanges variable) by 5
Container(
margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
child: MaterialButton(
color: Colors.lightBlue,
textColor: Colors.white,
child: Text("Press me!"),
onPressed: () {
//when you press the button we enter this method. Here we are outside the build method wich contains
//the context and the state variables so we need to use our state variable to call the setState
//method. This is the key point of the whole thing of updating the chart. We change the variable
//holding the Y value in the chart, here i'm using my theChanges variable but in your code it's that weekChartDataGlobal.
//Then we call the function BarData.updateData() (check step 3) to update the BarData static list variable wich contains the actual
//objects holding the Y values in the chart, and then we REPLACE THE BarChart WIDGET. That's right we throw
//the old widget away and replace it with a new one with the new values. Widgets atributes are final, we
//can't change them once they're settled so we need to replace them, the sooner you accept it the sooner you'll understand all this.
thisState.setState((){
theChanges += 5;
BarData.updateData();
theChart.removeAt(0);
theChart.insert(0, getTheChart()); // check step 4
});
},
onLongPress: (){
thisState.setState((){
theChanges -= 5;
BarData.updateData();
theChart.removeAt(0);
theChart.insert(0, getTheChart());
});
},
),
),
].toList();
class BarChartWidget extends StatefulWidget {
#override
_BarChartWidgetState createState() => _BarChartWidgetState();
}
class _BarChartWidgetState extends State<BarChartWidget> {
#override
Widget build(BuildContext context) {
// at this method your page will actually be built, here is where all the action will happen
//indeed so we
sameContext = context; // initialize our global context variable
thisState = this; // initialize our global State variable
//here we put theChart list variable inside a ListView and the ListView inside a container.
//The build method will get each widget inside the list and place it in order
return Container(
child: ListView.builder(
itemCount: theChart.length,
itemBuilder: (context, index){
return theChart[index];
},
),
);
}
}
class BarTitles {
static SideTitles getTopBottomTitles() => SideTitles(
showTitles: true,
getTextStyles: (value) =>
const TextStyle(color: Colors.white, fontSize: 12),
margin: 0,
getTitles: (double id) => BarData.barData
.firstWhere((element) => element.id == id.toInt())
.name,
);
static SideTitles getSideTitles() => SideTitles(
showTitles: true,
getTextStyles: (value) =>
const TextStyle(color: Colors.white, fontSize: 12),
rotateAngle: 90,
interval: BarData.interval.toDouble(),
margin: 0,
reservedSize: 30,
getTitles: (double value) => value == 0 ? '0' : '${value.toInt()}',
);
}
// STEP 3 here i replaced your weekChartDataGlobal with my theChanges variable to ilustrate the
//update and created the updateData() method.
class BarData {
static int interval = 5;
static List<Data> barData = [
Data(
id: 0,
name: 'Mon',
//y: weekChartDataGlobal[0]['dayTime'].toDouble(),
y: theChanges,
color: Color(0xff19bfff),
),
Data(
name: 'Tue',
id: 1,
//y: weekChartDataGlobal[1]['dayTime'].toDouble(),
y: theChanges,
color: Color(0xffff4d94),
),
Data(
name: 'Wed',
id: 2,
//y: weekChartDataGlobal[2]['dayTime'].toDouble(),
y: theChanges,
color: Color(0xff2bdb90),
),
Data(
name: 'Thu',
id: 3,
//y: weekChartDataGlobal[3]['dayTime'].toDouble(),
y: theChanges,
color: Color(0xffffdd80),
),
Data(
name: 'Fri',
id: 4,
//y: weekChartDataGlobal[4]['dayTime'].toDouble(),
y: theChanges,
color: Color(0xff2bdb90),
),
Data(
name: 'Sat',
id: 5,
//y: weekChartDataGlobal[5]['dayTime'].toDouble(),
y: theChanges,
color: Color(0xffffdd80),
),
Data(
name: 'Sun',
id: 6,
//y: weekChartDataGlobal[6]['dayTime'].toDouble(),
y: theChanges,
color: Color(0xffff4d94),
),
];
//this is another key point. Note that here i'm just clearing the whole static list and filling it
//again with the Data objects. I just copied the code above to create the static list and
//pasted down there. Why? Widgets attributes are final, their Y parameter won't change even if
//you update the theChanges variable so you need to throw them all away and place new ones
//with the new value of theChanges variable.
static void updateData(){
barData.clear();
barData = [
Data(
id: 0,
name: 'Mon',
//y: weekChartDataGlobal[0]['dayTime'].toDouble(),
y: theChanges,
color: Color(0xff19bfff),
),
Data(
name: 'Tue',
id: 1,
//y: weekChartDataGlobal[1]['dayTime'].toDouble(),
y: theChanges,
color: Color(0xffff4d94),
),
Data(
name: 'Wed',
id: 2,
//y: weekChartDataGlobal[2]['dayTime'].toDouble(),
y: theChanges,
color: Color(0xff2bdb90),
),
Data(
name: 'Thu',
id: 3,
//y: weekChartDataGlobal[3]['dayTime'].toDouble(),
y: theChanges,
color: Color(0xffffdd80),
),
Data(
name: 'Fri',
id: 4,
//y: weekChartDataGlobal[4]['dayTime'].toDouble(),
y: theChanges,
color: Color(0xff2bdb90),
),
Data(
name: 'Sat',
id: 5,
//y: weekChartDataGlobal[5]['dayTime'].toDouble(),
y: theChanges,
color: Color(0xffffdd80),
),
Data(
name: 'Sun',
id: 6,
//y: weekChartDataGlobal[6]['dayTime'].toDouble(),
y: theChanges,
color: Color(0xffff4d94),
),
];
}
}
class Data {
// for ordering in the graph
final int id;
final String name;
final double y;
final Color color;
const Data({
required this.name,
required this.id,
required this.y,
required this.color,
});
}
In case anyone doesn't want to do such a complex workaround, I simply added a ValueKey to my graph constructor. Then attached this to my selector widget, which changes the timeframe my graph is showing, e.g. day, month, week.
e.g.
String _yourVariableThatChangesHere = "monthView";
GTBarChart(
key: ValueKey(_yourVariableThatChangesHere),
data: ...
)
Then when your _yourVariableThatChangesHere changes, the graph gets rebuilt when you call setState.
I am trying to create a comment page. The list of comments are listed using ListView.builder. And when the user enter a comment, it will rebuild the list again to include the newly added comment. But somehow the list is not rebuild and i'm getting this message in terminal:
Changing the content within the the composing region may cause the
input method to behave strangely, and is therefore discouraged. See
https://github.com/flut ter/flutter/issues/78827 for more details
The newly added comment only shows when i close the comment page and reopen it again. Please help me, as i am not sure what is the issue and how to fix it.
Comment Page:
import 'package:flutter/material.dart';
import '../model/model_comment.dart';
class CommentsPage extends StatefulWidget {
#override
_CommentsPageState createState() => _CommentsPageState();
}
class _CommentsPageState extends State<CommentsPage> {
ValueNotifier<int> _counter = ValueNotifier<int>(0);
TextEditingController _controllerComment = TextEditingController();
bool _hasComment = false;
#override
void dispose() {
_controllerComment.dispose();
super.dispose();
}
_commentOnSend() {
setState(() {
var value = CommentModel(
avatarUrl: "https://randomuser.me/api/portraits/women/34.jpg",
name: "Laurent Oslo",
dateTime: "30 Dec 20 08:00",
comment: _controllerComment.text,
);
CommentModel.dummyData.insert(0, value);
});
_controllerComment.clear();
FocusScope.of(context).unfocus();
}
Widget _listView = ListView.builder(
itemCount: CommentModel.dummyData.length,
itemBuilder: (context, index) {
CommentModel _model = CommentModel.dummyData[index];
return Column(
children: <Widget>[
Divider(
height: 12.0,
),
Container(
padding: EdgeInsets.fromLTRB(3.0, 3.0, 3.0, 3.0),
child: ListTile(
leading: CircleAvatar(
radius: 24.0,
backgroundImage: NetworkImage(_model.avatarUrl),
),
title: Text(_model.name),
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(_model.comment),
Text(_model.dateTime),
],
),
),
),
],
);
},
);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Comments"),
titleSpacing: 40.0,
),
body: Container(
child: Column(
children: [
Expanded(child: _listView),
Divider(
height: 1.0,
),
ListTile(
leading: Container(
height: 40.0,
width: 40.0,
decoration: BoxDecoration(
color: Colors.deepPurple,
borderRadius: BorderRadius.all(Radius.circular(50.0))),
child: CircleAvatar(
radius: 50.0,
backgroundImage: NetworkImage(
"https://randomuser.me/api/portraits/men/83.jpg")),
),
title: TextField(
decoration: (InputDecoration(
hintText: "Add Comment"
)),
minLines: 1,
maxLines: 5,
controller: _controllerComment,
onChanged: (val) {
setState(() {
_counter.value += 1;
if (val.isNotEmpty) {
_hasComment = true;
} else {
_hasComment = false;
}
});
}),
trailing: ValueListenableBuilder(
valueListenable: _counter,
builder: (BuildContext context, int value, Widget? child) {
return IconButton(
onPressed: _hasComment
? () {
_commentOnSend();
}
: null,
icon: Icon(Icons.send_sharp,
color: _hasComment ? Colors.deepPurple : null),
);
},
),
),
],
),
),
);
}
}
Comment Model Class:
class CommentModel {
final String avatarUrl;
final String name;
final String dateTime;
final String comment;
CommentModel(
{required this.avatarUrl,
required this.name,
required this.dateTime,
required this.comment});
static List<CommentModel> dummyData = [
CommentModel(
avatarUrl: "https://randomuser.me/api/portraits/women/34.jpg",
name: "Laurent Oslo",
dateTime: "30 Dec 20 08:00",
comment:
"There is a reason why I implemented it like this. In a comment section, the same comment widget can appear multiple times. So, the keys assigned to each widget needs to be different. Otherwise I won’t be able to refer to a specific widget later on",
),
CommentModel(
avatarUrl: "https://randomuser.me/api/portraits/women/49.jpg",
name: "Tracy Wilbur",
dateTime: "01 Oct 20 17:00",
comment: "First Comment!",
),
CommentModel(
avatarUrl: "https://randomuser.me/api/portraits/women/23.jpg",
name: "Michael Scott",
dateTime: "30 Sept 20 06:00",
comment:
"The idea is simple. Use the prefix with something else to make the key unique. In this case, I’ve used the index value to make them unique. I used the keys in line 25, 51, 56, and 60. See how I’ve done it in these lines.",
),
CommentModel(
avatarUrl: "https://randomuser.me/api/portraits/men/45.jpg",
name: "Williams John",
dateTime: "17 Sept 20 02:00",
comment: "Join!",
),
CommentModel(
avatarUrl: "https://randomuser.me/api/portraits/women/77.jpg",
name: "Claire Rach",
dateTime: "15 Aug 20 19:00",
comment:
"I want the comment section to be hidden away. A user can view comments by tapping to expand a widget. Meaning, the comment section should be collapsible. It will toggle between expanded and collapsed mode when being tapped.",
),
CommentModel(
avatarUrl: "https://randomuser.me/api/portraits/men/81.jpg",
name: "Joe Panama",
dateTime: "05 Jul 20 03:00",
comment:
"A comment will have 3 data values which are commenting user details, time of comment posting and the actual text of the comment. I’ve created a “CommentModel” class to create this model.",
),
CommentModel(
avatarUrl: "https://randomuser.me/api/portraits/men/83.jpg",
name: "Mark Hamill",
dateTime: "09 Jun 20 15:00",
comment:
"Because comments are part of a post, “PostModel” needs to have a list of comment data. So I’ve modified “PostModel” to have a list of “CommentModel” objects. Refer to the code changes to see what I’ve done.",
),
CommentModel(
avatarUrl: "https://randomuser.me/api/portraits/men/85.jpg",
name: "Williams Dafoe",
dateTime: "25 May 20 20:00",
comment:
"Notice lines 18 to 29. I’ve used the “ExpansionTile” widget to create a collapsible list of comments. Each comment is a “_SingleComment” widget implemented in lines 34 to 67.",
),
CommentModel(
avatarUrl: "https://randomuser.me/api/portraits/men/98.jpg",
name: "Phillips Mach",
dateTime: "01 Apr 20 17:00",
comment:
"New to app development and flutter in general(high schooler). Can I use this template? Do I have to give credit or can I just use it? At the very least, can I see the source code so I can learn from it?",
),
CommentModel(
avatarUrl: "https://randomuser.me/api/portraits/men/12.jpg",
name: "Joe Snowden",
dateTime: "04 Mar 20 16:00",
comment: "PM ME!",
),
];
}
This is because you are putting your Listview.builder in a state variable which is expected behavior since state variables do not get reinitialized in rebuilds.
If you want to refactor you can create a new function to return it:
ListView getList(){
return ListView.builder(
itemCount: CommentModel.dummyData.length,
itemBuilder: (context, index) {
CommentModel _model = CommentModel.dummyData[index];
return Column(
children: <Widget>[
Divider(
height: 12.0,
),
Container(
padding: EdgeInsets.fromLTRB(3.0, 3.0, 3.0, 3.0),
child: ListTile(
leading: CircleAvatar(
radius: 24.0,
backgroundImage: NetworkImage(_model.avatarUrl),
),
title: Text(_model.name),
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(_model.comment),
Text(_model.dateTime),
],
),
),
),
],
);
},
);
}
I have an app which displays data in Cards inside GridView like so:
GridView.count(
crossAxisCount: 2,
children: <Widget>[
_customCard(
imageUrl: image1, item: item1, price: price1, count: count1
),
_customCard(
imageUrl: image2, item: item2, price: price2, count: count2
),
_customCard(
imageUrl: image3, item: item3, price: price3, count: count3
),
_customCard(
imageUrl: image4, item: item4, price: price4, count: count4
),
],
),
I want to get the specified card name when it is pressed depending on its index inside a List as we do in ListView.
class item {
final String name;
final int count;
final String imageUrl;
final double price;
item({this.name, this.imageUrl, this.count, this.price});
}
List<item> tops = [
new item(
imageUrl: "tshirt.png",
name: "T-shirt",
count: 0,
price: 0.50
),
new item(
imageUrl: "shirt.png",
name: "Shirt",
count: 0,
price: 0.80
),
Is there a way to do so with GridView or shall I try something else?
You can use Gridview.builder and use its index to get the related object from list:
return GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
physics: ScrollPhysics(),
itemCount: _customCards.length,
itemBuilder: (BuildContext context, int index){
return Inkwell(child:_customCards(
imageUrl: image[index], item: item[index], price: price[index], count: count[index]),
onTap(){
print(tops[index]);
}
),
}
);*