Mon projet actuel a une ligne défilante qui fonctionne bien, mais je ne trouve pas de moyen de faire une sorte de défilement statique, où lorsque vous faites défiler jusqu'à un élément, l'élément est centré automatiquement.

Voici ce que j'ai actuellement:

Flutter movie ui

Lorsque les cartes défilent, elles restent dans la position à la fin du défilement:

Flutter movie ui

L'effet que je veux accomplir est l'alignement de la carte au centre lors du défilement vers la carte suivante.

Flutter movie ui

Y a-t-il un widget qui fonctionne réellement comme ça?

-1
José Luna 26 août 2020 à 10:21

2 réponses

Meilleure réponse

La solution était simple:

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

En utilisant le widget PageView et en donnant un haut de remplissage car la hauteur du widget était le plein écran.

enter image description here

1
José Luna 26 août 2020 à 08:06

Essaye ça,

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

Here is the output of this code

1
meditat 26 août 2020 à 07:44