import 'dart:math';

import 'package:flutter/material.dart';

class PageViewDot extends StatefulWidget {
  final bool isFirst;

  PageViewDot({Key key, this.isFirst = true}) : super(key: key);

  @override
  _PageViewDotState createState() => _PageViewDotState();
}

class _PageViewDotState extends State<PageViewDot> {
  final _controller = new PageController();

  List<Widget> _pages;
  List<Color> _backgroundColor;
  bool _isPink = false;

  @override
  void initState() {
    _pages = <Widget>[
      _TutorialPage(
        color: <Color>[
          Color.fromRGBO(102, 70, 203, 1),
          Color.fromRGBO(115, 87, 205, 1),
          Color.fromRGBO(135, 101, 218, 1),
          Color.fromRGBO(199, 166, 255, 1),
        ],
        child: ConstrainedBox(
          constraints: const BoxConstraints.expand(),
          child: new FlutterLogo(colors: Colors.blue),
        ),
      ),
      _TutorialPage(
        color: <Color>[
          Color.fromRGBO(255, 170, 0, 1),
          Color.fromRGBO(255, 188, 75, 1),
          Color.fromRGBO(255, 207, 112, 1),
          Color.fromRGBO(255, 211, 144, 1),
        ],
        child: new ConstrainedBox(
          constraints: const BoxConstraints.expand(),
          child: new FlutterLogo(
              style: FlutterLogoStyle.stacked, colors: Colors.red),
        ),
      ),
      _TutorialPage(
        color: <Color>[
          Color.fromRGBO(0, 183, 98, 1),
          Color.fromRGBO(35, 194, 120, 1),
          Color.fromRGBO(89, 223, 143, 1),
          Color.fromRGBO(171, 247, 206, 1),
        ],
        child: new ConstrainedBox(
          constraints: const BoxConstraints.expand(),
          child: new FlutterLogo(
              style: FlutterLogoStyle.horizontal, colors: Colors.green),
        ),
      ),
      _TutorialPage(
        color: <Color>[
          Color.fromRGBO(246, 98, 98, 1),
          Color.fromRGBO(246, 118, 118, 1),
          Color.fromRGBO(245, 115, 115, 1),
          Color.fromRGBO(253, 187, 187, 1),
        ],
        child: Text(
          "The End",
          style: TextStyle(color: Colors.white, fontSize: 100),
        ),
      ),
    ];

    _backgroundColor = <Color>[
      Color.fromRGBO(102, 70, 203, 1),
      Color.fromRGBO(115, 87, 205, 1),
      Color.fromRGBO(135, 101, 218, 1),
      Color.fromRGBO(199, 166, 255, 1),
    ];
    _controller.addListener(() {
      if (_controller.page < 0.3 && _isPink) {
        setState(() {
          _isPink = false;
          _backgroundColor = <Color>[
            Color.fromRGBO(102, 70, 203, 1),
            Color.fromRGBO(115, 87, 205, 1),
            Color.fromRGBO(135, 101, 218, 1),
            Color.fromRGBO(199, 166, 255, 1),
          ];
        });
      } else if (_controller.page > 2.7 && !_isPink) {
        setState(() {
          _isPink = true;
          _backgroundColor = <Color>[
            Color.fromRGBO(246, 98, 98, 1),
            Color.fromRGBO(246, 118, 118, 1),
            Color.fromRGBO(245, 115, 115, 1),
            Color.fromRGBO(253, 187, 187, 1),
          ];
        });
      }
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    if (_pages != null && _pages.isNotEmpty) {
      return Scaffold(
        body: Stack(
          children: <Widget>[
            Container(
                decoration: BoxDecoration(
                    gradient: LinearGradient(
                        begin: Alignment.topLeft,
                        end: Alignment.bottomRight,
                        colors: _backgroundColor))),
            PageView.builder(
              physics: AlwaysScrollableScrollPhysics(),
              controller: _controller,
              itemCount: _pages.length,
              itemBuilder: (BuildContext context, int index) {
                return _pages[index % _pages.length];
              },
            ),
            Positioned(
              bottom: 50.0,
              left: 0.0,
              right: 0.0,
              child: Container(
                padding: const EdgeInsets.all(20.0),
                child: Center(
                  child: DotsIndicator(
                    controller: _controller,
                    itemCount: _pages.length,
                    onPageSelected: (int page) {
                      _controller.animateToPage(
                        page,
                        duration: const Duration(milliseconds: 300),
                        curve: Curves.ease,
                      );
                    },
                  ),
                ),
              ),
            ),
            Positioned(
              top: 0.0,
              left: 0.0,
              child: SafeArea(
                child: IconButton(
                  color: Colors.white,
                  padding: const EdgeInsets.all(20.0),
                  icon: Icon(Icons.keyboard_arrow_left),
                  onPressed: () => Navigator.pop(context),
                ),
              ),
            )
          ],
        ),
      );
    } else {
      return Scaffold(body: Center(child: Text("Tutorial not available")));
    }
  }
}

class DotsIndicator extends AnimatedWidget {
  DotsIndicator({
    this.controller,
    this.itemCount,
    this.onPageSelected,
    this.color: Colors.white,
  }) : super(listenable: controller);

  /// The PageController that this DotsIndicator is representing.
  final PageController controller;

  /// The number of items managed by the PageController
  final int itemCount;

  /// Called when a dot is tapped
  final ValueChanged<int> onPageSelected;

  /// The color of the dots.
  ///
  /// Defaults to `Colors.white`.
  final Color color;

  // The base size of the dots
  static const double _kDotSize = 8.0;

  // The increase in the size of the selected dot
  static const double _kMaxZoom = 2.0;

  // The distance between the center of each dot
  static const double _kDotSpacing = 25.0;

  Widget _buildDot(int index) {
    double selectedness = Curves.easeOut.transform(
      max(
        0.0,
        1.0 - ((controller.page ?? controller.initialPage) - index).abs(),
      ),
    );
    double zoom = 1.0 + (_kMaxZoom - 1.0) * selectedness;
    return new Container(
      width: _kDotSpacing,
      child: new Center(
        child: new Material(
          color: color,
          type: MaterialType.circle,
          child: new Container(
            width: _kDotSize * zoom,
            height: _kDotSize * zoom,
            child: new InkWell(
              onTap: () => onPageSelected(index),
            ),
          ),
        ),
      ),
    );
  }

  Widget build(BuildContext context) {
    return new Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: new List<Widget>.generate(itemCount, _buildDot),
    );
  }
}

class _TutorialPage extends StatelessWidget {
  final List<Color> color;
  final Widget child;

  const _TutorialPage({Key key, this.color, this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: color,
        ),
      ),
      child: Center(child: child),
    );
  }
}