Description:

snapclip pageview

snapclip_pageview #
Awesome PageView that provides flexible and customizable Widget for Flutter.
A pageview library for building foreground and background UI.
Clipping background for pageview.
Getting Started #
Very easily usable and customizable library.
Colors and curves can be customised.

How to use.
goto pubspec.yaml file add
snapclip_pageview : 0.0.1
copied to clipboard
import inside your project.
import 'package:snapclip_pageview/snapclip_pageview.dart';
copied to clipboard
Inside Scaffold Use the widget.
Scaffold(
backgroundColor: Colors.blue,
body: SnapClipPageView(
backgroundBuilder: buildBackground,
itemBuilder: buildChild,
length: movieList.length,
),
);
copied to clipboard
Item Builder is used for foreground.
PageViewItem(
key: Key(index.toString()),
child: Text(
movie.title,
style: Theme.of(context).textTheme.headline,
),
height: 405,
index: index,
);
copied to clipboard
Using Background Builder.
BackgroundWidget(
key: Key(index.toString()),
child: Image.network(movie.url, fit: BoxFit.fill),
index: index,
);
copied to clipboard
Full Example. #
class MoviePage extends StatefulWidget {
@override
_MoviePageState createState() => _MoviePageState();
}

class _MoviePageState extends State<MoviePage> {
var movieList = <Movie>[];

@override
void initState() {
movieList.addAll([
Movie(
"https://www.movieposters4u.com/images/b/BladeRunner2049Final.jpg",
"Blade Runner",
),
Movie(
"https://images-na.ssl-images-amazon.com/images/I/51%2Bzb74v-TL.jpg",
"Star Wars",
),
Movie(
"https://d13ezvd6yrslxm.cloudfront.net/wp/wp-content/images/EJWDEpFXsAMm9gJ.jpg",
"6 Underground",
),
]);
super.initState();
}

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
body: SnapClipPageView(
backgroundBuilder: buildBackground,
itemBuilder: buildChild,
length: movieList.length,
),
);
}

BackgroundWidget buildBackground(_, index) {
final movie = movieList[index];
return BackgroundWidget(
key: Key(index.toString()),
child: Image.network(movie.url, fit: BoxFit.fill),
index: index,
);
}

PageViewItem buildChild(_, int index) {
final movie = movieList[index];
return PageViewItem(
key: Key(index.toString()),
child: Column(
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(25),
child: Image.network(
movie.url,
),
),
SizedBox(
height: 15,
),
Text(
movie.title,
style: Theme.of(context).textTheme.headline,
)
],
),
height: 405,
index: index,
);
}
}
copied to clipboard

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter