mobileCyberGamesApp/lib/pages/GuidePage.dart

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

class GuidePage extends StatefulWidget {
  @override
  _GuidePageState createState() => _GuidePageState();
}

class _GuidePageState extends State<GuidePage> with WidgetsBindingObserver {
  int swiperIndex = 0;
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        // Navigator.of(context).pop();
      },
      child: Scaffold(
        backgroundColor: Color(0xCC000000),
        body: Container(
          child: new Swiper(
              itemBuilder: (BuildContext context, int index) {
                return GuidItem(index);
              },
              itemCount: 3,
              loop: false,
              onIndexChanged: (index) {
                setState(() {
                  swiperIndex = index;
                });
              },
              pagination: new SwiperCustomPagination(
                builder: (BuildContext context, SwiperPluginConfig config) {
                  return Stack(
                    children: <Widget>[
                      Positioned(
                        right: 20,
                        top: 20,
                        child: Image.asset('images/yindao_logo.png'),
                      ),
                      Positioned(
                          right: 20,
                          top: 60,
                          child: Container(
                              width: 47,
                              height: 26,
                              decoration: BoxDecoration(
                                color: Colors.black12,
                                borderRadius: BorderRadius.all(Radius.circular(13)),
                              ),
                              child: Center(
                                child: InkWell(
                                    onTap: () {
                                      Navigator.of(context).pop();
                                    },
                                    child: Text('跳过', style: TextStyle(color: Colors.white, fontSize: 13), textAlign: TextAlign.center)),
                              )))
                    ],
                  );
                },
              )),
        ),
        floatingActionButton: MyFloat(swiperIndex),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      ),
    );
  }
}

class GuidItem extends StatelessWidget {
  GuidItem(this.index);
  int index;

  List<String> bgImageList = ['images/yindao_bg_01.png', 'images/yindao_bg_02.png', 'images/yindao_bg_03.png'];
  List<String> textImageList = ['images/yindao_text_01.png', 'images/yindao_text_02.png', 'images/yindao_text_03.png'];

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(image: DecorationImage(image: AssetImage(bgImageList[index]), fit: BoxFit.fill)),
      child: Stack(
        children: <Widget>[
          Positioned(
            bottom: 70,
            left: 0,
            child: Container(
              width: 375,
              child: Center(
                child: Image.asset(textImageList[index]),
              ),
            ),
          )
        ],
      ),
    );
  }
}

class MyFloat extends StatelessWidget {
  MyFloat(this.index);
  int index;
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 70,
      // color: Colors.black,
      child: Center(
          child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: index < 2
            ? <Widget>[_dot(0, index), _dot(1, index), _dot(2, index)]
            : <Widget>[
                InkWell(
                  child: Image.asset('images/icon_inter_000.png'),
                  onTap: () {
                    Navigator.of(context).pop();
                  },
                )
              ],
      )),
    );
  }

  Widget _dot(index, activeIndex) {
    return Container(
      margin: EdgeInsets.all(2),
      decoration: BoxDecoration(
        color: (index == activeIndex ? Colors.white : Colors.white24),
        borderRadius: BorderRadius.all(Radius.circular(2)),
      ),
      width: 8,
      height: 4,
    );
  }
}