how to make animation of pictures from right to left in flutter - flutter

Question

How to make this type of animation in a flutter?
I attached a YouTube video. I have made many animations but not any of them solve this issue which I'm facing now.
Please import this: awesome_slider: ^0.1.0
Here the code that I tried:
class Submits extends StatefulWidget {
Submits({Key key}) : super(key: key);
#override
_SubmitsState createState() => _SubmitsState();
}
class _SubmitsState extends State<Submits> {
int valuess = 0;
List itemWidget = [
AnimatedContainer(
transform:Matrix4.translationValues(0, 0, 0) ,
// Use the properties stored in the State class.
key: UniqueKey(),
child: Center(
child: Padding(
padding: const EdgeInsets.fromLTRB(10,240,0,0),
),
),
width: 400,
height: 300,
decoration: BoxDecoration(
gradient: LinearGradient(colors: [Colors.red,Colors.red]),
color: Colors.blue,
),
// Define how long the animation should take.
duration: Duration(seconds: 0),
// Provide an optional curve to make the animation feel smoother.
curve: Curves.elasticInOut,
),
AnimatedContainer(
transform:Matrix4.translationValues(10, 0, 0) ,
// Use the properties stored in the State class.
key: UniqueKey(),
child: Center(
child: Padding(
padding: const EdgeInsets.fromLTRB(10,240,0,0),
child: Text("To a very little extent"),
),
),
width: 400,
height: 300,
decoration: BoxDecoration(
gradient: LinearGradient(colors: [Colors.red,Colors.orange]),
image: DecorationImage(image: AssetImage("assets/images/Artboard 1.png")),
color: Colors.blue,),
// Define how long the animation should take.
duration: Duration(seconds: 0),
// Provide an optional curve to make the animation feel smoother.
curve: Curves.elasticInOut,
),
AnimatedContainer(
transform:Matrix4.translationValues(10, 0, 0) ,
// Use the properties stored in the State class.
key: UniqueKey(),
child: Center(
child: Padding(
padding: const EdgeInsets.fromLTRB(10,240,0,0),
child: Text("To a little extent"),
),
),
width: 400,
height: 300,
decoration: BoxDecoration(
gradient: LinearGradient(colors: [Colors.orange,Colors.yellow]),
image: DecorationImage(image: AssetImage("assets/images/Artboard 2.png")),
color: Colors.blue, ),
// Define how long the animation should take.
duration: Duration(seconds: 0),
// Provide an optional curve to make the animation feel smoother.
curve: Curves.elasticInOut,
),
AnimatedContainer(
transform:Matrix4.translationValues(0,0, 0) ,
// Use the properties stored in the State class.
key: UniqueKey(),
child: Center(
child: Padding(
padding: const EdgeInsets.fromLTRB(10,240,0,0),
child: Text("To some extent"),
),
),
width: 400,
height: 300,
decoration: BoxDecoration(
gradient: LinearGradient(colors: [Colors.orange,Colors.green]),
image: DecorationImage(image: AssetImage("assets/images/Artboard 3.png")),
color: Colors.blue,
),
// Define how long the animation should take.
duration: Duration(seconds: 0),
// Provide an optional curve to make the animation feel smoother.
curve: Curves.elasticInOut,
),
AnimatedContainer(
transform:Matrix4.translationValues(0,0, 0) ,
// Use the properties stored in the State class.
key: UniqueKey(),
child: Center(
child: Padding(
padding: const EdgeInsets.fromLTRB(10,240,0,0),
child: Text("To a great extent"),
),
),
width: 400,
height: 300,
decoration: BoxDecoration(
gradient: LinearGradient(colors: [Colors.yellow,Colors.green]),
image: DecorationImage(image: AssetImage("assets/images/Artboard 4.png")),
color: Colors.blue,
),
// Define how long the animation should take.
duration: Duration(seconds: 0),
// Provide an optional curve to make the animation feel smoother.
curve: Curves.elasticInOut,
),
AnimatedContainer(
// Use the properties stored in the State class.
key: UniqueKey(),
child: Center(
child: Padding(
padding: const EdgeInsets.fromLTRB(10,240,0,0),
child: Text("To a very great extent"),
),
),
width: 400,
height: 300,
decoration: BoxDecoration(
gradient: LinearGradient(colors: [Colors.green,Colors.green]),
image: DecorationImage(image: AssetImage("assets/images/Artboard 5.png")),
color: Colors.blue,
),
// Define how long the animation should take.
duration: Duration(seconds: 0),
// Provide an optional curve to make the animation feel smoother.
curve: Curves.elasticInOut,
),
];
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: Column(children: [
Container(
height:300,
width: 400,
child: AnimatedSwitcher(
switchInCurve: Curves.linear,
child: itemWidget[valuess],
duration: Duration(seconds: 1), ), ),
AwesomeSlide(
value: valuess.toDouble(),
min: 0,
max: 5,
thumbSize: 80.0,
inactiveLineColor: Colors.grey,
activeLineColor:Color(0xffe64a19),
child: Material(
type: MaterialType.card,
color: Colors.transparent,
child: Image.asset( "assets/images/SliderTop.png"),),
onChanged: (value) {
valuess = value.toInt();
setState(() {
}); },
),
], ),
),
),
);
}
}

Answer 1

This can be done by PageView, ListVeiw or Stack.
this is the full code:
Using PageView so it's also scrollable
class ViwerWidget extends HookWidget {
#override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
ValueNotifier<double> page = useValueNotifier(0.0);
final viewportFraction = 0.5;
final pageWidth = size.width * 0.5;
final pageController = usePageController(
viewportFraction: viewportFraction,
);
pageController.addListener(() {
page.value = pageController.page!;
});
final pages = [
Icon(
Icons.ac_unit,
size: 100,
),
Icon(
Icons.access_alarm_rounded,
size: 100,
),
Icon(
Icons.accessibility_new,
size: 100,
),
Icon(
Icons.account_box_rounded,
size: 100,
),
];
return Scaffold(
body: Column(
children: [
SizedBox(height: 100),
Container(
color: Colors.red,
width: pageWidth,
height: 300,
child: PageView.builder(
controller: pageController,
itemCount: pages.length,
pageSnapping: false,
itemBuilder: (context, index) => ValueListenableBuilder<double>(
valueListenable: page,
builder: (context, value, child) {
final scale = (value - index + 1).abs() * 2;
final opacity = (1 - ((value - index).abs())).clamp(0.0, 1.0);
return Opacity(
opacity: opacity,
child: Transform.scale(
scale: scale,
child: pages[index],
),
);
},
),
),
),
Spacer(),
ValueListenableBuilder<double>(
valueListenable: page,
builder: (context, value, child) => Slider(
value: value,
max: pages.length - 1,
min: 0.0,
onChanged: (value) {
page.value = value;
pageController.jumpTo(value * pageWidth * viewportFraction);
},
),
)
],
),
);
}
}
Of course you can play more with the values to achieve the desired result.