Started using StoreConnector in prototype screen

now changes cause rebuilds

Signed-off-by: Andreas Fahrecker <AndreasFahrecker@gmail.com>
This commit is contained in:
Andreas Fahrecker 2020-10-16 11:19:55 +02:00
parent 4b7adc6e45
commit 7f6eec43de

View File

@ -64,111 +64,127 @@ class _ProgressScreenState extends State<ProgressScreen> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final Store<AppState> store = StoreProvider.of<AppState>(context);
final int daysDone =
DateTime.now().difference(store.state.timers[0].startTime).inDays;
final int daysLeft =
store.state.timers[0].endTime.difference(DateTime.now()).inDays;
final int allDays = store.state.timers[0].endTime
.difference(store.state.timers[0].startTime)
.inDays;
final double percent = daysDone / (allDays / 100) / 100;
return Scaffold( return Scaffold(
appBar: AppBar( appBar: AppBar(
title: Text("${widget.name} Progress"), title: Text("${widget.name} Progress"),
), ),
body: Container( body: StoreConnector(
margin: const EdgeInsets.all(5), converter: _ViewModel.fromStore,
child: Column( builder: (context, _ViewModel vm) {
children: <Widget>[ final int daysDone =
Expanded( DateTime.now().difference(vm.timer.startTime).inDays;
flex: 1, final int daysLeft =
child: Row( vm.timer.endTime.difference(DateTime.now()).inDays;
final int allDays =
vm.timer.endTime.difference(vm.timer.startTime).inDays;
final double percent = daysDone / (allDays / 100) / 100;
return Container(
margin: const EdgeInsets.all(5),
child: Column(
children: <Widget>[ children: <Widget>[
Expanded( Expanded(
flex: 2, flex: 1,
child: Text( child: Row(
"Start Date:", children: <Widget>[
textAlign: TextAlign.right, Expanded(
flex: 2,
child: Text(
"Start Date:",
textAlign: TextAlign.right,
),
),
Expanded(
flex: 2,
child: Text(
"${vm.timer.startTime.toLocal()}".split(" ")[0]),
),
Expanded(
flex: 2,
child: RaisedButton(
onPressed: () => _selectStartDate(context),
child: Text("Change"),
color: Colors.lightBlueAccent,
),
),
Spacer(flex: 1)
],
), ),
), ),
Expanded( Expanded(
flex: 2, flex: 1,
child: Text("${store.state.timers[0].startTime.toLocal()}" child: Row(
.split(" ")[0]), children: <Widget>[
), Expanded(
Expanded( flex: 2,
flex: 2, child: Text(
child: RaisedButton( "End Date:",
onPressed: () => _selectStartDate(context), textAlign: TextAlign.right,
child: Text("Change"), ),
color: Colors.lightBlueAccent, ),
Expanded(
flex: 2,
child: Text(
"${vm.timer.endTime.toLocal()}".split(" ")[0]),
),
Expanded(
flex: 2,
child: RaisedButton(
onPressed: () => _selectEndDate(context),
child: Text("Change"),
color: Colors.lightBlueAccent,
),
),
Spacer(flex: 1)
],
), ),
), ),
Spacer(flex: 1) Expanded(
flex: 5,
child: CircularPercentIndicator(
radius: 100,
lineWidth: 10,
percent: percent,
progressColor: Colors.green,
backgroundColor: Colors.red,
center: Text("${(percent * 100).floor()} %"),
),
),
Expanded(
flex: 1,
child: LinearPercentIndicator(
padding: EdgeInsets.symmetric(horizontal: 15.0),
percent: percent,
leading: Text("$daysDone Days"),
center: Text("${(percent * 100).floor()} %"),
trailing: Text("$daysLeft Days"),
progressColor: Colors.green,
backgroundColor: Colors.red,
lineHeight: 25,
),
),
Expanded(
flex: 1,
child: Text("$allDays Days"),
),
], ],
), ),
), );
Expanded( }),
flex: 1, );
child: Row( }
children: <Widget>[ }
Expanded(
flex: 2, class _ViewModel {
child: Text( final Timer timer;
"End Date:",
textAlign: TextAlign.right, _ViewModel({
), @required this.timer,
), });
Expanded(
flex: 2, static _ViewModel fromStore(Store<AppState> store) {
child: Text("${store.state.timers[0].endTime.toLocal()}" return _ViewModel(
.split(" ")[0]), timer: store.state.timers[0],
),
Expanded(
flex: 2,
child: RaisedButton(
onPressed: () => _selectEndDate(context),
child: Text("Change"),
color: Colors.lightBlueAccent,
),
),
Spacer(flex: 1)
],
),
),
Expanded(
flex: 5,
child: CircularPercentIndicator(
radius: 100,
lineWidth: 10,
percent: percent,
progressColor: Colors.green,
backgroundColor: Colors.red,
center: Text("${(percent * 100).floor()} %"),
),
),
Expanded(
flex: 1,
child: LinearPercentIndicator(
padding: EdgeInsets.symmetric(horizontal: 15.0),
percent: percent,
leading: Text("$daysDone Days"),
center: Text("${(percent * 100).floor()} %"),
trailing: Text("$daysLeft Days"),
progressColor: Colors.green,
backgroundColor: Colors.red,
lineHeight: 25,
),
),
Expanded(
flex: 1,
child: Text("$allDays Days"),
),
],
),
),
); );
} }
} }