Flutter: How to Build Intro Slider for your App

  • Create a new Flutter project
  • Create a new stateful widget MyApp in main.dart
  • Create a new stateful widget IntroSlider
  • Create a new Widget EachPage
  • Create an Indicator widget for the PageView

Create a new Futter project, remove the existing code of the MyApp widget, and create a new stateless widget MyApp.

Create a new widget IntroSlider in a new file intro_slider.dart.

Update MyApp to return IntroSlider

Add PageView to IntroSlider . Also add a PageController, arrays for messages, and images to be displayed on each page and variables for total number of pages and to hold the index of the current page.

Also include the image assets.

And we are returning a widget called EachPage from the itemBuider of the PageView.buider which we have not created yet.

Now let’s create the EachPage widget for displaying a page of the PageView. We shall pass the message and image resource for each page while calling this widget from IntroSlider widget.

Now if we run the app we can that we have a beautiful slider of three pages each page displays an image and a text.

Next, we shall add a page indicator and a “Skip” button. The “Skip” button will be replaced by a “Login” button if the current page is the last page of the slider. On clicking the skip button it will jump directly to the last page of the PageView.

These above-mentioned widgets should overlap with the PageView, thus we’ll enclose the PageView inside a Stack widget.

Following steps are the next:

  • Wrap PageView inside a Stack widget
  • Add onPageChanged listener to the PageView and change the value of currentPage there
  • Add an Align widget (aligned to bottom) as the second child of the Stack. This will contain the page indicator and the buttons.

Now you might already have noticed that we have used a new widget named Indicator in the code above but we haven’t created it yet. So let us create the Indicator widget to display the page indicator.

Following are the steps to create a simple Indicator widget:

  • Create an AnimatedWidget named Indicator in a new file
  • We will pass our PageController from IntroSlider to this widget which will be passed to the superclass as a value for the property ‘listenable’, we’ll also pass the number of pages.
  • From the build() method return a list of n number of containers; where n is the number of pages and each container will represent a dot indicator.
  • Create the indicator dots using _createIndicator(index) method. If this index is equal to the index of the current page we shall enlarge the dot a little.

Now if we run the app we will have a slider with the page indicator and the skip/login button.

The complete source code for the tutorial can be found on GitHub

Leave a Reply

Your email address will not be published. Required fields are marked *