Intro_Slider in Fluter

Intro_Slider in Flutter is a plugin is used to create customizable and beautiful OnBoarding Screens for the App.

Onboarding Screens are easily seen nowadays in most applications.

It provides a short overview of the App.

Read more about our Flutter app development company

In this plugin, we can either use Default Config or we can even customize the Config and Slider Tabs.

Properties of Intro_Slider

slides – It takes a list of slides you want to add as the intro to your app.
onSkipPress – This function is used to define a set of code that is performed when the Skip Button is pressed.
onNextPress – This function is used to define a set of code that is performed when the Next Button is pressed.
onDonePress – This function is used to define a set of code that is performed can perform when the Done Button is pressed.
rendrSkipBtn – It takes a custom widget that we want to display in place of the Skip Button.
renderNextBtn – It takes a custom widget that we want to display in place of the Next Button.

Properties of Slide Widget used in Intro_Slider

title – It takes the top title for each Slide.
pathImage – It takes the image path for the Slide.
backgroundColor – We can use it to specify the background color for each slide.

Steps for Integrating Intro_Slider in Flutter

Step – 1–> First, Add the intro_slider dependency to the pubspec.yaml file

intro_slider: ^3.0.3

1	intro_slider: ^3.0.3

Now, run ‘flutter pub get’ command. In order to check, the udpated version of the dependency intro_slider.

Step – 2–> Once we have added a dependency to our project. Now we are ready, to begin with, the code.

Code

Firstly, here we will be checking how our Onboarding Screens will look with Default Config.

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

void main() {
  runApp(const IntroSliderClass());
}

class IntroSliderClass extends StatelessWidget {
  const IntroSliderClass({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyApp(),
    );
  }
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<Slide> slides = [];

  @override
  Widget build(BuildContext context) {
    return IntroSlider(
      slides: slides,
    );
  }

  @override
  void initState() {
    super.initState();
    slides.add(
      Slide(
        title: "Configurable Homepage",
        description:
            'Easy to customize Homepage as per your requirement through Admin Panel',
        pathImage: "assets/images/homepage.png",
        backgroundColor: const Color(0xff9932CC),
      ),
    );
    slides.add(
      Slide(
        title: "Search",
        description:
            "Easy to search products with the help of ML Feature and Voice Search",
        pathImage: "assets/images/flutter_search.png",
        backgroundColor: const Color(0xff203152),
      ),
    );
    slides.add(
      Slide(
        title: "Chat Feature",
        description: "Provides you with an option to Chat with Seller",
        pathImage: "assets/images/firebase-chat-app.png",
        backgroundColor: const Color(0xffB22222),
      ),
    );
  }
}

import 'package:flutter/material.dart';

import 'package:intro_slider/intro_slider.dart';

import 'package:intro_slider/slide_object.dart';

void main() {

runApp(const IntroSliderClass());

}

class IntroSliderClass extends StatelessWidget {

const IntroSliderClass({Key? key}) : super(key: key);

@override

Widget build(BuildContext context) {

return const MaterialApp(

debugShowCheckedModeBanner: false,

home: MyApp(),

);

}

class MyApp extends StatefulWidget {

const MyApp({Key? key}) : super(key: key);

@override

_MyAppState createState() => _MyAppState();

}

class _MyAppState extends State<MyApp> {

List<Slide> slides = [];

@override

Widget build(BuildContext context) {

return IntroSlider(

slides: slides,

);

}

@override

void initState() {

super.initState();

slides.add(

Slide(

title: "Configurable Homepage",

description:

'Easy to customize Homepage as per your requirement through Admin Panel',

pathImage: "assets/images/homepage.png",

backgroundColor: const Color(0xff9932CC),

);

slides.add(

Slide(

title: "Search",

description:

"Easy to search products with the help of ML Feature and Voice Search",

pathImage: "assets/images/flutter_search.png",

backgroundColor: const Color(0xff203152),

);

slides.add(

Slide(

title: "Chat Feature",

description: "Provides you with an option to Chat with Seller",

pathImage: "assets/images/firebase-chat-app.png",

backgroundColor: const Color(0xffB22222),

);

}

Output –

Conclusion

In this blog, we have discussed how to create beautiful onboarding screens for your application.

I hope it will help you out in understanding and getting a brief idea about it.

You can also check the showcase view in Flutter – https://mobikul.com/showcase-in-flutter/

References

https://pub.dev/packages/intro_slider

flutter Onboarding_screen

Tanya Goel

27 Apr, 2023
Updated by - Tanya Goel
31 Mar, 2022
Updated by - Tanya Goel

. . .

Properties of Intro_Slider

Properties of Slide Widget used in Intro_Slider

Steps for Integrating Intro_Slider in Flutter

Code

Conclusion

References

Leave a Comment Cancel Reply

Message Sent!