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
|
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
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/