some updates requiring attention

lib/main.dart

@@ -1,5 +1,8 @@
+import 'dart:async';
 import 'dart:math';
 import 'package:flutter/material.dart';
+import 'package:moving_hole/animprovider.dart';
+import 'package:provider/provider.dart';
 
 final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
 
@@ -10,39 +13,131 @@ void main() {
 class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
-    return MaterialApp(
+    return MultiProvider(
+        providers: [ChangeNotifierProvider(create: (_) => AnimProv())],
+        child: MaterialApp(
           theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
           debugShowCheckedModeBanner: false,
           home: Scaffold(
+            appBar: AppBar(
+              title: Text('Hello, again'),
+            ),
             body: Center(
               child: MyWidget(),
             ),
           ),
-    );
+        ));
   }
 }
 
-class MyWidget extends StatelessWidget {
+class MyWidget extends StatefulWidget {
+  @override
+  _MyWidgetState createState() => _MyWidgetState();
+}
+
+class _MyWidgetState extends State<MyWidget> {
+  @override
+  void initState() {
+    AnimProv ap = Provider.of<AnimProv>(context, listen: false);
+    ap.foneScreen = 'assets/scrns/scrn1.png';
+    // MyTimer(context, true, 10);
+    super.initState();
+  }
+
   @override
   Widget build(BuildContext context) {
-    return Transform.rotate(
+    return Stack(fit: StackFit.expand, children: [
-        angle: 0,
+      Consumer<AnimProv>(
-        child: Scaffold(
+          builder: (context, ap, child) => Container(
-            appBar: AppBar(
+              height: 360,
-              title: Text('Hello, again'),
+              width: 480,
+              child: Image(
+                image: AssetImage(
+                  ap.foneScreen,
                 ),
-            body: Stack(
+                // fit: BoxFit.contain,
-//         fit: StackFit.expand,
+              ))),
-                children: [
+      // _getOverlay(),
-                  Container(
+      // imageOverlay(),
-                      height: 800,
+      // textOverlay(),
-                      width: 800,
+      // Positioned(
-                      child: Image.network(
+      //     child: Consumer<AnimProv>(
-                        'https://wallpaperplay.com/walls/full/e/5/3/13586.jpg',
+      //         builder: (context, ap, child) =>
-                        fit: BoxFit.cover,
+      //             RaisedButton(onPressed: () {
-                      )),
+      //               ap.width = 300;
-                  _getOverlay()
+      //               ap.height = 150;
-                ])));
+      //               ap.alignX = 0;
+      //               ap.alignY = -0.5;
+      //             })))
+    ]);
+  }
+
+  void MyTimer(BuildContext context, bool start, int time) async {
+    AnimProv ap = Provider.of<AnimProv>(context, listen: false);
+    if (start) {
+      int t = 0;
+
+      while (t < time) {
+        if (t == 0) {
+          ap.width = 0;
+          ap.height = 0;
+          ap.alignX = 0.0;
+          ap.alignY = 0;
+          ap.picAsset = 'assets/scrns/sign.png';
+          ap.foneScreen = 'assets/scrns/scrn1.png';
+          ap.message = 'welcome to Magichess quick tutorial ';
+        }
+        if (t == 3) {
+          ap.width = 345;
+          ap.height = 170;
+          ap.alignX = 0.5;
+          ap.alignY = -0.95;
+          ap.picAsset = '';
+          ap.foneScreen = 'assets/scrns/scrn2.png';
+          ap.message = 'In Magichess you can play either online...';
+        }
+        if (t == 6) {
+          ap.width = 345;
+          ap.height = 170;
+          ap.alignX = 0.5;
+          ap.alignY = 0.14;
+          ap.foneScreen = 'assets/scrns/scrn3.png';
+          ap.message = '... or offline!';
+        }
+
+        if (t == 9) {
+          ap.width = 345;
+          ap.height = 170;
+          ap.alignX = 0.5;
+          ap.alignY = 0.14;
+          ap.foneScreen = 'assets/scrns/scrn4.png';
+        }
+        await Future.delayed(Duration(seconds: 1));
+        t++;
+      }
+    }
+  }
+
+  Widget textOverlay() {
+    return Consumer<AnimProv>(
+        builder: (context, ap, child) => Container(
+              child: Text(ap.message,
+                  style: TextStyle(
+                      color: Colors.white,
+                      fontSize: 20,
+                      fontWeight: FontWeight.bold)),
+              alignment: Alignment.bottomCenter,
+            ));
+  }
+
+  Widget imageOverlay() {
+    return Consumer<AnimProv>(
+        builder: (context, ap, child) => Container(
+              child: Image.asset(ap.picAsset, fit: BoxFit.contain),
+              width: 400,
+              height: 400,
+              alignment: Alignment.center,
+            ));
   }
 
   Widget _getOverlay() {
@@ -54,15 +149,20 @@ class MyWidget extends StatelessWidget {
             decoration: BoxDecoration(
               color: Colors.transparent,
             ),
-            child: Align(
+            child: Consumer<AnimProv>(
-              alignment: Alignment(-0.3, -0.8), // need to animate this
+              builder: (context, ap, child) => AnimatedAlign(
-              child: Container(
+                duration: Duration(milliseconds: 1000),
+                alignment:
+                    Alignment(ap.alignX, ap.alignY), // need to animate this
+                child: AnimatedContainer(
+                  duration: Duration(milliseconds: 1000),
                   margin: const EdgeInsets.only(right: 4, bottom: 4),
-                height: 80, // need to animate this
+                  height: ap.height, // need to animate this
-                width: 160, // need to animate this
+                  width: ap.width, // need to animate this
                   decoration: BoxDecoration(
                     color: Colors.black,
-                  borderRadius: BorderRadius.circular(40),
+                    borderRadius: BorderRadius.circular(10),
+                  ),
                 ),
               ),
             ),

pubspec.lock

@@ -81,6 +81,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.3.0-nullsafety.3"
+  nested:
+    dependency: transitive
+    description:
+      name: nested
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.0.4"
   path:
     dependency: transitive
     description:
@@ -88,6 +95,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.8.0-nullsafety.1"
+  provider:
+    dependency: "direct main"
+    description:
+      name: provider
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "4.3.2+4"
   sky_engine:
     dependency: transitive
     description: flutter
@@ -151,3 +165,4 @@ packages:
     version: "2.1.0-nullsafety.3"
 sdks:
   dart: ">=2.10.0-110 <2.11.0"
+  flutter: ">=1.16.0 <2.0.0"

pubspec.yaml

@@ -28,6 +28,7 @@ dependencies:
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.
   cupertino_icons: ^1.0.0
+  provider: 
 
 dev_dependencies:
   flutter_test:
@@ -45,9 +46,13 @@ flutter:
   uses-material-design: true
 
   # To add assets to your application, add an assets section, like this:
-  # assets:
+  assets:
-  #   - images/a_dot_burr.jpeg
+    - assets/scrns/
-  #   - images/a_dot_ham.jpeg
+    # - assets/scrns/scrn1.png
+    # - assets/scrns/scrn2.png
+    # - assets/scrns/scrn3.png
+    # - assets/scrns/scrn4.png
+    
 
   # An image asset can refer to one or more resolution-specific "variants", see
   # https://flutter.dev/assets-and-images/#resolution-aware.