Setting Intro Slider in Flutter Applications
Introduction Screens help users to understand how the application works. These screens display various features of application. They expand user’s knowledge of your application. They are also referred as onboarding screens to introduce and application to users.
These screens set expectations of users about application because these are the first set of screen with which users can interact. These screens try to explain different functionalities of application in a short way. When we first introduce our product to users they want to know short introduction of product.
Add below line under dependencies section in pubspec file
Integrate Intro Slider Widget
import 'package:flutter/material.dart'; import 'package:intro_slider/intro_slider.dart'; import 'package:intro_slider/slide_object.dart'; class Intro extends StatefulWidget { @override State<StatefulWidget> createState() { // TODO: implement createState return IntroState(); } } class IntroState extends State<Intro> { List<Slide> listSlides = []; @override Widget build(BuildContext context) { // TODO: implement build return IntroSlider( slides: listSlides, onDonePress: onPressedDone, ); } @override void initState() { // TODO: implement initState super.initState(); listSlides.add(Slide( title: "Premier League", description: "English Premier League or EPL", pathImage: "images/premier_league.jpg", backgroundColor: Colors.pinkAccent, )); listSlides.add(Slide( title: "La Liga", description: "The Campeonato Nacional de Liga de Primera División", pathImage: "images/laliga.png", backgroundColor: Colors.deepOrangeAccent, )); listSlides.add(Slide( title: "Bundesliga", description: "Federal League", pathImage: "images/bundesliga.jpg", backgroundColor: Colors.redAccent, )); listSlides.add(Slide( title: "Serie A", description: "Lega Nazionale Professionisti Serie A", pathImage: "images/serie_a.jpg", backgroundColor: Colors.blueAccent, )); listSlides.add(Slide( title: "Ligue 1", description: "Ligue 1 Conforama", pathImage: "images/ligue_one.png", backgroundColor: Colors.amberAccent, )); } onPressedDone() { } }
Integrate in main.dart file
MaterialApp widget provides debugshowcheckedModeBanner and home parameters. debugshowcheckedModeBanner parameter is used to display debug label in top right of the device screen or not. We can set first widget which is displayed on the launch of application using home parameter in main.dart file.
import 'package:flutter/material.dart'; import 'package:flutterintroslidersample/intro.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Intro(), ); } }




