flutter_custom_carousel_slider

KO | EN

gitlite — search

#javascript #python #typescript #golang #android #machine-learning #rust #macos #nodejs #awesome #kubernetes #vue #security #ios

flutter_custom_carousel_slider

(★ 41)

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

flutter_custom_carousel_slider Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[![Developer Challenge](https://img.shields.io/badge/developer-challenge-informational?logo=data:image/svg%2bxml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjQuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRTZFNkU2O30KPC9zdHlsZT4KPGc+Cgk8ZyBpZD0iTGF5ZXJfMl8xXyI+CgkJPGcgaWQ9IkxheWVyXzEtMl8yXyI+CgkJCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00LjIsOC40aDEuOWMwLjIsMCwwLjMsMC4xLDAuMywwLjNjMCwwLjEsMCwwLjItMC4xLDAuMmwtMi45LDIuOWMtMC4xLDAuMS0wLjEsMC4zLDAsMC41bDIuOSwyLjkKCQkJCWMwLjEsMC4xLDAuMSwwLjMsMCwwLjVjLTAuMSwwLjEtMC4xLDAuMS0wLjIsMC4xSDQuMmMtMC4xLDAtMC4zLTAuMS0wLjQtMC4ybC0zLjEtMy4xYy0wLjItMC4yLTAuMi0wLjYsMC0wLjhsMy4xLTMuMQoJCQkJQzQsOC40LDQuMSw4LjQsNC4yLDguNHoiLz4KCQkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTE5LjgsMTUuNmgtMS45Yy0wLjIsMC0wLjMtMC4xLTAuMy0wLjNjMC0wLjEsMC0wLjIsMC4xLTAuMmwyLjktMi45YzAuMS0wLjEsMC4xLTAuMywwLTAuNWwtMi45LTIuOQoJCQkJYy0wLjEtMC4xLTAuMS0wLjMsMC0wLjVjMC4xLTAuMSwwLjEtMC4xLDAuMi0wLjFoMS45YzAuMSwwLDAuMywwLjEsMC40LDAuMmwzLjEsMy4xYzAuMiwwLjIsMC4yLDAuNiwwLDAuOGwtMy4xLDMuMQoJCQkJQzIwLDE1LjYsMTkuOSwxNS42LDE5LjgsMTUuNnoiLz4KCQkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTkuOSwxNC45YzAtMC4xLTAuMS0wLjEtMC4xLTAuMWMwLDAsMCwwLTAuMSwwYy0xLDEuOC0yLjksMi44LTQuOSwyLjhINC4zYy0wLjIsMC0wLjMsMC4xLTAuMywwLjN2Mi4zCgkJCQljMCwwLjIsMC4xLDAuMywwLjMsMC4zaDAuNGMyLjUsMCw0LjktMS4xLDYuNS0yLjljMCwwLDAtMC4xLDAtMC4xQzEwLjYsMTYuOCwxMC4yLDE1LjksOS45LDE0Ljl6Ii8+CgkJCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik05LjksOWMwLjMtMSwwLjgtMS45LDEuNC0yLjdjMCwwLDAtMC4xLDAtMC4xYy0xLjYtMS45LTQtMi45LTYuNS0yLjlINC41QzQuMiwzLjIsNCwzLjUsNCwzLjhsMCwwdjIuMQoJCQkJYzAsMC4yLDAuMSwwLjMsMC4zLDAuM2wwLDBoMC40YzIsMCwzLjksMS4xLDQuOSwyLjhDOS43LDkuMSw5LjgsOS4xLDkuOSw5QzkuOCw5LjEsOS44LDkuMSw5LjksOXoiLz4KCQkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTE5LjMsNi4yaDAuM2MwLjIsMCwwLjMtMC4xLDAuMy0wLjNWMy44YzAtMC4zLTAuMi0wLjUtMC41LTAuNWgtMC4xYy00LjgsMC04LjgsMy45LTguOSw4LjcKCQkJCWMwLDQuOCwzLjksOC44LDguNyw4LjhjMCwwLDAsMCwwLjEsMGgwLjJjMC4zLDAsMC41LTAuMiwwLjUtMC41djB2LTIuMWMwLTAuMi0wLjEtMC4zLTAuMy0wLjNsMCwwaC0wLjRjLTMuMiwwLTUuOC0yLjYtNS44LTUuOAoJCQkJYzAsMCwwLTAuMSwwLTAuMUMxMy41LDguNywxNi4yLDYuMiwxOS4zLDYuMnoiLz4KCQk8L2c+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==)](https://pub.dev/packages?q=developerchallenge)

# flutter_custom_carousel_slider

> A carousel slider [Flutter](https://flutter.dev/) widget, supports custom decoration suitable for news and blog.

## Table of contents
  
- [Demo](#demo)
- [Supported Platforms](#supported-platforms)
- [Installation](#installation)
- [Using](#using)
- [CustomCarouselSlider](#customcarouselslider)
- [CarouselItem](#carouselitem)
- [License](#license)

## Demo

## Supported Platforms

* Flutter Android
* Flutter iOS
* Flutter web
* Flutter desktop

## Installation

```
dependencies:
  flutter_custom_carousel_slider: ^1.0.0
```

## Using
```dart
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<CarouselItem> | *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

flutter_custom_carousel_slider

flutter_custom_carousel_slider Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

flutter_custom_carousel_slider

flutter_custom_carousel_slider Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README