completed up the pizza event recipe page

lib/pages/PizzaEventRecipePage.dart

@@ -13,76 +13,82 @@ class PizzaEventRecipePage extends StatefulWidget {
 }
 
 class PizzaEventRecipePageState extends State<PizzaEventRecipePage> {
+  final PageController controller = PageController();
+  int page = 0;
+  
+  PizzaEventRecipePageState(){
+    this.page = controller.initialPage;
+  }
+  
   @override
   Widget build(BuildContext context){
+    var recipeStepCount = this.widget.pizzaEvent.recipe.recipeSteps.length;
+    List<Text> pageIndex = [];
+    for (var i = 0;i < recipeStepCount;i++){
+      pageIndex.add(
+        Text(
+          "${i+1}",
+          style: TextStyle(
+              color: i == this.page ? Colors.blue : Colors.grey
+          )
+        )
+      );
+      if (i != recipeStepCount-1) {
+        pageIndex.add(
+            Text(" - ", style: TextStyle(color: Colors.grey))
+        );
+      }
+    }
+    
     return Scaffold(
       appBar: AppBar(
-        title: Text("Pizza Event Recipe"),
+        title: Text(this.widget.pizzaEvent.recipe.name),
       ),
       resizeToAvoidBottomInset: false,
-      body: Container(
-        padding: EdgeInsets.fromLTRB(40, 10, 40, 10),
-        child:  Column(
-          children: <Widget>[
-            Text(this.widget.pizzaEvent.name)
-          ],
-        )
+      body: Column(
+        children: <Widget>[
+          Expanded(
+              flex: 95,
+              child: PageView(
+                onPageChanged: (newPage) => setState(() {this.page = newPage;}),
+                  controller: controller,
+                  children: <Widget>[
+                    Markdown(
+                      data: this.widget.pizzaEvent.recipe.description,
+                      onTapLink: (text, url, title) {
+                        launch(url!);
+                      },
+                    ),
+                  ] + this.widget.pizzaEvent.recipe.recipeSteps.map((recipeStep) => buildRecipeStep(recipeStep)).toList()
+              )
+          ),
+          Expanded(
+              flex: 5,
+              child: Row(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: pageIndex
+              )
+          )
+        ],
       )
     );
   }
 
   Widget buildRecipeStep(RecipeStep recipeStep) {
-    var subSteps = recipeStep.subSteps.length == 0 ? 1 : recipeStep.subSteps.length;
-
-    var currentSubStep = recipeStep.subSteps.indexWhere((subStep) => subStep.completed);
-    if (currentSubStep == -1){
-      currentSubStep = 0;
-    }
-
-    var completedSubSteps = recipeStep.completed ? 1 : 0;
-    if (recipeStep.subSteps.length > 0){
-      completedSubSteps = currentSubStep + 1;
-    }
-
-    return Column(
+    return ListView(
       children: <Widget>[
-        Expanded(
-          flex: 10,
-          child: Row(
-            mainAxisAlignment: MainAxisAlignment.spaceBetween,
-            children: <Widget>[
-              Text(recipeStep.name),
-              Text("$completedSubSteps/$subSteps")
-            ],
-          ),
-        ),
-        Expanded(
-          flex: 80,
-          child: ListView(
-              children: <Widget>[
-                MarkdownBody(
-                  data: recipeStep.description,
-                  onTapLink: (text, url, title) {
-                    launch(url!);
-                  },
-                ),
-              ]
-          ),
-        ),
-        Expanded(
-            flex: 10,
-            child: Container(
-                width: double.infinity,
-                padding: EdgeInsets.all(10),
-                color: Colors.blue,
-                child: TextButton(
-                  child: Text("Start", style: TextStyle(color: Colors.white)),
-                  onPressed: () {
-                    Navigator.pushNamed(context, "/event/recipe", arguments: this.widget.pizzaEvent);
-                  },
-                )
-            )
+        Center(
+          child: Text(recipeStep.name)
         ),
+        Container(
+          padding: EdgeInsets.all(16),
+          child: MarkdownBody(
+            data: recipeStep.description,
+            onTapLink: (text, url, title) {
+              launch(url!);
+            },
+          )
+        )
       ],
     );
   }