Horizontally scrollable cards with Snap effect in flutter

Use PageView and 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)),        ),      ),    );  }}

Screenshot:

If you don't want to use any 3rd party packages, you can simply try this:

class _HomePageState extends State<HomePage> {  int _index = 0;  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(),      body: Center(        child: SizedBox(          height: 200, // card height          child: PageView.builder(            itemCount: 10,            controller: PageController(viewportFraction: 0.7),            onPageChanged: (int index) => setState(() => _index = index),            itemBuilder: (_, i) {              return Transform.scale(                scale: i == _index ? 1 : 0.9,                child: Card(                  elevation: 6,                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),                  child: Center(                    child: Text(                      "Card ${i + 1}",                      style: TextStyle(fontSize: 32),                    ),                  ),                ),              );            },          ),        ),      ),    );  }}

this is an old question, and I arrived here looking for something else ;-), but what WitVault was lookig is done easy with this package: https://pub.dev/packages/flutter_swiper

The implementation:

Put the dependencies in pubsec.yaml:

dependencies:   flutter_swiper: ^1.1.6

Import it in the page where you need it:

import 'package:flutter_swiper/flutter_swiper.dart';

In the 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,)