Tuesday, September 26, 2023

Sliding widget Library for Flutter

introduction screen slider widgets

Today iam going to introduce another awesome sliding widget called flutter_sliding_tutorial .Using this plugin we can easy to translate widget in any manner .Its will really helpful for you guys if you are planning to create some overview pages like showing in start page.This plugin is always free and opensource product .So you can add this to your introduction page .

Setup

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  flutter_sliding_tutorial: "^0.1.0"

In your library add the following import:

import 'package:flutter_sliding_tutorial/flutter_sliding_tutorial.dart';

Then the first thing you need is to create a PageView.

PageView(
      controller: _pageController,
      children: List<Widget>.generate(
        widget.pageCount,
        /// SlidingPage must be the parent for the SlidingContainer
        (index) => SlidingPage(
            page: index,
            notifier: widget.notifier,
            /// create UI as you need
            child: Stack(overflow: Overflow.visible, children: [
              /// wrap the desired widget in the SlidingContainer
              SlidingContainer(
                /// set your own widget
                child: Center(child: Text("Title: $index")), 
                /// set the necessary offset for the widget
                offset: 200,
              ),
              SlidingContainer(
                child: Container(
                    margin: EdgeInsets.only(top: 50),
                    child: Center(child: Text("Description: $index"))),
                offset: 350,
              )
            ])),
      ))

if you need an animated background color, you must wrap the PageView page and pass the PageController and the number of pages

AnimatedColorBackground(
        /// you can use your own color list
        colors: Colors.accents, 
        pageController: _pageController,
        pageCount: widget.pageCount,
        child: PageView(
            ///...
        ))

You can also add a SlidingIndicator so that the user understands which page is on.

SlidingIndicator(
              indicatorCount: pageCount,
              notifier: notifier,
              /// set your own widget
              activeIndicator: Container(
                color: Colors.green,
              ),
              /// set your own widget
              inActiveIndicator: Container(
                color: Colors.yellow,
              ),
              margin: 8,
              sizeIndicator: 20
)

Demo