started refactor of pizza event page (to a pageview)

This commit is contained in:
broodjeaap89 2021-08-26 21:51:51 +02:00
parent 3bb78f381d
commit 6c05e3ecc8

View file

@ -1,5 +1,6 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_local_notifications/flutter_local_notifications.dart'; import 'package:flutter_local_notifications/flutter_local_notifications.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
import 'package:fluttericon/font_awesome5_icons.dart'; import 'package:fluttericon/font_awesome5_icons.dart';
import 'package:pizzaplanner/entities/PizzaEvent.dart'; import 'package:pizzaplanner/entities/PizzaEvent.dart';
import 'package:pizzaplanner/entities/PizzaRecipe/RecipeStep.dart'; import 'package:pizzaplanner/entities/PizzaRecipe/RecipeStep.dart';
@ -16,6 +17,16 @@ class PizzaEventPage extends StatefulWidget {
} }
class PizzaEventPageState extends State<PizzaEventPage> { class PizzaEventPageState extends State<PizzaEventPage> {
late final PageController controller;
@override
void initState(){
super.initState();
// Set first page to the first recipeStep that's not completed
int initialPage = this.widget.pizzaEvent.recipe.recipeSteps.indexWhere((recipeStep) => !(recipeStep.completed));
this.controller = PageController(initialPage: initialPage);
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
@ -25,48 +36,97 @@ class PizzaEventPageState extends State<PizzaEventPage> {
resizeToAvoidBottomInset: false, resizeToAvoidBottomInset: false,
body: Container( body: Container(
padding: EdgeInsets.all(10), padding: EdgeInsets.all(10),
child: ListView( child: PageView(
children: this.widget.pizzaEvent.recipe.recipeSteps.map((recipeStep) => buildRecipeStepWidget(recipeStep)).toList() scrollDirection: Axis.horizontal,
controller: this.controller,
children: this.widget.pizzaEvent.recipe.recipeSteps.map((recipeStep) => buildRecipeStep(recipeStep)).toList()
) )
) )
); );
} }
Widget buildRecipeStepWidget(RecipeStep recipeStep){ Widget buildRecipeStep(RecipeStep recipeStep) {
return recipeStep.subSteps.length > 0 ? var r = Row(
buildRecipeStepWidgetWithSubSteps(recipeStep) : children: <Widget>[
buildRecipeStepWidgetWithoutSubSteps(recipeStep); Expanded(
} flex: 10,
Widget buildRecipeStepWidgetWithoutSubSteps(RecipeStep recipeStep) {
return ExpansionTile(
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(FontAwesome5.sitemap),
Text(recipeStep.name),
Text("${recipeStep.completedOn == null ? 0 : 1}/1")
],
),
children: <Widget>[
InkWell(
onLongPress: () {
setState(() {
recipeStep.completedOn = recipeStep.completed ? null : DateTime.now();
});
},
child: Container( child: Container(
width: double.infinity, color: Colors.blue,
color: recipeStep.completed ? Colors.green : Colors.grey, child: TextButton(
child: Column( child: Text("Undo", style: TextStyle(color: Colors.white)),
children: <Widget>[ onPressed: () {
Text(recipeStep.description) controller.nextPage(duration: Duration(milliseconds: 100), curve: Curves.bounceIn);
], },
), )
), )
),
Expanded(
flex: 10,
child: Container(
color: Colors.blue,
child: TextButton(
child: Text("Complete ->", style: TextStyle(color: Colors.white)),
onPressed: () {
controller.nextPage(duration: Duration(milliseconds: 100), curve: Curves.bounceIn);
},
)
)
),
],
);
return Column(
children: <Widget>[
Expanded(
flex: 10,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(recipeStep.name),
Text("${recipeStep.completedOn == null ? 0 : 1}/1")
],
), ),
Divider(), ),
] Expanded(
flex: 80,
child: MarkdownBody(data: recipeStep.description)
),
Expanded(
flex: 10,
child: SizedBox(
width: double.infinity,
child: Row(
children: <Widget>[
Expanded(
flex: 10,
child: Container(
padding: EdgeInsets.all(5),
color: Colors.blue,
child: TextButton(
child: Text("Undo", style: TextStyle(color: Colors.white)),
onPressed: () {
controller.nextPage(duration: Duration(milliseconds: 100), curve: Curves.bounceIn);
},
)
)
),
Expanded(
flex: 10,
child: Container(
padding: EdgeInsets.all(5),
color: Colors.blue,
child: TextButton(
child: Text("Complete ->", style: TextStyle(color: Colors.white)),
onPressed: () {
controller.nextPage(duration: Duration(milliseconds: 100), curve: Curves.bounceIn);
},
)
)
),
],
)
)
)
],
); );
} }