Fix

.vscode/launch.json

@@ -0,0 +1,13 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "moving_hole",
+            "request": "launch",
+            "type": "dart"
+        }
+    ]
+}

lib/main.dart

@@ -1,6 +1,6 @@
 import 'dart:async';
-import 'dart:math';
 import 'package:flutter/material.dart';
+import 'package:flutter/scheduler.dart';
 import 'package:moving_hole/animprovider.dart';
 import 'package:provider/provider.dart';
 
@@ -18,14 +18,7 @@ class MyApp extends StatelessWidget {
         child: MaterialApp(
           theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
           debugShowCheckedModeBanner: false,
-          home: Scaffold(
+          home: MyWidget(),
-            appBar: AppBar(
-              title: Text('Hello, again'),
-            ),
-            body: Center(
-              child: MyWidget(),
-            ),
-          ),
         ));
   }
 }
@@ -38,41 +31,43 @@ class MyWidget extends StatefulWidget {
 class _MyWidgetState extends State<MyWidget> {
   @override
   void initState() {
-    AnimProv ap = Provider.of<AnimProv>(context, listen: false);
+    SchedulerBinding.instance.addPostFrameCallback((timeStamp) async {
-    ap.foneScreen = 'assets/scrns/scrn1.png';
+      AnimProv ap = Provider.of<AnimProv>(context, listen: false);
-    // MyTimer(context, true, 10);
+      ap.foneScreen = 'assets/scrns/scrn1.jpg';
+      myTimer(context, true, 10);
+    });
     super.initState();
   }
 
   @override
   Widget build(BuildContext context) {
-    return Stack(fit: StackFit.expand, children: [
+    return Scaffold(
-      Consumer<AnimProv>(
+      body: Stack(fit: StackFit.expand, children: [
-          builder: (context, ap, child) => Container(
+        Consumer<AnimProv>(
-              height: 360,
+            builder: (context, ap, child) => Container(
-              width: 480,
+                height: 360,
-              child: Image(
+                width: 480,
-                image: AssetImage(
+                child: Image.asset(ap.foneScreen ?? 'assets/scrns/scrn1.jpg'
-                  ap.foneScreen,
+
-                ),
+                    // fit: BoxFit.contain,
-                // fit: BoxFit.contain,
+                    ))),
-              ))),
+        _getOverlay(),
-      // _getOverlay(),
+        imageOverlay(),
-      // imageOverlay(),
+        textOverlay(),
-      // textOverlay(),
+        // Positioned(
-      // Positioned(
+        //     child: Consumer<AnimProv>(
-      //     child: Consumer<AnimProv>(
+        //         builder: (context, ap, child) =>
-      //         builder: (context, ap, child) =>
+        //             RaisedButton(onPressed: () {
-      //             RaisedButton(onPressed: () {
+        //               ap.width = 300;
-      //               ap.width = 300;
+        //               ap.height = 150;
-      //               ap.height = 150;
+        //               ap.alignX = 0;
-      //               ap.alignX = 0;
+        //               ap.alignY = -0.5;
-      //               ap.alignY = -0.5;
+        //             })))
-      //             })))
+      ]),
-    ]);
+    );
   }
 
-  void MyTimer(BuildContext context, bool start, int time) async {
+  void myTimer(BuildContext context, bool start, int time) async {
     AnimProv ap = Provider.of<AnimProv>(context, listen: false);
     if (start) {
       int t = 0;
@@ -84,7 +79,7 @@ class _MyWidgetState extends State<MyWidget> {
           ap.alignX = 0.0;
           ap.alignY = 0;
           ap.picAsset = 'assets/scrns/sign.png';
-          ap.foneScreen = 'assets/scrns/scrn1.png';
+          ap.foneScreen = 'assets/scrns/scrn1.jpg';
           ap.message = 'welcome to Magichess quick tutorial ';
         }
         if (t == 3) {
@@ -93,7 +88,7 @@ class _MyWidgetState extends State<MyWidget> {
           ap.alignX = 0.5;
           ap.alignY = -0.95;
           ap.picAsset = '';
-          ap.foneScreen = 'assets/scrns/scrn2.png';
+          ap.foneScreen = 'assets/scrns/scrn2.jpg';
           ap.message = 'In Magichess you can play either online...';
         }
         if (t == 6) {
@@ -101,7 +96,7 @@ class _MyWidgetState extends State<MyWidget> {
           ap.height = 170;
           ap.alignX = 0.5;
           ap.alignY = 0.14;
-          ap.foneScreen = 'assets/scrns/scrn3.png';
+          ap.foneScreen = 'assets/scrns/scrn3.jpg';
           ap.message = '... or offline!';
         }
 
@@ -110,7 +105,7 @@ class _MyWidgetState extends State<MyWidget> {
           ap.height = 170;
           ap.alignX = 0.5;
           ap.alignY = 0.14;
-          ap.foneScreen = 'assets/scrns/scrn4.png';
+          ap.foneScreen = 'assets/scrns/scrn4.jpg';
         }
         await Future.delayed(Duration(seconds: 1));
         t++;
@@ -121,11 +116,7 @@ class _MyWidgetState extends State<MyWidget> {
   Widget textOverlay() {
     return Consumer<AnimProv>(
         builder: (context, ap, child) => Container(
-              child: Text(ap.message,
+              child: Text(ap.message, style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold)),
-                  style: TextStyle(
-                      color: Colors.white,
-                      fontSize: 20,
-                      fontWeight: FontWeight.bold)),
               alignment: Alignment.bottomCenter,
             ));
   }
@@ -133,7 +124,7 @@ class _MyWidgetState extends State<MyWidget> {
   Widget imageOverlay() {
     return Consumer<AnimProv>(
         builder: (context, ap, child) => Container(
-              child: Image.asset(ap.picAsset, fit: BoxFit.contain),
+              child: ap.picAsset.isNotEmpty ? Image.asset(ap.picAsset) : Container(),
               width: 400,
               height: 400,
               alignment: Alignment.center,
@@ -152,8 +143,7 @@ class _MyWidgetState extends State<MyWidget> {
             child: Consumer<AnimProv>(
               builder: (context, ap, child) => AnimatedAlign(
                 duration: Duration(milliseconds: 1000),
-                alignment:
+                alignment: Alignment(ap.alignX, ap.alignY), // need to animate this
-                    Alignment(ap.alignX, ap.alignY), // need to animate this
                 child: AnimatedContainer(
                   duration: Duration(milliseconds: 1000),
                   margin: const EdgeInsets.only(right: 4, bottom: 4),