Flutter Intro Slider | 𝟐𝟎𝟐𝟎 | 𝐍𝐞𝐰𝐛𝐲𝐂𝐨𝐝𝐞𝐫.𝐜𝐨𝐦

intro_slider package can be used to implement an app intro slider or welcome screen slider

Typically, it is used to provide an overview of an application

Creating new Flutter App

Check Flutter installation to setup Flutter

Use flutter create command to create a Flutter project (here intro_slider_app :

flutter create intro_slider_app

Dependency

Add intro_slider package to pubspec.yaml

dependencies:
    intro_slider: "^0.4.2+4"
    flutter:
        sdk: flutter

Run following command to add dependency
```
flutter pub get
```

Implementation

Import

import 'package:intro_slider/intro_slider.dart';
import 'package:intro_slider/slide_object.dart';

Create slides

Sample slide object to store data for a slide :

new Slide(
    title: "Baby Desert Eagle",
    styleTitle: TextStyle(
        color: Color(0xff3da4ab),
        fontSize: 30.0,
        fontWeight: FontWeight.bold,
        fontFamily: 'RobotoMono'),
    description: "9×33mm",
    styleDescription: TextStyle(
        color: Color(0xfffe9c8f),
        fontSize: 20.0,
        fontStyle: FontStyle.italic,
        fontFamily: 'Raleway'),
    pathImage: "images/de.png",
)

Create intro slider

Create IntroSlider with list of slides

return new IntroSlider(
      // List of slides
      slides: this.slides,

      // Skip button
      renderSkipBtn: this.renderSkipBtn(),
      colorSkipBtn: Color(0x33ffcc5c),
      highlightColorSkipBtn: Color(0xffffcc5c),

      // Next button
      renderNextBtn: this.renderNextBtn(),

      // Done button
      renderDoneBtn: this.renderDoneBtn(),
      colorDoneBtn: Color(0x33ffcc5c),
      highlightColorDoneBtn: Color(0xffffcc5c),
      onDonePress: this.onDonePress,

      // Dot indicator
      colorDot: Color(0xffffcc5c),
      sizeDot: 13.0,

      // Tabs
      listCustomTabs: this.renderListCustomTabs(),
      backgroundColorAllSlides: Colors.white,
      refFuncGoToTab: (refFunc) {
        this.goToTab = refFunc;
      },

      // Show or hide status bar
      shouldHideStatusBar: true,

      // On tab change
      onTabChangeCompleted: this.onTabChangeCompleted,
    );

    // handler for done button press
    void onDonePress() {

    }

    // handler for tab change
    void onTabChangeCompleted(index) {
      // Index of current tab is focused
    }

App Code

import 'package:flutter/material.dart';
import 'package:intro_slider/intro_slider.dart';
import 'package:intro_slider/slide_object.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'dart:async';

void main() => runApp(new IntroSliderApp());

class IntroSliderApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LoadingScreen(),
      debugShowCheckedModeBanner: false,
      routes: <String, WidgetBuilder>{
        IntroScreen.routeName: (BuildContext context) => IntroScreen(),
        AppPage.routeName: (BuildContext context) => AppPage(),
      },
    );
  }
}

class IntroScreen extends StatefulWidget {
  static const String routeName = '/intro';
  IntroScreen({Key key}) : super(key: key);

  @override
  IntroScreenState createState() => new IntroScreenState();
}

class IntroScreenState extends State<IntroScreen> {
  List<Slide> slides = new List();
  Function goToTab;

