1. Carousel Slider

Carousel Slider

A Flutter carousel slider widget with various customization options.

Features

• Infinite scroll
• Custom child widgets
• Auto play
• Enlarge center page
• Customizable animations
• Carousel controller

Supported Platforms

• Android
• iOS
• Web
• Desktop

Installation

Add the dependency to your pubspec.yaml:

dependencies:
  carousel_slider: ^4.2.1

Usage

Basic Example

CarouselSlider(
  options: CarouselOptions(height: 400.0),
  items: [1, 2, 3, 4, 5].map((i) {
    return Builder(
      builder: (BuildContext context) {
        return Container(
          width: MediaQuery.of(context).size.width,
          margin: EdgeInsets.symmetric(horizontal: 5.0),
          decoration: BoxDecoration(color: Colors.amber),
          child: Text('text $i', style: TextStyle(fontSize: 16.0)),
        );
      },
    );
  }).toList(),
)

Custom Options

CarouselSlider(
  items: items,
  options: CarouselOptions(
    height: 400,
    aspectRatio: 16/9,
    viewportFraction: 0.8,
    initialPage: 0,
    enableInfiniteScroll: true,
    reverse: false,
    autoPlay: true,
    autoPlayInterval: Duration(seconds: 3),
    autoPlayAnimationDuration: Duration(milliseconds: 800),
    autoPlayCurve: Curves.fastOutSlowIn,
    enlargeCenterPage: true,
    enlargeFactor: 0.3,
    onPageChanged: callbackFunction,
    scrollDirection: Axis.horizontal,
  ),
)

mockup.for.video.mp4

1. Parallax Effect

Flutter Parallax Effect - Daily Quotes App

Introduction

This is a Flutter project that demonstrates the implementation of a parallax effect in a daily quotes app. The parallax effect is a popular design trend where background content moves at a slower rate than foreground content, creating an illusion of depth and immersion.

parallax.mockup.final.video.mp4