Animação de efeito de rolagem Flutter Row

Question

Meu projeto atual tem uma linha rolável que funciona bem, mas não consigo encontrar uma maneira de fazer algum tipo de rolagem estática, onde quando você rola para um item, o item é centralizado automaticamente.

Isto é o que eu tenho atualmente:

Quando as cartas são roladas elas ficam na posição quando a rolagem termina:

O efeito que desejo obter é o cartão se alinhando no centro ao rolar para o próximo cartão.

Existe um widget que realmente funciona assim?

Answer 1

Tente isso,

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);
} 
}

Answer 2

A solução foi simples:

 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 o widget PageView e dando um padding top porque a altura do widget era a tela cheia.