Introduction to the

  • Intro_slider is a plugin for Flutter to launch the welcome page. It helps you introduce your app to show the main features of your app. You can change images, buttons, text styles, colors, etc. Creating an intro screen has never been easier and faster

  • The current official version is Intro_Slider 1.2.0

  • Intro_slider plug-in address: pub.dartlang.org/packages/in…

  • The specific effects of this article can be viewed in my Github play Android project: github.com/ngu2008/wan…

How to use

  • Look at the renderings first
  • The specific use
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 is Google's mobile UI framework for quickly building high-quality native user interfaces on iOS and Android. Flutter can work with existing code. Flutter is being used by more and more developers and organizations around the world, and Flutter is completely free and open source.",
        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:
        "This is a WanAndroid client application written using Flutter. It runs perfectly on Both Android and IOS. It can be used to get started with Flutter. If you have any questions, please submit Issues and I will reply in time.",
        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:
        "Give a rose, the hand has lingering fragrance; \n Share technology, spread happiness.",
        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, ), ); } voidonDonePress() {
    _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: "Skip",
      nameNextBtn: "Next page",
      nameDoneBtn: "Enter",); }}Copy the code
  • Tips: Please visit my Github home page for more information about Flutter.
  • This article is my original article, shall not be reproduced without permission!