How to access list item when built with builder? - flutter

Question

In the following Flutter app, I'm trying to show a LinearProgressIndicator in each card only when that card is counting. The the correct progression is printed to the console, but I can't figure out how to access "stepProgress" variable from the LinearProgressIndicator widget to update the view.
The cards are being built with a builder because they will change based on the input List (Array) of Maps (Objects).
import 'dart:async';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
final key = new GlobalKey<_MyHomePageState>();
List<Widget> cards = [];
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'App Title',
theme: ThemeData(
primarySwatch: Colors.blue,
canvasColor: Colors.grey[350],
),
home: MyHomePage(title: 'Title', key: key),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
State createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List _sequence = [];
double stepProgress = 0.0;
#override
initState() {
super.initState();
setState(() => _sequence = [
{'iterations': 1, 'time': 10},
{'iterations': 3, 'time': 7},
{'iterations': 2, 'time': 5},
]);
setState(() {
cards = getRun();
});
_countdown(_sequence, null);
}
getRun() {
List<Widget> runCards = [];
for (var group in _sequence) {
runCards.add(_buildCard(CardModel(
iterationsInGroup: group['iterations'],
timeEach: group['time'],
)));
}
return runCards;
}
void _countdown(seq, iters) async {
if (seq.length > 0) {
int i = iters == null ? seq[0]['iterations'] : iters;
if (i > 0) {
int duration = seq[0]["time"];
Timer.periodic(Duration(seconds: 1), (timer) {
if (timer.tick < duration) {
setState(() {
stepProgress = timer.tick / duration;
});
print('Iteration $i: ${timer.tick} / $duration = $stepProgress');
} else {
print('Finished iteration $i');
timer.cancel();
i = i - 1;
if (i > 0) {
_countdown(seq, i); // Next iteration
} else {
print('Finished group ${seq.length}');
timer.cancel();
if (seq.length > 1) {
_countdown(seq.sublist(1), null); // Next group
} else {
print('Done');
}
}
}
});
}
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(15.0),
child: Text(
'Header',
style: TextStyle(
fontSize: 24.0,
fontWeight: FontWeight.bold,
),
),
),
Expanded(
child: ListView(
children: cards,
padding: const EdgeInsets.all(8.0),
),
),
],
),
);
}
}
Widget _buildCard(CardModel card) {
List<Widget> columnData = <Widget>[];
columnData.add(
Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
card.timeEach.toString() +
' seconds ' +
card.iterationsInGroup.toString() +
' times',
style: TextStyle(fontSize: 22.0),
),
),
true //key.currentState.activeStep == card.cardStep //TODO: This doesn't work
? LinearProgressIndicator(
value: key.currentState.stepProgress,
)
: Container(width: 0.0, height: 0.0),
],
),
);
return Card(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 15.0),
child: Column(children: columnData),
),
);
}
class CardModel {
final int iterationsInGroup;
final int timeEach;
CardModel({
this.iterationsInGroup,
this.timeEach,
});
}

Answer 1

I modified your code a little, this is a little messy therefore I recommend you the following:
Create a StatefulWidget for your ChildView (Like my code below).
Keep the progress logic into the ChildView, it would be easy to change the status in that way.
I had to keep track the Globalkey in order to refresh the changes into the child view, but if you handle the logic into each child, you don't need the GlobalKey.
import 'dart:async';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
final key = new GlobalKey<_MyHomePageState>();
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'App Title',
theme: ThemeData(
primarySwatch: Colors.blue,
canvasColor: Colors.grey[350],
),
home: MyHomePage(title: 'Title', key: key),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
State createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List _sequence = [];
List<ChildView> runCards = [];
#override
initState() {
super.initState();
setState(() => _sequence = [
{'iterations': 1, 'time': 10, 'progress': 0.0},
{'iterations': 3, 'time': 7, 'progress': 0.0},
{'iterations': 2, 'time': 5, 'progress': 0.0},
]);
getRun();
_countdown(_sequence, null);
}
getRun() {
for (var group in _sequence) {
var cardModel = CardModel(
iterationsInGroup: group['iterations'],
timeEach: group['time'],
progress: group['progress'],
);
runCards.add(new ChildView(cardModel,new GlobalKey<_ChildViewState>()));
}
setState(() {
});
return runCards;
}
void _countdown(seq, iters) async {
if (seq.length > 0) {
int i = iters == null ? seq[0]['iterations'] : iters;
if (i > 0) {
int duration = seq[0]["time"];
Timer.periodic(Duration(seconds: 1), (timer) {
if (timer.tick <= duration) {
var childView = runCards[i-1];
double stepProgress = 0.0;
stepProgress = timer.tick / duration;
childView.key.currentState.updateProgress(stepProgress);
print('Iteration $i: ${timer.tick} / $duration = $stepProgress');
} else {
print('Finished iteration $i');
timer.cancel();
i = i - 1;
if (i > 0) {
_countdown(seq, i); // Next iteration
} else {
print('Finished group ${seq.length}');
timer.cancel();
if (seq.length > 1) {
_countdown(seq.sublist(1), null); // Next group
} else {
print('Done');
}
}
}
});
}
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(15.0),
child: Text(
'Header',
style: TextStyle(
fontSize: 24.0,
fontWeight: FontWeight.bold,
),
),
),
Expanded(
child: ListView(
children: runCards,
padding: const EdgeInsets.all(8.0),
),
),
],
),
);
}
}
class CardModel {
final int iterationsInGroup;
final int timeEach;
double progress;
CardModel({
this.iterationsInGroup,
this.timeEach,
this.progress,
});
}
class ChildView extends StatefulWidget {
final CardModel card;
final GlobalKey<_ChildViewState> key;
ChildView(this.card, this.key) : super(key: key);
#override
_ChildViewState createState() => _ChildViewState();
}
class _ChildViewState extends State<ChildView> {
void updateProgress(double progress){
setState(() {
widget.card.progress = progress;
});
}
#override
Widget build(BuildContext context) {
List<Widget> columnData = <Widget>[];
columnData.add(
Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
widget.card.timeEach.toString() +
' seconds ' +
widget.card.iterationsInGroup.toString() +
' times',
style: TextStyle(fontSize: 22.0),
),
),
widget.card.progress < 1 //key.currentState.activeStep == card.cardStep //TODO: This doesn't work
? LinearProgressIndicator(
value: widget.card.progress,
)
: Container( child: new Text("Completed"),),
],
),
);
return Card(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 15.0),
child: Column(children: columnData),
),
);
}
}