mobileCyberGamesApp/lib/pages/CompetitionNotice.dart

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

void showNotice(BuildContext context) {
  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 CompetitionNotice();
      },
    ),
  );
}

class CompetitionNotice extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return CompetitionNoticeState();
  }
}

class CompetitionNoticeState extends State<CompetitionNotice> {
  final pageController = PageController(initialPage: 0);
  bool showPrev = false;
  bool showNext = true;

  @override
  Widget build(BuildContext context) {
    final iconSize = (MediaQuery.of(context).size.width - 286) / 2;
    return WillPopScope(
      onWillPop: () {
        return Future.value(true);
      },
      child: Scaffold(
        backgroundColor: Color(0xb3000000),
        body: Stack(
          children: <Widget>[
            PageView(
              controller: pageController,
              onPageChanged: (page) {
                print(page);
                if (page == 0) {
                  setState(() {
                    showPrev = false;
                    showNext = true;
                  });
                } else if (page == 3) {
                  setState(() {
                    showPrev = true;
                    showNext = false;
                  });
                } else {
                  setState(() {
                    showPrev = true;
                    showNext = true;
                  });
                }
              },
              children: <Widget>[
                _page(
                  context,
                  title: '竞赛须知 1/4',
                  onNext: () {
                    pageController.nextPage(duration: Duration(milliseconds: 500), curve: Curves.linearToEaseOut);
                  },
                  body: Container(
                    margin: EdgeInsets.only(top: 65),
                    child: Column(
                      children: <Widget>[
                        Image.asset('images/icon_jifen_da.png'),
                        Container(
                          width: 230,
                          margin: EdgeInsets.only(top: 10),
                          child: Text.rich(
                            TextSpan(text: '每局比赛按照吃鸡单人游戏的', children: [
                              TextSpan(text: '评分', style: TextStyle(color: Colors.yellow)),
                              TextSpan(text: '进行排序，评分相同游戏时长短的优胜'),
                            ]),
                            textAlign: TextAlign.center,
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 13,
                            ),
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.only(top: 10),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Text(
                                '注：',
                                style: TextStyle(color: Color(0x66FFFFFF), fontSize: 12),
                              ),
                              Text(
                                '第一名获得40积分\n剩余10%获得20积分\n剩余20%获得10积分\n剩余30%获得0积分\n剩余40%获得-10积分\n吃鸡选手额外获得10积分',
                                style: TextStyle(color: Color(0x66FFFFFF), fontSize: 12),
                              ),
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                ),
                _page(
                  context,
                  title: '竞赛须知 2/4',
                  onNext: () {
                    pageController.nextPage(duration: Duration(milliseconds: 500), curve: Curves.linearToEaseOut);
                  },
                  body:Container(
                    margin: EdgeInsets.only(top: 75),
                    child: Column(
                      children: <Widget>[
                        Image.asset('images/img_xuzhi_02.png'),
                        Container(
                          width: 230,
                          margin: EdgeInsets.only(top: 10),
                          child: Text.rich(
                            TextSpan(text: '竞赛开始前请在此耐心等待，在开始时会有上图所示弹窗，', children: [
                              TextSpan(text: '玩家必须在10秒内点击确认', style: TextStyle(color: Colors.yellow)),
                              TextSpan(text: '，否则视为放弃此次竞赛'),
                            ]),
                            textAlign: TextAlign.center,
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 13,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                _page(
                  context,
                  title: '竞赛须知 3/4',
                  onNext: () {
                    pageController.nextPage(duration: Duration(milliseconds: 500), curve: Curves.linearToEaseOut);
                  },
                  body:Container(
                    margin: EdgeInsets.only(top: 75),
                    child: Column(
                      children: <Widget>[
                        Image.asset('images/img_xuzhi_03.png'),
                        Container(
                          width: 230,
                          margin: EdgeInsets.only(top: 10),
                          child: Text.rich(
                            TextSpan(text: '确认竞赛后会有弹窗提示授权进行录屏的操作，请一定', children: [
                              TextSpan(text: '点击“确定”', style: TextStyle(color: Colors.yellow)),
                              TextSpan(text: '或“允许”此操作，否则竞赛判定失败'),
                            ]),
                            textAlign: TextAlign.center,
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 13,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                _page(
                  context,
                  title: '竞赛须知 4/4',
                  nextText: '关闭',
                  onNext: () {
                    Navigator.of(context).pop();
                  },
                  showCancel: false,
                  body: Container(
                    margin: EdgeInsets.only(top: 75),
                    child: Column(
                      children: <Widget>[
                        Image.asset('images/img_xuzhi_04.png'),
                        Container(
                          width: 230,
                          margin: EdgeInsets.only(top: 10),
                          child: Text.rich(
                              TextSpan(text: '在游戏比赛结束后，', children: [
                              TextSpan(text: '请一定要点击查看游戏最后的分数名次结算页面', style: TextStyle(color: Colors.yellow)),
                              TextSpan(text: '，返回游戏主页，最后再切换到我们竞赛app中，点击完成比赛，方可成功长传本次成绩，赢取积分'),
                            ]),
                            textAlign: TextAlign.center,
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 13,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Container(
                margin: EdgeInsets.only(left: 4),
                child: showPrev
                    ? GestureDetector(
                        onTap: () {
                          pageController.previousPage(duration: Duration(milliseconds: 500), curve: Curves.linearToEaseOut);
                        },
                        child: Transform.rotate(
                          angle: pi,
                          child: Image.asset('images/icon_xiayiye.png', width: iconSize),
                        ),
                      )
                    : null,
              ),
            ),
            Align(
              alignment: Alignment.centerRight,
              child: showNext
                  ? Container(
                      margin: EdgeInsets.only(left: 4),
                      child: GestureDetector(
                        onTap: () {
                          pageController.nextPage(duration: Duration(milliseconds: 500), curve: Curves.linearToEaseOut);
                        },
                        child: Image.asset('images/icon_xiayiye.png', width: iconSize),
                      ),
                    )
                  : null,
            ),
          ],
        ),
      ),
    );
  }
}

Widget _page(
  BuildContext context, {
  @required String title,
  @required Widget body,
  void Function() onNext,
  String nextText = '下一个',
  bool showCancel = true,
}) {
  return Stack(
    children: <Widget>[
      Center(
        child: Container(
          width: 270,
          height: 422,
          decoration: BoxDecoration(
              color: Color(0xE6293559),
              border: Border.all(
                width: 1,
                color: PRIMARY_COLOR,
              )),
          child: Stack(
            children: <Widget>[
              Align(
                alignment: Alignment.topRight,
                child: Container(
                  margin: EdgeInsets.only(top: 7),
                  child: Image.asset('images/icon_tanchuang_01.png'),
                ),
              ),
              Align(
                alignment: Alignment.bottomLeft,
                child: Container(
                  margin: EdgeInsets.only(bottom: 7),
                  child: Image.asset('images/icon_tanchuang_02.png'),
                ),
              ),
              Align(
                alignment: Alignment.topCenter,
                child: Container(
                  margin: EdgeInsets.only(top: 27),
                  child: Text(
                    title,
                    style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
              Align(
                alignment: Alignment.topCenter,
                child: body,
              ),
              Align(
                alignment: Alignment.bottomCenter,
                child: Container(
                  margin: EdgeInsets.only(bottom: 62),
                  child: MaterialButton(
                    elevation: 0,
                    highlightElevation: 0,
                    minWidth: 200,
                    color: PRIMARY_COLOR,
                    child: Text(
                      nextText,
                      style: TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                      ),
                    ),
                    onPressed: () {
                      if (onNext != null) {
                        onNext();
                      }
                    },
                  ),
                ),
              ),
              Align(
                alignment: Alignment.bottomCenter,
                child: Container(
                  margin: EdgeInsets.only(bottom: 25),
                  child: showCancel
                      ? CupertinoButton(
                          padding: EdgeInsets.fromLTRB(10, 7, 10, 7),
                          child: Text(
                            '取消',
                            style: TextStyle(
                              color: Color(0xB0FFFFFF),
                              fontSize: 13,
                            ),
                          ),
                          onPressed: () {
                            Navigator.of(context).pop();
                          },
                        )
                      : null,
                ),
              )
            ],
          ),
        ),
      ),
    ],
  );
}