Horizontal scrollbare Karten mit Snap-Effekt in flattern

Ich möchte eine Liste erstellen von Karten scrollen horizontal mit snap-fit-Effekt, wenn geklaut, entweder von Links oder rechts.

Jede Karte hat einige Abstand zwischen Ihnen und passen zu Bildschirm ähnlich dem unten Bild

Abgesehen davon, dass diese horizontal scrollbare Listen-Elemente sollten enthalten sein innerhalb einer vertikal scrollbaren Liste.

Ich Sie alle ich in der Lage bin, zu erreichen, ist nur die Anzeige einer Liste mit horizontalem Bildlauf Karten nach folgendem Beispiel flattern docs.

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

Mögliche Duplikate von Erstellung von Bild-Karussell in Geceleri
Link oben teilweise löst mein Problem wie ich es auch wollte, Sie in einer vertikal scrollbaren Liste. Jede Komponente im inneren vertikal scrollbare Liste wird eine Auswahl von Elementen, die horizontal Blättern.
Nichts hindert Sie daran, es zu tun mit dem vorherigen link
können Sie bitte ein einfaches Beispiel, ich weiß nicht, wie man es vertikal Scrollbar.
Sie machen es nicht vertikal Scrollbar. Wickeln Sie es in ein ListView statt

InformationsquelleAutor WitVault | 2018-07-31

Verwenden PageView und 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)),
        ),
      ),
    );
  }
}

die erste Seite hat einige Polsterung ..wie entfernen
die Seiten sind mittig in das widget. erhöhen Sie die viewportFraction auf 1,0, um die Seiten in voller Breite.
Ich will etwas erreichen, wie das ibb.co/GcPp3bd. viewportFraction 1.0, dass der volle Bildschirm
Hast du eine Möglichkeit finden, @RahulDevanavar ?
Keine Suche immer noch nach einer Lösung.
Ich habe versucht mit diesem code es sieht wie eine Horizontale Listenansicht, Wie wir hinzufügen ein zoom-Effekt auf die aktuelle Karte, wie gezeigt im Bild oben zu dieser Frage

InformationsquelleAutor boformer

2

dies ist eine alte Frage, und ich kam hierher auf der Suche nach etwas anderes ;-), aber was WitVault war lookig erfolgt einfach mit diesem Paket: https://pub.dev/packages/flutter_swiper

Die Umsetzung:

Legen Sie die Abhängigkeiten in pubsec.yaml:
```
dependencies:
   flutter_swiper: ^1.1.6
```
Importieren Sie Sie in die Seite, wo Sie es brauchen:
```
import 'package:flutter_swiper/flutter_swiper.dart';
```
In der layout -:
```
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,
)
```
- Anstatt das gif, es wäre besser, zeigen einige Beispiel-code, um zu zeigen, wie dieses Paket behebt das Problem
- Ich verstehe und kenne die Richtlinien, aber in diesem Fall dachte ich, es war ein wenig überflüssig, der link erklärt genau, wie, dieses Paket zu benutzen, und vielleicht die Implementierung kann sich ändern mit einer neuen version. Ich werde aktualisieren, meine Antwort auf den code, so wie ich das sehe, dass dies obligatorisch ist, danke!
InformationsquelleAutor Daniel

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.