Coverflow

A simple horizontal coverflow widget.

Preview

Screen Recording 2021-11-25 at 1 51 14 PM Screen Recording 2021-11-25 at 1 28 56 PM

Installation

Add coverflow: ^2.0.3 to your pubspec.yaml dependecies. And import it:

import 'package:coverflow/coverflow.dart';

How to use

Simply add a Coverflow widget with required params.

final List<String> titles = [
    "Title1",
    "Title2",
    "Title3",
    "Title4",
    "Title5",
    "Title6",
    "Title7",
    "Title8",
  ];

  final List<Widget> images = [
    Container(
      color: Colors.red,
    ),
    Container(
      color: Colors.yellow,
    ),
    Container(
      color: Colors.black,
    ),
    Container(
      color: Colors.cyan,
    ),
    Container(
      color: Colors.blue,
    ),
    Container(
      color: Colors.grey,
    ),
    Container(
      color: Colors.green,
    ),
    Container(
      color: Colors.amber,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          height: 200,
          child: CoverFlow(
            images: images,
            titles: titles,
            textStyle: TextStyle(color: Colors.red),
            displayOnlyCenterTitle: true,
            onCenterItemSelected: (index) {
              print('Selected Item\'s index: $index');
            },
            shadowOpacity: 0.3,
            shadowOffset: Offset(3, 8),
          ),
        ),
      ),
    );
  }

Params

CoverFlow(
    images: images,
    titles: titles,
    displayOnlyCenterTitle: true,
    textStyle: TextStyle(color: Colors.red),
    displayOnlyCenterTitle: true,
    onCenterItemSelected: (index) {
      print('Selected Item\'s index: $index');
    },
    shadowOpacity: 0.3,
    shadowOffset: Offset(3, 8),
)

Libraries

coverflow