how to make animation of pictures from right to left in flutter
646
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.
Author by
benten
Updated on December 28, 2022Comments
-
benten over 1 year
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.0Here 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(() { }); }, ), ], ), ), ), ); } } -
benten about 3 yearsThank you so much, brother. You make it 100% well. this screen has two things. when I use slider .and the second thing when I used gesture detector on the picture same animation happen .. if you please help me
-
benten about 3 yearsor if I put this stack in TransformerPageView. can this animation work the same as when I used slider..??
-
benten about 3 yearsI just simply want. like if a person uses a slider .. and if it swipes on screen .. the same animation will be happen
-
benten about 3 yearsusePageController( viewportFraction: viewportFraction, ); its show an error ..I used hook library..but its not solve the issue on usePageController