Flutter: Slider Gallery with overflow container - flutter

Question

I've stuck with one problem.
I'm a novice with a flutter trying to figure out how to do a simple swipe-left/swipe-right gallery.
I'm looking for a widget that supports gestures and some kind of overflow.
So I want a container with a fixed(width/height which I can define) and everything outside of this container should be hidden and when user swipes inner content it should show the next slide. Can you please point me out what is the best way to implement this with a Flutter and what is the best kind of containers fit these goals. Thanks
UPD 1:
It shouldn't be a whole screen, but a specific container.

Answer 1

You just need to use the PageView widget for the viewpager functionality , you can use it horizontal or vertical as your requirement,As you want horizontal PageView so i have used the scrollDirection: Axis.horizontal for it. I have created the demo of it, please check it once
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
class HomeScreen extends StatefulWidget {
#override
State<StatefulWidget> createState() {
// TODO: implement createState
return _HomeScreen();
}
}
class _HomeScreen extends State<HomeScreen> {
static final GlobalKey<ScaffoldState> _scaffoldKey =
GlobalKey<ScaffoldState>();
///Page Controller for the PageView
final controller = PageController(
initialPage: 0,
);
#override
Widget build(BuildContext context) {
Size _screenSize = MediaQuery.of(context).size;
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
centerTitle: true,
title: Text(
'Horizontal Viewpager',
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,),
),
),
///A Page View with 3 children
body: PageView(
controller: controller,
scrollDirection: Axis.horizontal,
physics: BouncingScrollPhysics(),
pageSnapping: true,
children: <Widget>[
Container(
color: Colors.white,
child: Card(
color: Colors.lightBlue,
elevation: 4,
margin: EdgeInsets.all(24),
child: Center(
child: Text(
"Card 1",
style: TextStyle(
color: Colors.white,
fontSize: 24),
),
),
),
),
Container(
color: Colors.white,
child: Card(
color: Colors.purpleAccent,
elevation: 4,
margin: EdgeInsets.all(24),
child: Center(
child: Text(
"Card 2",
style: TextStyle(
color: Colors.white,
fontSize: 24),
),
),
),
),
Container(
color: Colors.white,
child: Card(
color: Colors.pink,
elevation: 4,
margin: EdgeInsets.all(24),
child: Center(
child: Text(
"Card 3",
style: TextStyle(
color: Colors.white,
fontSize: 24),
),
),
),
),
],
),
);
}
}
And output of above program as follow
You can check my another example where i have created the swipable with fixed height Click here
I am posting another example, as you need the indicator at the both side of the PagewView for it , you need to use the Row with Expaned as follow
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
class HomeScreen extends StatefulWidget {
#override
State<StatefulWidget> createState() {
// TODO: implement createState
return _HomeScreen();
}
}
class _HomeScreen extends State<HomeScreen> {
static final GlobalKey<ScaffoldState> _scaffoldKey =
GlobalKey<ScaffoldState>();
var selectedPage = 0;
PageController _controller = PageController(initialPage: 0, keepPage: true);
#override
Widget build(BuildContext context) {
Size _screenSize = MediaQuery
.of(context)
.size;
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
centerTitle: true,
title: Text(
'Horizontal Viewpager',
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,),
),
),
///A Page View with 3 children
body: Container(
child:Container(
height: MediaQuery.of(context).size.height*0.4,
child: Row(
children: <Widget>[
Expanded(
flex: 1,
child:
IconButton(
icon: Icon(Icons.arrow_back),
highlightColor: Colors.pink,
onPressed: () {
setState(() {
if (selectedPage > 0) {
selectedPage = selectedPage - 1;
_controller.jumpToPage(selectedPage);
print("VALUES==>>>>> $selectedPage");
}
});
},
),
), Expanded(
flex: 8,
child: PageView(
controller: _controller,
scrollDirection: Axis.horizontal,
physics: BouncingScrollPhysics(),
onPageChanged: (index)
{
selectedPage= index;
},
pageSnapping: true,
children: <Widget>[
Container(
color: Colors.white,
child: Card(
color: Colors.lightBlue,
elevation: 4,
margin: EdgeInsets.all(24),
child: Center(
child: Text(
"Card 1",
style: TextStyle(
color: Colors.white,
fontSize: 24),
),
),
),
),
Container(
color: Colors.white,
child: Card(
color: Colors.purpleAccent,
elevation: 4,
margin: EdgeInsets.all(24),
child: Center(
child: Text(
"Card 2",
style: TextStyle(
color: Colors.white,
fontSize: 24),
),
),
),
),
Container(
color: Colors.white,
child: Card(
color: Colors.pink,
elevation: 4,
margin: EdgeInsets.all(24),
child: Center(
child: Text(
"Card 3",
style: TextStyle(
color: Colors.white,
fontSize: 24),
),
),
),
),
],
),
),
Expanded(
flex: 1,
child:
IconButton(
icon: Icon(Icons.arrow_forward),
highlightColor: Colors.pink,
onPressed: () {
if (selectedPage <3) {
selectedPage = selectedPage + 1;
_controller.jumpToPage(selectedPage);
print("VALUES==>> $selectedPage");
}
},
),
)
],
),
)
,
)
,
);
}
}
Please check the below output of it

Answer 2

You can use carousel_slider 2.1.0 package.
It also has many customisation options.
https://pub.dev/packages/carousel_slider