Flatter Row Scroll Effekt Animation

Question

Mein aktuelles Projekt hat eine scrollbare Zeile, die gut funktioniert, aber ich kann keine Möglichkeit finden, eine Art statischen Bildlauf durchzuführen. Wenn Sie zu einem Element scrollen, wird das Element automatisch zentriert.

Folgendes habe ich derzeit:

Wenn die Karten gescrollt werden, bleiben sie in der Position, wenn der Bildlauf beendet ist:

Der Effekt, den ich erzielen möchte, ist, dass sich die Karte beim Scrollen zur nächsten Karte in der Mitte ausrichtet.

Gibt es ein Widget, das tatsächlich so funktioniert?

Answer 1

Versuche dies,

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

Die Lösung war einfach:

 Padding(
      padding: const EdgeInsets.symmetric(vertical: 80),
      child: Container(
        child: PageView(
          controller: controller,
          scrollDirection: Axis.horizontal,
          pageSnapping: true,
          physics: BouncingScrollPhysics(),
          children: [CardMovie(), CardMovie(), CardMovie()],
        ),
      ),
    )

Verwenden des PageView-Widgets und Angeben eines Auffülloberteils, da die Höhe des Widgets der Vollbildmodus war.