flutter_custom_carousel_slider

一个轮播滑块Flutter组件,支持自定义装饰,适用于新闻和博客。

演示

支持的平台

  • Flutter Android
  • Flutter iOS
  • Flutter Web
  • Flutter 桌面

安装

dependencies:
  flutter_custom_carousel_slider: ^1.0.0

使用方法

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

名称 类型 默认值
items 列表 *必需
高度 双精度 200.0
subHeight 双精度 height*.4
width 双精度 200.0
showIndicator 布尔值
showSubBackground 布尔值
showText 布尔值
autoplay 布尔值
animationCurve Curve Curves.ease
animationDuration 持续时间 300毫秒
autoplayDuration 持续时间 3秒
indicatorShape 盒子形状 BoxShape.circle
dotSpacing 双精度 5.0
selectedDotColor 颜色 Colors.white
selectedDotHeight 双精度 8.0
selectedDotWidth 双精度 8.0
unselectedDotColor 颜色 Color(0XFFACAEBA)
unselectedDotHeight 双精度 6.0
unselectedDotWidth 双精度 6.0
boxPaddingHorizontal 双精度 10.0
boxPaddingVertical 双精度 2.0

CarouselItem

名称 类型
image NetworkImage
title 字符串
titleTextStyle TextStyle
leftSubtitle 字符串
leftSubtitleTextStyle TextStyle
rightSubtitle 字符串
rightSubtitleTextStyle TextStyle
onImageTap Function(int)
boxDecoration BoxDecoration

许可证

MIT 版权所有 (c) 2022,Emre Coşkunçay

GitHub

查看 Github