-
Notifications
You must be signed in to change notification settings - Fork 23
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.