Skip to content

Quick Start

NikitaAmelinCR edited this page Jan 10, 2022 · 8 revisions

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

dependencies:
  ...
  flutter_sliding_tutorial: "^1.1.3"

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

AnimatedBackgroundColor(
        pageController: _pageController,
        pageCount: widget.pageCount,
        /// you can use your own color list for page background
        colors: [
          Colors.red,
          Colors.yellow,
          Colors.blueAccent,
        ],
        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
)

You can see our example here.

Clone this wiki locally