Flutter啟動歡迎頁之intro_slider

ngu2008發表於2019-04-01
FlutterIDE

簡介

  • intro_slider是Flutter一個應用啟動歡迎頁面的外掛，可以幫助你介紹你的應用，以顯示你的應用程式的主要功能， 你可以更改影象，按鈕，文字樣式，顏色等，建立介紹螢幕從未如此簡單快捷

  • 目前官方版本是intro_slider 1.1.9

  • intro_slider外掛地址：pub.dartlang.org/packages/in…

  • 本文具體效果可以檢視我的github玩安卓專案：github.com/ngu2008/wan…

如何使用

  • 先看效果圖
Flutter啟動歡迎頁之intro_slider
Flutter啟動歡迎頁之intro_slider
Flutter啟動歡迎頁之intro_slider
  • 具體使用
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 onSkipPress() {
    _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,
      onSkipPress: this.onSkipPress,
      nameSkipBtn: "跳過",
      nameNextBtn: "下一頁",
      nameDoneBtn: "進入",
    );
  }
}
複製程式碼
  • 溫馨提示:歡迎訪問我的Github主頁，有更多Flutter相關資料；
  • 本文為我的原創文章，未經允許，不得轉載！

相關文章