Countdown in a ListView (Flutter) - date

Question

I would like to find a solution to create countdowns from a date and put them in a ListView. I hope this does not slow down the application too much when using it.
I already have a code I want to keep, it's a RecyclerView with images and text.
Here's the code, if you need anything else I'll send it to you.
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import '../recyclerview/data.dart';
import 'package:watch/constants.dart';
class ListViewExample extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return new ListViewExampleState(
);
}
}
class ListViewExampleState extends State<ListViewExample>{
List<Container> _buildListItemsFromItems(){
int index = 0;
return item.map((item){
var container = Container(
decoration: index % 2 == 0?
new BoxDecoration(color: const Color(0xFFFFFFFF)):
new BoxDecoration(
color: const Color(0xFFFAFAF5)
),
child: new Row(
children: <Widget>[
new Container(
margin: new EdgeInsets.all(5.0),
child: new CachedNetworkImage(
imageUrl: item.imageURL,
width: 200.0,
height: 100.0,
fit: BoxFit.cover,
),
),
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
padding: const EdgeInsets.only(bottom: 75.0 ),
child: Text(
item.title,
style: kItemTitle,
),
),
Container(
padding: const EdgeInsets.only(left: 15.0),
child:Text(
item.description,
style: kItemDescription,
),
),
]),
)
],
)
);
index = index + 1;
return container;
}).toList();
}
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text('Accueil', style: kAppBarStyle,),
backgroundColor: Colors.white,
elevation: 0,
),
body: ListView(
children: _buildListItemsFromItems(),
),
);
}
}
Thank you!
Update : to add the countdown look this post :Date Countdown Timer
and for the lazy loading, I have changed my ListView to a ListView.builder

Answer 1

Is is suggested to use Listview.builder and not just put a list into ListView if you need lazy loading.
https://flutter.dev/docs/cookbook/lists/long-lists
Replace the ListView to ListView.builder.
ListView.builder(
itemCount: // items.length
itemBuilder: (buildContext, index) {}, // define what Widget for each index
)
Here is the sample code from yours. index is already exist in itemBuilder function.
...
body: ListView.builder(
itemCount: items.length,
itemBuilder: (buildContext, index) {
return Container(
decoration: index % 2 == 0
? new BoxDecoration(color: const Color(0xFFFFFFFF))
: new BoxDecoration(color: const Color(0xFFFAFAF5)),
child: new Row(
children: <Widget>[
new Container(
margin: new EdgeInsets.all(5.0),
child: new CachedNetworkImage(
imageUrl: item.imageURL,
width: 200.0,
height: 100.0,
fit: BoxFit.cover,
),
),
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
padding: const EdgeInsets.only(bottom: 75.0),
child: Text(
items[index].title,
),
),
Container(
padding: const EdgeInsets.only(left: 15.0),
child: Text(
items[index].description,
),
),
],
),
)
],
),
);
},
),
...