import 'dart:math';
import 'dart:ui' as ui;

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';

void main() {
  debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;
  runApp(MyApp());
}


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      onGenerateRoute: (settings) => _generateRoute(context, settings),
    );
  }

  Route _generateRoute(BuildContext context, RouteSettings settings) {
    return PageRouteBuilder(
      settings: settings,
      pageBuilder: (ctx, a1, a2) {
        // print('pageBuilder $a1');
        return _buildPage(ctx, a2, settings);
      },
      transitionsBuilder: (ctx, a1, a2, child) {
        return Opacity(
          opacity: a1.value,
          child: FractionalTranslation(
            translation: Offset(0, (1 - a1.value)),
            child: child,
          ),
        );
      },
      transitionDuration: Duration(milliseconds: 750),
    );
  }

  Widget _buildPage(BuildContext context, Animation<double> animation, RouteSettings settings) {
    if (settings.name == '/')
      return Curtain(animation: animation, child: MyPage());
    if (settings.name == 'level2')
      return Container(
        color: Colors.green,
        child: OutlineButton(
          onPressed: () => Navigator.of(context).pop(),
          child: Text('back', textScaleFactor: 3, ),
        ),
      );
    throw 'no route: ${settings.name}';
  }
}

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: FlutterLogoDecoration(style: FlutterLogoStyle.horizontal),
        child: Center(
          child: Container(
            width: 200,
            height: 100,
            color: Colors.deepPurple,
            child: FlatButton(
              onPressed: () => Navigator.of(context).pushNamed('level2'),
              child: Text('press me', textScaleFactor: 3, textAlign: TextAlign.center,),
            ),
          ),
        ),
      ),
    );
  }
}

///------------------------------------------------------
///------------------------------------------------------

class Curtain extends SingleChildRenderObjectWidget {
  final Animation<double> animation;
  const Curtain({
    Key key,
    this.animation,
    Widget child,
  }) : super(key: key, child: child);

  @override
  RenderObject createRenderObject(BuildContext context) => RenderCurtain(animation);
}

class RenderCurtain extends RenderProxyBox {
  Animation<double> animation;
  ui.Image image;
  Paint p = Paint();
  List offsets;

  RenderCurtain(this.animation) {
    animation.addListener(markNeedsPaint);
    animation.addStatusListener(_statusListener);
    var random = Random();
    offsets = List.generate(64, (_) => -random.nextDouble() / 4);
  }

  @override
  bool get isRepaintBoundary => true;

  _statusListener(AnimationStatus status) async {
    if (status == AnimationStatus.forward) {
      print('take off-screen image');
      OffsetLayer offsetLayer = layer;
      image = await offsetLayer.toImage(Offset.zero & size);
    }
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    if (animation.status == AnimationStatus.forward && image != null) {
      // print('paint: $animation');
      context.canvas.drawRect(offset & size, p..color = Colors.grey);
      var i = 0;
      offsets.forEach((offset) {
        var src = Rect.fromLTWH(size.width * i / offsets.length , 0, size.width / offsets.length, size.height);
        var dst = src;
        var effectifeOffset = animation.value + offset;
        if (effectifeOffset > 0)
          dst = src.translate(0, effectifeOffset * size.height);
        context.canvas.drawImageRect(image, src, dst, p);
        i++;
      });
    }
    else
      super.paint(context, offset);
  }
}