customizable_cards_slider 1.0.2

A Customizable cards slider widget

Customizable Slider

A Customizable gallery slider widget. Complete with background color transitions and customizable buttons with customizable animations.

Getting Started

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
customizable_cards_slider: ^1.0.0

Import it:

import 'package:customizable_cards_slider/customizable_cards_slider.dart';

Usage Examples

Basic slider

The pages parameter takes a a list of widgets to display as pages. For this example we will use a basic text widget:

CustomizableSlider(
	pages: const [Text("Page 0"), Text("Page 1"), Text("Page 2"), Text("Page 3"), Text("Page 4")],
)

The slider will resize to fill the parent widget and center the page widget. The default background is transparent.

Backgrounds

For smooth background color transitions you can provide the backgroundColors parameter with a list of Color. The length of pages should match the length of backgroundColors

CustomizableSlider(
	pages: const [Text("Page 0"), Text("Page 1"), Text("Page 2"), Text("Page 3"), Text("Page 4")],
	backgroundColors: [
		Colors.green,
		Colors.cyan,
		Colors.brown,
		Colors.yellow,
		Colors.red,
	];
)

Custom button animations

You can provide the widget with the buttonBuilder function. This is a powerful way to customize the slider's buttons.
This function should return a widget and gets called during animation. It exposes some of the slider's state parameters for you to use.

anim - A double ranging from 0 to 1. This value is 1 when the current page displayed is the same as the index of the button. This value changes even when the page is just passing through during a transition so it can be used to create nice wavey animations.

backgroundColors - The background colors as defined in the widget. If no background colors are provided, backgroundColors will have a list of transparent colors.

index - The index of the current button.

currPage - Currently displayed page.

Examples

In this example we use the anim parameter to animate the size and color of the button. We are also using the backgroundColors parameter to color the button.

CustomizableSlider(
	pages: const [Text("Page 0"), Text("Page 1"), Text("Page 2"), Text("Page 3"), Text("Page 4")],
	backgroundColors: const [
		Colors.green,
		Colors.cyan,
		Colors.brown,
		Colors.yellow,
		Colors.red,
	],
	buttonBuilder: (anim, backgroundColors, index, currPage) {
		return  Container(
			width: 80,
			height: 80,
			color: Colors.transparent,
			child: Center(
			child: Container(
				width: 25 + 20 * anim,
				height: 25 + 20 * anim,
				decoration: BoxDecoration(
					shape: BoxShape.circle,
					color: Color.lerp(backgroundColors[index], 	Colors.white, anim),
					border: Border.all(color: const  Color.fromARGB(186, 255, 255, 255), width: 3),
					),
				),
			),
		);
	},
)

Result:

Let's say we don't want the size animation to pass through all the buttons, we can use index and currPage to achieve desired results:

buttonBuilder: (anim, backgroundColors, index, currPage) {
	return  Container(
		width: 80,
		height: 80,
		color: Colors.transparent,
		child: Center(
			child: Container(
				width: 25 + (currPage == index ? 20 * anim : 0),
				height: 25 + (currPage == index ? 20 * anim : 0),
				decoration: BoxDecoration(
					shape: BoxShape.circle,
					color: Color.lerp(backgroundColors[index], Colors.white, anim),
					border: Border.all(color: const  Color.fromARGB(186, 255, 255, 255), width: 3),
				),
			),
		),
	);
}

Result:

In this example we disabled the size animation for buttons where index is not equal to currPage. The color transition remains the same and the animation "passes through" all the buttons.

More examples

In this example we use anim with a transform widget to rotate the button. Notice we also give each button a bottom margin of 140 to place the buttons on top of the page.

CustomizableSlider(
	backgroundColors: [
		Colors.yellow.shade900,
		Colors.yellow.shade800,
		Colors.yellow.shade700,
		Colors.yellow.shade600,
		Colors.yellow.shade500
	],
	pages: const [Text("Page 0"), Text("Page 1"), Text("Page 2"),Text("Page 3"), Text("Page 4")],
	buttonBuilder: (anim, backgroundColors, index, currPage) => 		
		Container(
			width: 50,
			height: 50,
			color: Colors.transparent, //to register clicks around the button
			margin: const  EdgeInsets.fromLTRB(0, 0, 0, 140),
			child: Center(
				child: Transform.rotate(
					origin: const  Offset(0, -10),
					angle: anim * pi / 4 - 2,
					child: Container(
						width: 10,
						height: 30,
						decoration: BoxDecoration(
							color: Colors.black87, 
							borderRadius: BorderRadius.circular(10)
						),
					),
				),
			),
		),
)

Using the buttonBuilder you can get quite creative, here's another examples:

SizedBox(
	height: 400,
	width: 600,
	child: CustomizableSlider(
	backgroundColors: const [
		Color.fromARGB(255, 45, 45, 45),
		Color.fromARGB(255, 74, 74, 74),
		Color.fromARGB(255, 84, 84, 84),
		Color.fromARGB(255, 123, 123, 123),
	],
	pages: const [
		Icon(
			Icons.casino_rounded,
			color: Colors.white,
			size: 112,
		),
		Icon(
			Icons.yard_rounded,
			color: Colors.white,
			size: 112,
		),
		Icon(
			Icons.wine_bar,
			color: Colors.white,
			size: 112,
		),
		Icon(
			Icons.whatshot_rounded,
			color: Colors.white,
			size: 112,
		),
	],
	buttonBuilder: (anim, backgroundColors, index, currPage) {
		late  Color  btnColor;

		switch (index) {
			case  0:
			btnColor = Color.fromARGB(255, 255, 35, 138);
			break;
			
			case  1:
			btnColor = Color.fromARGB(255, 105, 218, 255);
			break;
			
			case  2:
			btnColor = Color.fromARGB(255, 86, 255, 125);
			break;
		
			case  3:
			btnColor = Color.fromARGB(255, 244, 255, 86);
			break;
		}

		return  Container(
			width: 80,
			height: 80,
			color: Colors.transparent, //to register clicks around the button
			child: Center(
				child: Container(
					width: 12,
					height: 12 + anim * 24,
					transformAlignment: Alignment.center,
					decoration: BoxDecoration(
						color: Color.lerp(Color.fromARGB(199, 0, 0, 0), btnColor, anim),
						borderRadius: BorderRadius.circular(12),
						boxShadow: [
							BoxShadow(
								color: btnColor.withAlpha((anim * 150).toInt()),
								blurRadius: 10,
								spreadRadius: anim * 5,
								),
							],
						),
					),
				),
			);
		},
	),
),

Result: