broodjeaap/pizzaplanner
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

figured out a good way to organize many nested widgets with state, seperate 'build' functions which call eachother

Browse source 
dialogs still in own statefulwidget because it needs view updates
This commit is contained in:
broodjeaap89 2021-08-04 17:27:20 +02:00
parent 8de0282956
commit a2511b6811
1 changed files with 28 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
lib/pages/PizzaEventPage.dart
View file

@ -24,75 +24,62 @@ class PizzaEventPageState extends State<PizzaEventPage> {
body: Container( body: Container(
padding: EdgeInsets.all(10), padding: EdgeInsets.all(10),
child: ListView( child: ListView(
children: this.widget.pizzaEvent.recipe.recipeSteps.map((recipeStep) => PizzaEventRecipeStepWidget(recipeStep)).toList() children: this.widget.pizzaEvent.recipe.recipeSteps.map((recipeStep) => buildRecipeStepWidget(recipeStep)).toList()
) )
) )
); );
} }
triggerSetState() => setState(() {}); Widget buildRecipeStepWidget(RecipeStep recipeStep){
} return recipeStep.subSteps.length > 0 ?
buildRecipeStepWidgetWithSubSteps(recipeStep) :
class PizzaEventRecipeStepWidget extends StatefulWidget { buildRecipeStepWidgetWithoutSubSteps(recipeStep);
final RecipeStep recipeStep;
PizzaEventRecipeStepWidget(this.recipeStep);
PizzaEventRecipeStepWidgetState createState() => PizzaEventRecipeStepWidgetState();
}
class PizzaEventRecipeStepWidgetState extends State<PizzaEventRecipeStepWidget> {
@override
Widget build(BuildContext context) {
return this.widget.recipeStep.subSteps.length > 0 ?
buildPizzaEventRecipeStepWidgetWithSubSteps() :
buildPizzaEventRecipeStepWidgetWithoutSubSteps();
} }
Widget buildPizzaEventRecipeStepWidgetWithSubSteps() { Widget buildRecipeStepWidgetWithSubSteps(RecipeStep recipeStep){
int recipeSubStepsCompleted = this.widget.recipeStep.subSteps.where((subStep) => subStep.completed).length; int recipeSubStepsCompleted = recipeStep.subSteps.where((subStep) => subStep.completed).length;
int recipeSubSteps = this.widget.recipeStep.subSteps.length; int recipeSubSteps = recipeStep.subSteps.length;
return ExpansionTile( return ExpansionTile(
title: Row( title: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[ children: <Widget>[
Icon(FontAwesome5.sitemap), Icon(FontAwesome5.sitemap),
Text(this.widget.recipeStep.name), Text(recipeStep.name),
Text("$recipeSubStepsCompleted/$recipeSubSteps") Text("$recipeSubStepsCompleted/$recipeSubSteps")
], ],
), ),
children: <Widget>[ children: <Widget>[
Text(this.widget.recipeStep.description), Text(recipeStep.description),
Column( Column(
children: this.widget.recipeStep.subSteps.map((subStep) => PizzaEventSubStepWidget(subStep, this)).toList() children: recipeStep.subSteps.map((subStep) => getSubStepWidget(subStep)).toList()
) )
] ]
); );
} }
Widget buildPizzaEventRecipeStepWidgetWithoutSubSteps() { Widget buildRecipeStepWidgetWithoutSubSteps(RecipeStep recipeStep) {
return ExpansionTile( return ExpansionTile(
title: Row( title: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[ children: <Widget>[
Icon(FontAwesome5.sitemap), Icon(FontAwesome5.sitemap),
Text(this.widget.recipeStep.name), Text(recipeStep.name),
Text("${this.widget.recipeStep.completedOn == null ? 0 : 1}/1") Text("${recipeStep.completedOn == null ? 0 : 1}/1")
], ],
), ),
children: <Widget>[ children: <Widget>[
Text(this.widget.recipeStep.description), Text(recipeStep.description),
Row( Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
Text(this.widget.recipeStep.name), Text(recipeStep.name),
Checkbox( Checkbox(
value: this.widget.recipeStep.completedOn != null, value: recipeStep.completedOn != null,
onChanged: (bool? newValue) async { onChanged: (bool? newValue) async {
if (newValue == null){ if (newValue == null){
return; return;
} }
setState(() {this.widget.recipeStep.completedOn = newValue ? DateTime.now() : null;}); setState(() {recipeStep.completedOn = newValue ? DateTime.now() : null;});
}, },
) )
], ],
@ -101,31 +88,17 @@ class PizzaEventRecipeStepWidgetState extends State<PizzaEventRecipeStepWidget>
] ]
); );
} }
}
class PizzaEventSubStepWidget extends StatefulWidget { Widget getSubStepWidget(RecipeSubStep recipeSubStep){
final RecipeSubStep recipeSubStep;
final PizzaEventRecipeStepWidgetState parent;
PizzaEventSubStepWidget(this.recipeSubStep, this.parent);
PizzaEventSubStepWidgetState createState() => PizzaEventSubStepWidgetState();
}
class PizzaEventSubStepWidgetState extends State<PizzaEventSubStepWidget> {
@override
Widget build(BuildContext context){
return InkWell( return InkWell(
onTap: () async { onTap: () async {
await showDialog( await showDialog(
context: context, context: context,
builder: (context) { builder: (context) {
return PizzaEventSubStepDialog(this.widget.recipeSubStep); return SubStepDialog(recipeSubStep);
} }
).then((_) { );
setState(() {}); setState(() {});
this.widget.parent.setState(() {});
});
}, },
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
@ -135,9 +108,9 @@ class PizzaEventSubStepWidgetState extends State<PizzaEventSubStepWidget> {
child: SizedBox( child: SizedBox(
height: 50, height: 50,
child: Container( child: Container(
color: this.widget.recipeSubStep.completed ? Colors.green : Colors.grey, color: recipeSubStep.completed ? Colors.green : Colors.grey,
child: Center( child: Center(
child: Text(this.widget.recipeSubStep.name) child: Text(recipeSubStep.name)
), ),
), ),
), ),
@ -148,15 +121,15 @@ class PizzaEventSubStepWidgetState extends State<PizzaEventSubStepWidget> {
} }
} }
class PizzaEventSubStepDialog extends StatefulWidget { class SubStepDialog extends StatefulWidget {
final RecipeSubStep recipeSubStep; final RecipeSubStep recipeSubStep;
PizzaEventSubStepDialog(this.recipeSubStep); SubStepDialog(this.recipeSubStep);
PizzaEventSubStepDialogState createState() => PizzaEventSubStepDialogState(); SubStepDialogState createState() => SubStepDialogState();
} }
class PizzaEventSubStepDialogState extends State<PizzaEventSubStepDialog> { class SubStepDialogState extends State<SubStepDialog> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Dialog( return Dialog(