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
