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.

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 list of slides you want to add as the intro to your app.
onSkipPress – This function is used to define a set of code which you can perform when the Skip Button is pressed.
onNextPress – This function is used to define a set of code which you can perform when the Next Button is pressed.
onDonePress – This function is used to define a set of code which you can perform when the Done Button is pressed.
rendrSkipBtn – It takes a custom widget which we want to display in place of Skip Button.
renderNextBtn – It takes a custom widget which we want to display in place of Next Button.

title – It takes the top title for each Slide.
pathImage – To provide the image path for the Slide.
background color – It is used to specify the background color for the Slide.

Steps for Integrating Intro_Slider in Flutter

Step – 1–> 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 click here.

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.

References

https://pub.dev/packages/intro_slider

flutter Onboarding_screen

Tanya Goel 31 January 2022

. . .

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

Intro_Slider in Fluter

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!