web-dev-qa-db-fra.com

Cartes à défilement horizontal avec effet d’accrochage flottant

Je veux créer une liste de cartes défilant horizontalement avec un accrochage ajusté à l’effet lorsqu’il est balayé de gauche à droite.

Chaque carte a un espacement entre elles et s'adapte à l'écran de la même manière que l'image ci-dessous

enter image description here

En dehors de cela, ces éléments de liste à défilement horizontal doivent être contenus dans une liste à défilement vertical.

Tout ce que je peux réaliser, c’est uniquement l’affichage d’une liste de cartes à défilement horizontal, à la suite de l’exemple suivant dans la documentation flottante.

class SnapCarousel extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'Horizontal List';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Container(
          margin: EdgeInsets.symmetric(vertical: 20.0),
          height: 200.0,
          child: ListView(
            scrollDirection: Axis.horizontal,
            children: <Widget>[
              Container(
                width: 160.0,
                color: Colors.red,
              ),
              Container(
                width: 160.0,
                color: Colors.blue,
              ),
              Container(
                width: 160.0,
                color: Colors.green,
              ),
              Container(
                width: 160.0,
                color: Colors.yellow,
              ),
              Container(
                width: 160.0,
                color: Colors.orange,
              ),
            ],
          ),
        ),
      ),
    );
  }
}
dartflutterflutter-layoutflutter-animationflutter-sliver
17
WitVault

Utilisez PageView et ListView:

import 'package:flutter/material.Dart';

main() => runApp(MaterialApp(home: MyHomePage()));

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Carousel in vertical scrollable'),
      ),
      body: ListView.builder(
        padding: EdgeInsets.symmetric(vertical: 16.0),
        itemBuilder: (BuildContext context, int index) {
          if(index % 2 == 0) {
            return _buildCarousel(context, index ~/ 2);
          }
          else {
            return Divider();
          }
        },
      ),
    );
  }

  Widget _buildCarousel(BuildContext context, int carouselIndex) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Text('Carousel $carouselIndex'),
        SizedBox(
          // you may want to use an aspect ratio here for tablet support
          height: 200.0,
          child: PageView.builder(
            // store this controller in a State to save the carousel scroll position
            controller: PageController(viewportFraction: 0.8),
            itemBuilder: (BuildContext context, int itemIndex) {
              return _buildCarouselItem(context, carouselIndex, itemIndex);
            },
          ),
        )
      ],
    );
  }

  Widget _buildCarouselItem(BuildContext context, int carouselIndex, int itemIndex) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 4.0),
      child: Container(
        decoration: BoxDecoration(
          color: Colors.grey,
          borderRadius: BorderRadius.all(Radius.circular(4.0)),
        ),
      ),
    );
  }
}
47
boformer

c'est une vieille question, et je suis arrivé ici à la recherche de quelque chose d'autre ;-), mais ce que WitVault ressemblait se fait facilement avec ce paquet: https://pub.dev/packages/flutter_swiper

Demo image

L'implémentation:

Mettez les dépendances dans pubsec.yaml:

dependencies:
   flutter_swiper: ^1.1.6

Importez-le dans la page où vous en avez besoin:

import 'package:flutter_swiper/flutter_swiper.Dart';

Dans la mise en page:

new Swiper(
  itemBuilder: (BuildContext context, int index) {
    return new Image.network(
      "http://via.placeholder.com/288x188",
      fit: BoxFit.fill,
    );
  },
  itemCount: 10,
  viewportFraction: 0.8,
  scale: 0.9,
)
1
Daniel