Flutter Introduction Slider

Flutter has intro_slider plugin/package to provides Intro Slider when App Starts. You have to add this dependencies in your pubspec.yaml file :

intro_slider: ^2.2.9

This is the Sample Code of Intro Slider

import 'package:flutter/material.dart';
import 'package:intro_slider/intro_slider.dart';
import 'package:intro_slider/slide_object.dart';
import 'package:warrior_panda/utils/constants.dart';
class SliderScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SliderPage(),
    );
  }
}
class SliderPage extends StatefulWidget {
  @override
  _SliderPageState createState() => _SliderPageState();
}
class _SliderPageState extends State<SliderPage> {
  List<Slide> slides = new List();
  @override
  void initState() {
    super.initState();
  }
  void moveToHome() {
    Navigator.of(context).pushReplacementNamed("/login");
  }
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return FutureBuilder(
        future: initSlides(size.height),
        builder: (context, snapshot) {
          return this.slides.length != 0 ? IntroSlider(
            styleNameDoneBtn: TextStyle(color: Colors.white, fontSize: 17, fontWeight: FontWeight.bold),
            styleNamePrevBtn: TextStyle(color: Colors.white, fontSize: 17, fontWeight: FontWeight.bold),
            styleNameSkipBtn: TextStyle(color: Colors.white, fontSize: 17, fontWeight: FontWeight.bold),
            slides: this.slides,
            onDonePress: this.moveToHome,
            onSkipPress: this.moveToHome,
          ): CircularProgressIndicator();
        });
  }
  initSlides(height) {
    slides.add(
      new Slide(
        styleDescription: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold),
        styleTitle: TextStyle(color: Colors.white, fontSize: 30, fontWeight: FontWeight.bold),
        title: "Hola Game Lover",
        description:
            "Join and Play world class tournaments to win real cash from your gaming skill.",
        pathImage: "assets/images/logo.png",
        backgroundColor: Color(Constants.backgroundColor), //Color(0xffc873f4),
        marginTitle: EdgeInsets.only(top: height * 0.06, bottom: height * 0.08),
      ),
    );
    slides.add(
      new Slide(
        styleDescription: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold),
        styleTitle: TextStyle(color: Colors.white, fontSize: 30, fontWeight: FontWeight.bold),
        title: "Get Rewards",
        description:
            "You will earn money for each kill and bumber cash for chicken dinner.",
        pathImage: "assets/images/h_rewardde.png",
        backgroundColor: Color(Constants.backgroundColor), //Color(0xfff64c73),
        marginTitle: EdgeInsets.only(top: height * 0.06, bottom: height * 0.08),
      ),
    );
    slides.add(
      new Slide(
        styleDescription: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold),
        styleTitle: TextStyle(color: Colors.white, fontSize: 30, fontWeight: FontWeight.bold),
        title: "Play With Your Friends",
        description:
            "Invite your friends to play with you and you will get referral rewards when he enter in one match.",
        pathImage: "assets/images/h_joinasd.png",
        backgroundColor: Color(Constants.backgroundColor), //Color(0xff25b7d3),
        marginTitle: EdgeInsets.only(top: height * 0.06, bottom: height * 0.08),
      ),
    );
  }
}

Above code produce this Output :

Official website of this package : Fluter Intro Slider

Share

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *