mobileCyberGamesApp/lib/pages/UserGuid.dart

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import '../styles/colors.dart';
import 'dart:math';

Future showUserGuide(BuildContext context) {
  return Navigator.of(context).push(
    PageRouteBuilder(
      opaque: false,
      transitionDuration: Duration(milliseconds: 300),
      transitionsBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
        return FadeTransition(
          opacity: CurvedAnimation(parent: animation, curve: Curves.linear),
          child: child,
        );
      },
      pageBuilder: (BuildContext context, _, __) {
        return UserGuide();
      },
    ),
  );
}

class UserGuide extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return UserGuideState();
  }
}

class UserGuideState extends State<UserGuide> {
  final pageController = PageController(initialPage: 0);

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () {
        return Future.value(true);
      },
      child: Scaffold(
        backgroundColor: Color(0xb3000000),
        body: Stack(
          children: <Widget>[
            PageView(
              controller: pageController,
              children: <Widget>[
//                _page(context, children: [
//                  Align(
//                    alignment: Alignment.topLeft,
//                    child: Container(
//                      margin: EdgeInsets.only(top: 23, left: 40),
//                      child: Image.asset('images/zhezhao_01.png'),
//                    ),
//                  ),
//                  Align(
//                    alignment: Alignment.topCenter,
//                    child: Container(
//                      margin: EdgeInsets.only(top: 177),
//                      child: Text(
//                        '01、此处是您拥有金币的数量',
//                        style: TextStyle(color: Colors.white, fontSize: 15),
//                      ),
//                    ),
//                  )
//                ]),
                _page(context, children: [
                  Align(
                    alignment: Alignment.topLeft,
                    child: Container(
                      margin: EdgeInsets.only(top: 128),
                      child: Image.asset('images/zhezhao_02.png'),
                    ),
                  ),
                  Align(
                    alignment: Alignment.topLeft,
                    child: Container(
                      margin: EdgeInsets.only(top: 159, left: 106),
                      child: Text(
                        '01、带此标示的为VIP赛事\n        相对于普通赛事奖励更为丰厚',
                        style: TextStyle(color: Colors.white, fontSize: 15),
                      ),
                    ),
                  )
                ]),
                _page(context, children: [
                  Align(
                    alignment: Alignment.topRight,
                    child: Container(
                      margin: EdgeInsets.only(top: 126),
                      child: Image.asset('images/zhezhao_03.png'),
                    ),
                  ),
                  Align(
                    alignment: Alignment.topLeft,
                    child: Container(
                      margin: EdgeInsets.only(top: 175, left: 30),
                      child: Text(
                        '02、这是您在此赛事中的排名情况',
                        style: TextStyle(color: Colors.white, fontSize: 15),
                      ),
                    ),
                  )
                ]),
                _page(context, isLast: true, children: [
                  Align(
                    alignment: Alignment.topCenter,
                    child: Container(
                      margin: EdgeInsets.only(top: (MediaQuery.of(context).size.width - 30) * 150 / 345 + 133),
                      child: Image.asset('images/zhezhao_04.png'),
                    ),
                  ),
                  Align(
                    alignment: Alignment.topCenter,
                    child: Container(
                      margin: EdgeInsets.only(
                        top: (MediaQuery.of(context).size.width - 30) * 150 / 345 + 285,
                      ),
                      child: Text(
                        '03、点击进入，开始您的比赛吧',
                        style: TextStyle(color: Colors.white, fontSize: 15),
                      ),
                    ),
                  )
                ]),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget _page(BuildContext context, {@required List<Widget> children, bool isLast = false}) {
    List<Widget> list = [
      Align(
        alignment: Alignment.bottomCenter,
        child: Container(
          margin: EdgeInsets.only(bottom: 92),
          child: SizedBox(
            width: 220,
            height: 36,
            child: OutlineButton(
              borderSide: BorderSide(color: PRIMARY_COLOR),
              highlightColor: Colors.transparent,
              color: PRIMARY_COLOR,
              onPressed: () {
                if (isLast) {
                  Navigator.of(context).pop();
                  return;
                }
                pageController.nextPage(duration: Duration(milliseconds: 300), curve: Curves.linearToEaseOut);
              },
              child: Text(
                isLast ? '知道了' : '下一步',
                style: TextStyle(color: PRIMARY_COLOR, fontSize: 14),
              ),
            ),
          ),
        ),
      ),
      Align(
        alignment: Alignment.bottomCenter,
        child: Container(
          margin: EdgeInsets.only(bottom: 50),
          child: CupertinoButton(
              padding: EdgeInsets.all(0),
              child: Text(
                '关闭',
                style: TextStyle(color: Color(0xFF4F5C87), fontSize: 14),
              ),
              onPressed: () {
                Navigator.of(context).pop();
              }),
        ),
      )
    ];
    for (Widget widget in children) {
      list.add(widget);
    }
    return Stack(
      children: list,
    );
  }
}

Future showUserGuide1(BuildContext context) {
  return Navigator.of(context).push(
    PageRouteBuilder(
      opaque: false,
      transitionDuration: Duration(milliseconds: 300),
      transitionsBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
        return FadeTransition(
          opacity: CurvedAnimation(parent: animation, curve: Curves.linear),
          child: child,
        );
      },
      pageBuilder: (BuildContext context, _, __) {
        return Material(
          color: Colors.black87,
          child: GestureDetector(
            child: Container(
              child: Stack(
                children: <Widget>[
                  Container(
                    margin: EdgeInsets.only(top: (MediaQuery.of(context).size.width - 30) * 186 / 345 + 133, right: 0),
                    child: Align(
                      alignment: Alignment.topRight,
                      child: Image.asset('images/zhezhao_01.png'),
                    ),
                  ),
                  Align(
                    alignment: Alignment.topCenter,
                    child: Container(
                      width: 200,
                      margin: EdgeInsets.only(top: (MediaQuery.of(context).size.width - 30) * 186 / 345 + 90),
                      child: Text(
                        '成为VIP后可以参与专属赛事赢得精美大奖',
                        style: TextStyle(color: Colors.white, fontSize: 16, fontWeight: FontWeight.bold),
                      ),
                    ),
                  )
                ],
              ),
            ),
            onTap: () {
              Navigator.of(context).pop();
            },
          ),
        );
      },
    ),
  );
}

Future showUserGuide2(BuildContext context) {
  return Navigator.of(context).push(
    PageRouteBuilder(
      opaque: false,
      transitionDuration: Duration(milliseconds: 300),
      transitionsBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
        return FadeTransition(
          opacity: CurvedAnimation(parent: animation, curve: Curves.linear),
          child: child,
        );
      },
      pageBuilder: (BuildContext context, _, __) {
        return Material(
          color: Colors.black87,
          child: GestureDetector(
            child: Container(
              child: Stack(
                children: <Widget>[
                  Positioned(
                    top: (MediaQuery.of(context).size.width - 30) * 186 / 345 + 0,
                    right: 6,
                    left: 6,
                    child: Container(
                      child: Image.asset(
                        'images/zhezhao_02.png',
                        fit: BoxFit.fitWidth,
                      ),
                    ),
                  ),
                  Align(
                    alignment: Alignment.topCenter,
                    child: Container(
                      width: 200,
                      margin: EdgeInsets.only(top: (MediaQuery.of(context).size.width - 30) * 186 / 345, right: 60),
                      child: Text(
                        '选择一个等待中的房间进入即可参与本次比赛',
                        style: TextStyle(color: Colors.white, fontSize: 16, fontWeight: FontWeight.bold),
                      ),
                    ),
                  )
                ],
              ),
            ),
            onTap: () {
              Navigator.of(context).pop();
            },
          ),
        );
      },
    ),
  );
}

Future showUserGuide3(BuildContext context) {
  return Navigator.of(context).push(
    PageRouteBuilder(
      opaque: false,
      transitionDuration: Duration(milliseconds: 300),
      transitionsBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
        return FadeTransition(
          opacity: CurvedAnimation(parent: animation, curve: Curves.linear),
          child: child,
        );
      },
      pageBuilder: (BuildContext context, _, __) {
        return Material(
          color: Colors.black87,
          child: GestureDetector(
            child: Container(
              child: Stack(
                children: <Widget>[
                  Positioned(
                    bottom: 5,
                    right: 6,
                    left: 6,
                    child: Container(
                      child: Image.asset(
                        'images/zhezhao_03.png',
                        fit: BoxFit.fitWidth,
                      ),
                    ),
                  ),
                  Align(
                    alignment: Alignment.bottomCenter,
                    child: Container(
                      width: 200,
                      margin: EdgeInsets.only(bottom: 122, right: 60),
                      child: Text(
                        '加入房间后等待倒计时结束\n或者房主手动开启比赛',
                        style: TextStyle(color: Colors.white, fontSize: 16, fontWeight: FontWeight.bold),
                      ),
                    ),
                  )
                ],
              ),
            ),
            onTap: () {
              Navigator.of(context).pop();
            },
          ),
        );
      },
    ),
  );
}