Animación de efecto de desplazamiento Flutter Row
Mi proyecto actual tiene una fila desplazable que funciona bien, pero no puedo encontrar una manera de hacer algún tipo de desplazamiento estático, donde cuando se desplaza a un elemento, el elemento se centra automáticamente.
Esto es lo que tengo actualmente:
Cuando se desplazan las cartas, permanecen en la posición cuando finaliza el desplazamiento:
El efecto que quiero lograr es que la tarjeta se alinee en el centro al pasar a la siguiente tarjeta.
¿Hay algún widget que realmente funcione así?
Respuestas
Prueba esto,
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
final List<String> images = ["Me", "You", "Foo", "Baa"];
final PageController controller = PageController(viewportFraction:0.8);
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: PageView.builder(
controller: controller,
itemCount: images.length,
itemBuilder: (context,index){
return Container(
margin: EdgeInsets.all(16),
child: Center(child:Text(images[index])),
color: Colors.grey.shade200
);
}
),
),
);
}
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text('Hello, World!', style: Theme.of(context).textTheme.headline4);
}
}
La solución fue sencilla:
Padding(
padding: const EdgeInsets.symmetric(vertical: 80),
child: Container(
child: PageView(
controller: controller,
scrollDirection: Axis.horizontal,
pageSnapping: true,
physics: BouncingScrollPhysics(),
children: [CardMovie(), CardMovie(), CardMovie()],
),
),
)
usando el widget PageView y dando una parte superior de relleno porque la altura del widget era la pantalla completa.