  @override
  void initState() {
    super.initState();
    TextStyle titleStyle = TextStyle(
        color: Color(0xff3da4ab),
        fontSize: 30.0,
        fontWeight: FontWeight.bold,
        fontFamily: 'RobotoMono'
      );
    TextStyle descriptionStyle = TextStyle(
        color: Color(0xfffe9c8f),
        fontSize: 20.0,
        fontStyle: FontStyle.italic,
        fontFamily: 'Raleway'
      );
    slides.add(
      new Slide(
        title: "Awm",
        styleTitle: titleStyle,
        description: "8.6×70mm",
        styleDescription: descriptionStyle,
        backgroundImage: "images/awm.png",
        backgroundColor: Colors.white,
        backgroundImageFit: BoxFit.contain,
        backgroundOpacity: 0,
        marginDescription: EdgeInsets.only( top: 355)
      ),
    );
    slides.add(
      new Slide(
        title: "Baby Desert Eagle",
        styleTitle: titleStyle,
        description: "9×33mm",
        styleDescription: descriptionStyle,
        backgroundImage: "images/de.png",
        backgroundColor: Colors.white,
        backgroundImageFit: BoxFit.contain,
        backgroundOpacity: 0,
        marginDescription: EdgeInsets.only( top: 382)
      ),
    );
    slides.add(
      new Slide(
        pathImage: "images/mascot.png",
        foregroundImageFit: BoxFit.fill,
        widthImage: 400,
        heightImage: 300,
        colorBegin: Color(0xffFFA500),
        colorEnd: Color(0xff7FFFD4),
        directionColorBegin: Alignment.topCenter,
        directionColorEnd: Alignment.bottomCenter,
      ),
    );
    slides.add(
      new Slide(
        backgroundImage: "images/dmite.png",
        backgroundImageFit: BoxFit.cover,
        backgroundColor: Colors.blue,
        backgroundOpacity: 0,
      ),
    );
  }

  void introShown() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    prefs.setBool('showIntro', false);
  }

  void onDonePress() {
    introShown();
    Navigator.of(context).pop();
    Navigator.of(context).pushNamed(AppPage.routeName);
  }

  void onTabChangeCompleted(index) {
    // seemed like it was called twice
    // print("index ${index}");
  }

  Widget renderNextBtn() {
    return Icon(
      Icons.navigate_next,
      color: Colors.white,
      size: 35.0,
    );
  }

  Widget renderDoneBtn() {
    return Icon(
      Icons.done,
      color: Colors.white,
    );
  }

  Widget renderSkipBtn() {
    return Icon(
      Icons.skip_next,
      color:Colors.white,
    );
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new IntroSlider(
      slides: this.slides,
      renderSkipBtn: this.renderSkipBtn(),
      colorSkipBtn: Colors.blue.withOpacity(0.5),
      highlightColorSkipBtn: Colors.blue.withOpacity(0.9),
      renderNextBtn: this.renderNextBtn(),

      renderDoneBtn: this.renderDoneBtn(),
      onDonePress: this.onDonePress,
      colorDoneBtn: Colors.blue.withOpacity(0.5),
      highlightColorDoneBtn: Colors.blue.withOpacity(0.9),
      sizeDot: 13.0,

      backgroundColorAllSlides: Colors.white,
      refFuncGoToTab: (refFunc) {
        this.goToTab = refFunc;
      },
      shouldHideStatusBar: false,
      onTabChangeCompleted: this.onTabChangeCompleted,
    );
  }
}

class AppPage extends StatelessWidget {
  static const String routeName = '/appPage';

  void showIntroScreen(BuildContext context) {
    Navigator.of(context).pop();
    Navigator.of(context).pushNamed(IntroScreen.routeName);
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('App Intro Slider Example'),
        backgroundColor: Colors.blue,
        automaticallyImplyLeading: false,
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Padding(
              padding: EdgeInsets.all(30),
              child: Text('setting "automaticallyImplyLeading" to false disables back button in AppBar and shifts title to left\n Dart version 2.7'),
            ),
            FlatButton(
              child: Text("Show Intro"),
              color: Colors.blue,
              onPressed: () => showIntroScreen(context),
            ),
          ],
        ),
      ),
    );
  }
}

class LoadingScreen extends StatefulWidget {
  static const String routeName = '/appPage';
  LoadingScreen({Key key}) : super(key: key);
  @override
  LoadingScreenState createState() => new LoadingScreenState();
}

class LoadingScreenState extends State<LoadingScreen> {

  @override
  void initState() {
    super.initState();
    init();
  }

  void init() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    bool showIntro= await prefs.getBool('showIntro') ?? true;
    Navigator.of(context).pop();
    if(showIntro) {
        Navigator.of(context).pushNamed(IntroScreen.routeName);
    }
    else {
        Navigator.of(context).pushNamed(AppPage.routeName);
    }
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: Container(
        color: Colors.blue.withOpacity(0.6),
        child: Center(
          child: CircularProgressIndicator(),
        ),
      ),
    );
  }
}