Intro Slider

In Mobile Application, Intro screen before App start is very necessary to introduce application flow and how to work. Here I try to implement Intro Slider in Flutter.

You can Download Source Code via Github.

Form here we start to implement, First we add lib file in .yaml file

Add the following libs to your pubspec.yaml file:

dots_indicator: ^1.2.0

Then we make data model for Intro screens

return IntroductionScreen(
      key: introKey,
      pages: [
        PageViewModel(
          title: "Loreum Ipsum",
          body:
          "Lorem ipsum dolor sit amet,consectetur adipiscing elit. Nullam feugiat eu ipsum vel viverra.",
          image: _buildImage('img1'),
          decoration: pageDecoration,
        ),
        PageViewModel(
          title: "Loreum Ipsum",
          body:
          "Lorem ipsum dolor sit amet,consectetur adipiscing elit. Nullam feugiat eu ipsum vel viverra.",
          image: _buildImage('img2'),
          decoration: pageDecoration,
        ),
        PageViewModel(
          title: "Loreum Ipsum",
          body:
          "Lorem ipsum dolor sit amet,consectetur adipiscing elit. Nullam feugiat eu ipsum vel viverra.",
          image: _buildImage('img3'),
          decoration: pageDecoration,
        ),
        PageViewModel(
          title: "Loreum Ipsum",
          body: "Lorem ipsum dolor sit amet,consectetur adipiscing elit. Nullam feugiat eu ipsum vel viverra.",
          image: _buildImage('img2'),
          footer: RaisedButton(
            onPressed: () {
              introKey.currentState?.animateScroll(0);
            },
            child: const Text(
              'Button',
              style: TextStyle(color: Colors.white),
            ),
            color: Colors.lightBlue,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(8.0),
            ),
          ),
          decoration: pageDecoration,
        ),
        PageViewModel(
          title: "Loreum Ipsum",
          bodyWidget: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
              Text("Click on ", style: bodyStyle),
              Icon(Icons.edit),
              Text(" to edit a post", style: bodyStyle),
            ],
          ),
          image: _buildImage('img1'),
          decoration: pageDecoration,
        ),
      ],
      onDone: () => _onIntroEnd(context),
      //onSkip: () => _onIntroEnd(context), // You can override onSkip callback
      showSkipButton: true,
      skipFlex: 0,
      nextFlex: 0,
      skip: const Text('Skip'),
      next: const Icon(Icons.arrow_forward),
      done: const Text('Done', style: TextStyle(fontWeight: FontWeight.w600)),
      dotsDecorator: const DotsDecorator(
        size: Size(10.0, 10.0),
        color: Color(0xFFBDBDBD),
        activeSize: Size(22.0, 10.0),
        activeShape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(25.0)),
        ),
      ),
    );

Implement Slider

return Scaffold(
      backgroundColor: widget.globalBackgroundColor,
      body: Stack(
        children: [
          NotificationListener<ScrollNotification>(
            onNotification: _onScroll,
            child: PageView(
              controller: _pageController,
              physics: widget.freeze
                  ? const NeverScrollableScrollPhysics()
                  : const BouncingScrollPhysics(),
              children: widget.pages.map((p) => IntroPage(page: p)).toList(),
              onPageChanged: widget.onChange,
            ),
          ),
          Positioned(
            bottom: 16.0,
            left: 16.0,
            right: 16.0,
            child: SafeArea(
              child: Row(
                children: [
                  Expanded(
                    flex: widget.skipFlex,
                    child: isSkipBtn
                        ? skipBtn
                        : Opacity(opacity: 0.0, child: skipBtn),
                  ),
                  Expanded(
                    flex: widget.dotsFlex,
                    child: Center(
                      child: widget.isProgress
                          ? DotsIndicator(
                              dotsCount: widget.pages.length,
                              position: _currentPage,
                              decorator: widget.dotsDecorator,
                              onTap: widget.isProgressTap && !widget.freeze
                                  ? (pos) => animateScroll(pos.toInt())
                                  : null,
                            )
                          : const SizedBox(),
                    ),
                  ),
                  Expanded(
                    flex: widget.nextFlex,
                    child: isLastPage
                        ? doneBtn
                        : widget.showNextButton
                            ? nextBtn
                            : Opacity(opacity: 0.0, child: nextBtn),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );

You can Download Source Code via Github.

17 Replies to “Intro Slider”

  1. We are a group of volunteers and opening a new scheme
    in our community. Your site offered us with valuable information to work on. You’ve done
    a formidable job and our whole community will be thankful to you.

  2. If you are going for most excellent contents like me, simply pay a quick visit this web site
    every day for the reason that it gives quality contents, thanks

  3. This is really attention-grabbing, You are an overly professional blogger.
    I’ve joined your feed and look forward to seeking extra of your excellent post.

    Additionally, I’ve shared your website in my social networks

Leave a Reply to Jose Cancel reply

Your email address will not be published.