Flutter啓動歡迎頁之intro_slider

簡介

• intro_slider是Flutter一個應用啓動歡迎頁面的插件，能夠幫助你介紹你的應用，以顯示你的應用程序的主要功能， 你能夠更改圖像，按鈕，文本樣式，顏色等，建立介紹屏幕從未如此簡單快捷

• 目前官方版本是intro_slider 1.2.0

• intro_slider插件地址：pub.dartlang.org/packages/in…

• 本文具體效果能夠查看個人github玩安卓項目：github.com/ngu2008/wan…

如何使用

• 先看效果圖

• 具體使用

class SplashScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new SplashScreenState() ;
  }
}
class SplashScreenState extends State<SplashScreen> {
  List<Slide> slides = new List();
  @override
  void initState() {
    super.initState();
    slides.add(
      new Slide(
        title: "Flutter",
        description:
        "Flutter是谷歌的移動UI框架，能夠快速在iOS和Android上構建高質量的原生用戶界面。 Flutter能夠與現有的代碼一塊兒工做。在全世界，Flutter正在被愈來愈多的開發者和組織使用，而且Flutter是徹底免費、開源的。",
        styleDescription: TextStyle(
            color: Colors.white,
            fontSize: 20.0,
            fontFamily: 'Raleway'),
        marginDescription: EdgeInsets.only(left: 20.0, right: 20.0, top: 20.0, bottom: 70.0),
        colorBegin: Color(0xffFFDAB9),
        colorEnd: Color(0xff40E0D0),
        directionColorBegin: Alignment.topLeft,
        directionColorEnd: Alignment.bottomRight,
      ),
    );
    slides.add(
      new Slide(
        title: "Wanandroid",
        description:
        "這是一款使用Flutter寫的WanAndroid客戶端應用，在Android和IOS都完美運行,能夠用來入門Flutter，簡單明瞭，適合初學者,項目徹底開源，若是本項目確實可以幫助到你學習Flutter，謝謝start，有問題請提交Issues,我會及時回覆。",
        styleDescription: TextStyle(
            color: Colors.white,
            fontSize: 20.0,
            fontFamily: 'Raleway'),
        marginDescription: EdgeInsets.only(left: 20.0, right: 20.0, top: 20.0, bottom: 70.0),
        colorBegin: Color(0xffFFFACD),
        colorEnd: Color(0xffFF6347),
        directionColorBegin: Alignment.topLeft,
        directionColorEnd: Alignment.bottomRight,
      ),
    );
    slides.add(
      new Slide(
        title: "Welcome",
        description:
        "贈人玫瑰，手有餘香；\n分享技術，傳遞快樂。",
        styleDescription: TextStyle(
            color: Colors.white,
            fontSize: 20.0,
            fontFamily: 'Raleway'),
        marginDescription: EdgeInsets.only(left: 20.0, right: 20.0, top: 20.0, bottom: 70.0),
        colorBegin: Color(0xffFFA500),
        colorEnd: Color(0xff7FFFD4),
        directionColorBegin: Alignment.topLeft,
        directionColorEnd: Alignment.bottomRight,
      ),
    );
  }
  void onDonePress() {
    _setHasSkip();
    Navigator.of(context).pushAndRemoveUntil(
        new MaterialPageRoute(
            builder: (context) => App()),
            (route) => route == null);
  }
  
  void _setHasSkip ()async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    await prefs.setBool("hasSkip", true);
  }
  @override
  Widget build(BuildContext context) {
    return IntroSlider(
        slides: this.slides,
      onDonePress: this.onDonePress,
      nameSkipBtn: "跳過",
      nameNextBtn: "下一頁",
      nameDoneBtn: "進入",
    );
  }
}
複製代碼

• 舒適提示:歡迎訪問個人Github主頁，有更多Flutter相關資料；
• 本文爲個人原創文章，未經容許，不得轉載！