Flutter custom carousel slider - A carousel slider widget,support custom decoration suitable for news and blog

Overview

flutter_custom_carousel_slider

A carousel slider Flutter widget, supports custom decoration suitable for news and blog.

Table of contents

Demo

Supported Platforms

  • Flutter Android
  • Flutter iOS
  • Flutter web
  • Flutter desktop

Installation

dependencies:
  flutter_custom_carousel_slider: ^1.0.0

Using

import 'package:flutter/material.dart';
import 'package:flutter_custom_carousel_slider/flutter_custom_carousel_slider.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Custom Carousel Slider Demo'),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<CarouselItem> itemList = [
    CarouselItem(
      image: const NetworkImage(
        'https://miro.medium.com/max/1400/1*RpaR1pTpRa0PUdNdfv4njA.png',
      ),
      boxDecoration: BoxDecoration(
        gradient: LinearGradient(
          begin: FractionalOffset.bottomCenter,
          end: FractionalOffset.topCenter,
          colors: [
            Colors.blueAccent.withOpacity(1),
            Colors.black.withOpacity(.3),
          ],
          stops: const [0.0, 1.0],
        ),
      ),
      title:
          'Push your creativity to its limits by reimagining this classic puzzle!',
      titleTextStyle: const TextStyle(
        fontSize: 12,
        color: Colors.white,
      ),
      leftSubtitle: '\$51,046 in prizes',
      rightSubtitle: '4882 participants',
      rightSubtitleTextStyle: const TextStyle(
        fontSize: 12,
        color: Colors.black,
      ),
      onImageTap: (i) {},
    ),
    CarouselItem(
      image: const NetworkImage(
        'https://pbs.twimg.com/profile_banners/1444928438331224069/1633448972/600x200',
      ),
      title: '@coskuncay published flutter_custom_carousel_slider!',
      titleTextStyle: const TextStyle(
        fontSize: 12,
        color: Colors.white,
      ),
      leftSubtitle: '11 Feb 2022',
      rightSubtitle: 'v1.0.0',
      onImageTap: (i) {},
    ),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Center(
          child: Column(
            children: [
              const SizedBox(height: 20),
              Column(
                children: [
                  const Text('Custom BoxDecoration and Autoplay'),
                  CustomCarouselSlider(
                    items: itemList,
                    height: 150,
                    subHeight: 50,
                    width: MediaQuery.of(context).size.width * .9,
                    autoplay: true,
                  ),
                ],
              ),
              const SizedBox(height: 20),
              Column(
                children: [
                  const Text('Show Only Customize Indicators'),
                  CustomCarouselSlider(
                    items: itemList,
                    height: 150,
                    subHeight: 50,
                    width: MediaQuery.of(context).size.width * .9,
                    autoplay: false,
                    showText: false,
                    showSubBackground: false,
                    indicatorShape: BoxShape.rectangle,
                    selectedDotColor: Colors.red,
                    unselectedDotColor: Colors.white,
                  ),
                ],
              ),
              const SizedBox(height: 20),
              Column(
                children: [
                  const Text('Show only images and Autoplay'),
                  CustomCarouselSlider(
                    items: itemList,
                    height: 150,
                    subHeight: 50,
                    width: MediaQuery.of(context).size.width * .9,
                    autoplay: true,
                    showSubBackground: false,
                    showIndicator: false,
                    showText: false,
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

CustomCarouselSlider

Name Type Default
items List *required
height double 200.0
subHeight double height*.4
width double 200.0
showIndicator bool true
showSubBackground bool true
showText bool true
autoplay bool true
animationCurve Curve Curves.ease
animationDuration Duration 300ms
autoplayDuration Duration 3s
indicatorShape BoxShape BoxShape.circle
dotSpacing double 5.0
selectedDotColor Color Colors.white
selectedDotHeight double 8.0
selectedDotWidth double 8.0
unselectedDotColor Color Color(0XFFACAEBA)
unselectedDotHeight double 6.0
unselectedDotWidth double 6.0
boxPaddingHorizontal double 10.0
boxPaddingVertical double 2.0

CarouselItem

Name Type
image NetworkImage
title String
titleTextStyle TextStyle
leftSubtitle String
leftSubtitleTextStyle TextStyle
rightSubtitle String
rightSubtitleTextStyle TextStyle
onImageTap Function(int)
boxDecoration BoxDecoration

License

MIT Copyright (c) 2022, Emre Coşkunçay

You might also like...

Wall-street-news - News App work with HttpClient in Flutter

Wall-street-news - News App work with HttpClient in Flutter

Flutter News App Demo This project is to showcase how to work with HttpClient in

Oct 16, 2022

Google-news-app-redesign - Redesigned the ui of google news app with flutter

Google-news-app-redesign - Redesigned the ui of google news app with flutter

News app like Google news! ScreenShots If you face any problem with this project

Jun 23, 2022

News App using News Api.

newsapp A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

Jan 6, 2022

Responsive Blog Theme using Flutter | Web, macOS, Android, iOS

 Responsive Blog Theme using Flutter | Web, macOS, Android, iOS

Responsive Blog Theme using Flutter | Web, macOS, Android, iOS Watch it on YouTube Packages we are using: flutter_svg: link get: link Flutter recently

Dec 9, 2022

Responsive Blog Theme using Flutter

Responsive Blog Theme using Flutter

Responsive Blog Theme using Flutter | Web, macOS, Android, iOS Watch it on YouTube Packages we are using: flutter_svg: link get: link Flutter recently

Dec 25, 2022

NextPhoto - A Flutter Instagram look-alike photo blog application

NextPhoto - A Flutter Instagram look-alike photo blog application

A Flutter Instagram look-alike photo blog application. Uses jsonplaceholder for mock data. Please refer to coding task for info about desired features.

Aug 22, 2022

Flutter Blog App with NodeJS Express MongoDB

 Flutter Blog App with NodeJS Express MongoDB

Flutter Blog App with NodeJS Express MongoDB This app is developed to learn creating RestAPI and implementing in Flutter App. That's why the UI of thi

Oct 18, 2022

A Very Good Blog App using Flutter, flutter_bloc, django rest framework for backend✨

A Very Good Blog App using Flutter, flutter_bloc, django rest framework for backend✨

Very Good Blog App - Blog sharing Features Login, register, manage personal information. Compose, edit, post blog to share with everyone. Like, save b

Nov 27, 2022
Owner
Emre
VueJS Developer | Flutter Lover
Emre
A customizable carousel slider widget in Flutter which supports inifinte scrolling, auto scrolling, custom child widget, custom animations and built-in indicators.

flutter_carousel_widget A customizable carousel slider widget in Flutter. Features Infinite Scroll Custom Child Widget Auto Play Horizontal and Vertic

NIKHIL RAJPUT 7 Nov 26, 2022
A customizable carousel slider for Flutter. Supports infinite sliding, custom indicators, and custom animations with many pre-built indicators and animations.

Flutter Carousel Slider A customizable carousel slider for flutter Screenshots Installing dependencies: flutter_carousel_slider: ^1.0.8 Demo Demo a

Udara Wanasinghe 23 Nov 6, 2022
News App developed with Flutter featuring beautiful UI, category-based news, story for faster news reading, inbuilt article viewer, share feature, and more.

Ariel News App developed with Flutter featuring beautiful UI, category-based news, story for faster news reading, inbuilt article viewer, share featur

Hash Studios 30 Nov 9, 2022
With TOT you can find a teacher that is suitable for your needs with less effort, less time, and less money.

TOT App In TOT we are here to help you find a teacher at any aspect of science you want from kindergarten to secondary schools. Instead of searching m

Ahmed Hussein 2 Sep 29, 2022
Flutter pos - A mobile POS written in Flutter, suitable for small cafe/restaurant, fully offline

Simple-POS A mobile POS written in Flutter, suitable for small cafe/restaurant,

Muhammed Basil E 7 Nov 2, 2022
A radio component suitable for almost any radio scenario.

fradio A radio component suitable for almost any radio scenario. Supports excellent interactive special effects, as well as a simple multi-interactive

Fliggy Mobile 75 Nov 26, 2022
Zone is yet another Hacker News client, built with Flutter, Slidy, and Hacker News API.

Zone for Hacker News Zone is yet another Hacker News client, built with Flutter, Slidy, and Hacker News API. Setup Clone this repo to your machine Req

null 11 Feb 27, 2022
News-Flutter - News Api with flutter

News App This app use News Api. If you want to run this code, please use your ow

Brandon Rojas 2 Apr 29, 2022
Readky is a Free Flutter News App Starter Template that can help you develop a News application much faster.

Readky. Introduction Readky is a Free Flutter News App Starter Template that can help you develop a News application much faster. You just need to add

Muhammad Rezky Sulihin 54 Nov 26, 2022
News Reader App to fetch Articles from different news channels using Flutter.

News Reader This app is made using the Flutter framework. Its an mobile app to browse the News from different channels. This app uses an API provided

Sahil Kumar 84 Apr 13, 2022