(Flutter) Listview builder won't show checkboxlist - list

Question

It does not show any error
but the listview builder doesn't show any checkboxlist.
where did I goes wrong?
Please correct me.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:selfordering1/models/addon.dart';
import 'package:selfordering1/models/models.dart';
class Americano extends StatefulWidget {
#override
_AmericanoState createState() => _AmericanoState();
}
class _AmericanoState extends State<Americano> {
List<Products> beverages = [];
List<addonsize> listSize = [];
List<addontopping> listTopping = [];
var items = Products().beverages;
bool _value = false;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(''),
leading: IconButton(
icon: Icon(Icons.arrow_back, color: Colors.white),
onPressed: () {
Navigator.pop(context);
},
),
backgroundColor: Colors.transparent,
elevation: 0.0,
),
extendBodyBehindAppBar: true,
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/lightwood.jpg'),
fit: BoxFit.fill,
),
),
child: ListView(
physics: NeverScrollableScrollPhysics(),
primary: false,
padding: const EdgeInsets.all(100),
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 200,
height: 200,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(items[1].img),
),
),
),
Text(
items[1].name,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 30,
color: Colors.brown),
),
Container(
margin: EdgeInsets.all(50),
child: Text(
items[1].price.toStringAsFixed(0) + ' บาท',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 30,
color: Colors.brown),
),
),
],
),
Row(
children: [
Expanded(
child: ListView.builder(
shrinkWrap: true,
itemCount: listTopping.length,
itemBuilder: (BuildContext context, int i) {
return new Card(
child: new Container(
padding: new EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
new CheckboxListTile(
activeColor: Colors.blue,
dense: true,
//font change
title: new Text(
listTopping[i].topping,
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
),
),
value: listTopping[i].isCheck,
secondary: Container(
height: 50,
width: 50,
child: Text(listTopping[i]
.price
.toStringAsFixed(0)),
),
onChanged: (bool? val) {
itemChange(val!, i);
},
),
],
),
),
);
}),
),
],
),
],
),
),
);
}
void itemChange(bool val, int i) {
setState(() {
listTopping[i].isCheck = val;
});
}
}
Here is the model
import 'package:flutter/material.dart';
class addonsize {
int id;
String size;
double price;
addonsize({
required this.id,
required this.size,
required this.price,
});
}
List<addonsize> listSize = [
addonsize(
id: 6,
size: 'Grande',
price: 30,
),
addonsize(
id: 7,
size: 'Venti',
price: 50,
),
];
class addontopping {
int id;
String topping;
double price;
bool isCheck;
addontopping({
required this.id,
required this.topping,
required this.price,
required this.isCheck,
});
}
List<addontopping> listTopping = [
addontopping(
id: 8,
topping: 'Whipcream',
price: 0,
isCheck: true,
),
addontopping(
id: 9,
topping: 'Javachip',
price: 30,
isCheck: false,
),
addontopping(
id: 10,
topping: 'SoyMilk',
price: 20,
isCheck: false,
),
addontopping(
id: 11,
topping: 'ExtraSyrup',
price: 30,
isCheck: false,
),
];
If there are more detailed needed, please let me know.
Also, if it's not too much, I would like the price to adjust accordingly to topping's click. Please show me the examples #_#

Answer 1

The reason is that you are having 2 listTopping and 2 listSize variable in 2 different files. It will prioritize the one in your local _AmericanoState class (which has no data) over the other one (which has data).
To fix this, simply replace the listTopping and listSize inside _AmericanoState with the lists that have data in the other files.
class Americano extends StatefulWidget {
#override
_AmericanoState createState() => _AmericanoState();
}
class _AmericanoState extends State<Americano> {
List<Products> beverages = [];
var items = Products().beverages;
List<addonsize> listSize = [
addonsize(
id: 6,
size: 'Grande',
price: 30,
),
addonsize(
id: 7,
size: 'Venti',
price: 50,
),
];
List<addontopping> listTopping = [
addontopping(
id: 8,
topping: 'Whipcream',
price: 0,
isCheck: true,
),
addontopping(
id: 9,
topping: 'Javachip',
price: 30,
isCheck: false,
),
addontopping(
id: 10,
topping: 'SoyMilk',
price: 20,
isCheck: false,
),
addontopping(
id: 11,
topping: 'ExtraSyrup',
price: 30,
isCheck: false,
),
];
For the price update after every topping chosen, you can use this method. This returns a double value that you can use within your UI:
double calculatePrice() {
if (listTopping.isNotEmpty) {
var _price;
// Get those toppings that are chosen (`isCheck` is true)
final chosenTopping = listTopping.where((element) => element.isCheck);
// Calculate the sum
for (var item in chosenTopping) {
_price += item.price;
}
return _price;
}
return 0.0;
}
Quick note: You should use UpperCamelCase for every class name in Flutter as a good practice (so AddonTopping instead of addontopping). Read more on the styling here

Answer 2

Because your 'CheckboxListTile' is built by 'ListView.builder' with listTopping list.
But in '_AmericanoState' class, listTopping is empty.
...
List<addontopping> listTopping = [];
...
ListView.builder(
shrinkWrap: true,
itemCount: listTopping.length,
itemBuilder: (BuildContext context, int i) {
return new Card(
child: new Container(
padding: new EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
new CheckboxListTile(
You need to change listTopping variable in '_AmericanoState' class like below.
List<addontopping> listTopping = [
addontopping(
id: 8,
topping: 'Whipcream',
price: 0,
isCheck: true,
),
addontopping(
id: 9,
topping: 'Javachip',
price: 30,
isCheck: false,
),
addontopping(
id: 10,
topping: 'SoyMilk',
price: 20,
isCheck: false,
),
addontopping(
id: 11,
topping: 'ExtraSyrup',
price: 30,
isCheck: false,
),
];