moving_hole/lib/main.dart

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';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
        providers: [ChangeNotifierProvider(create: (_) => AnimProv())],
        child: MaterialApp(
          theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
          debugShowCheckedModeBanner: false,
          home: MyWidget(),
        ));
  }
}

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  final double _initWidth = 314;
  final double _initHeight = 500;

  @override
  void initState() {
    SchedulerBinding.instance.addPostFrameCallback((timeStamp) async {
      AnimProv ap = Provider.of<AnimProv>(context, listen: false);
      ap.foneScreen = 'assets/scrns/scrn1.jpg';
      myTimer(context, true, 10);
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(builder: (context, constrains) {
        var _scale = min(constrains.maxHeight / _initHeight, constrains.maxWidth / _initWidth);
        return Transform.scale(
          scale: _scale,
          child: Center(
            child: Container(
              color: Colors.red,
              height: _initHeight,
              width: _initWidth,
              child: Stack(
                  //fit: StackFit.expand,
                  children: [
                    Consumer<AnimProv>(
                        builder: (context, ap, child) => Container(
                                child: Image.asset(
                              ap.foneScreen ?? 'assets/scrns/scrn1.jpg',
                              // height: 360,
                              // width: 480,

                              fit: BoxFit.contain,
                            ))),
                    _getOverlay(),
                    imageOverlay(),
                    textOverlay(),
                    // Positioned(
                    //     child: Consumer<AnimProv>(
                    //         builder: (context, ap, child) =>
                    //             RaisedButton(onPressed: () {
                    //               ap.width = 300;
                    //               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.jpg';
          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.jpg';
          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.jpg';
          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.jpg';
        }
        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: ap.picAsset.isNotEmpty ? Image.asset(ap.picAsset) : Container(),
              width: 300,
              height: 300,
              alignment: Alignment.center,
            ));
  }

  Widget _getOverlay() {
    return ColorFiltered(
      colorFilter: ColorFilter.mode(Colors.black54, BlendMode.srcOut),
      child: Stack(
        children: [
          Container(
            decoration: BoxDecoration(
              color: Colors.transparent,
            ),
            child: Consumer<AnimProv>(
              builder: (context, ap, child) => AnimatedAlign(
                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: ap.height, // need to animate this
                  width: ap.width, // need to animate this
                  decoration: BoxDecoration(
                    color: Colors.black,
                    borderRadius: BorderRadius.circular(10),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}