初学Flutter:swiper实现

这篇具有很好参考价值的文章主要介绍了初学Flutter:swiper实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果展示:

flutter swiper

1、安装 card_swiper 

flutter card_swiper,flutter,flutter

2、引入card_swiper

import 'package:card_swiper/card_swiper.dart';

3、使用

这里我主要是对官网例子进行实践,主要是5种常用的swiper

1、普遍的swiper

//custom swiper
class CustomSwiper extends StatefulWidget {
  const CustomSwiper({super.key, required this.banner});
  final List banner;

  @override
  _CustomSwiperState createState() => _CustomSwiperState();
}

class _CustomSwiperState extends State<CustomSwiper> {
  @override
  Widget build(BuildContext context) {
    return Swiper(
      itemBuilder: (BuildContext context, int index) {
        return Image.network(
          widget.banner[index]['banner_url'],
          fit: BoxFit.fill,
        );
      },
      onTap: (index) {
        print(index);
      },
      itemCount: widget.banner.length,
      // autoplay: true,
      pagination: const SwiperPagination(
          builder: DotSwiperPaginationBuilder(
              color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),
      control: SwiperControl(),
    );
  }
}

2、layouts swiper

//layouts swiper
class MyLayoutSwiper extends StatefulWidget {
  const MyLayoutSwiper({super.key, required this.banner});
  final List banner;

  @override
  _MyLayoutSwiperState createState() => _MyLayoutSwiperState();
}

class _MyLayoutSwiperState extends State<MyLayoutSwiper> {
  @override
  Widget build(BuildContext context) {
    return Swiper(
      itemBuilder: (BuildContext context, int index) {
        return Image.network(
          widget.banner[index]['banner_url'],
          fit: BoxFit.fill,
        );
      },
      onTap: (index) {
        print(index);
      },
      itemCount: widget.banner.length,
      // autoplay: true,
      pagination: const SwiperPagination(
          builder: DotSwiperPaginationBuilder(
              color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),
      viewportFraction: 0.8,
      scale: 0.9,
    );
  }
}

3、STACK Layout swiper

// STACK Layout swiper
class StackLayoutSwiper extends StatefulWidget {
  const StackLayoutSwiper({super.key, required this.banner});
  final List banner;

  @override
  _StackLayoutSwiperState createState() => _StackLayoutSwiperState();
}

class _StackLayoutSwiperState extends State<StackLayoutSwiper> {
  @override
  Widget build(BuildContext context) {
    return Swiper(
      itemBuilder: (BuildContext context, int index) {
        return Image.network(
          widget.banner[index]['banner_url'],
          fit: BoxFit.fill,
        );
      },
      onTap: (index) {
        print(index);
      },
      itemCount: widget.banner.length,
      // autoplay: true,
      pagination: const SwiperPagination(
          builder: DotSwiperPaginationBuilder(
              color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),
      viewportFraction: 0.8,
      scale: 0.9,
      itemWidth: 300.0,
      layout: SwiperLayout.STACK,
    );
  }
}

4、TINDER Layout Swiper

// TINDER Layout Swiper
class TinderLayoutSwiper extends StatefulWidget {
  const TinderLayoutSwiper({super.key, required this.banner});
  final List banner;

  @override
  _TinderLayoutSwiperState createState() => _TinderLayoutSwiperState();
}

class _TinderLayoutSwiperState extends State<TinderLayoutSwiper> {
  @override
  Widget build(BuildContext context) {
    return Swiper(
      itemBuilder: (BuildContext context, int index) {
        return Image.network(
          widget.banner[index]['banner_url'],
          fit: BoxFit.fill,
        );
      },
      onTap: (index) {
        print(index);
      },
      itemCount: widget.banner.length,
      // autoplay: true,
      pagination: const SwiperPagination(
          builder: DotSwiperPaginationBuilder(
              color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),
      viewportFraction: 0.8,
      scale: 0.9,
      itemWidth: 300.0,
      itemHeight: 400.0,
      layout: SwiperLayout.TINDER,
    );
  }
}

5、CUSTOM LAYOUT Swiper

// TINDER Layout Swiper
class TinderLayoutSwiper extends StatefulWidget {
  const TinderLayoutSwiper({super.key, required this.banner});
  final List banner;

  @override
  _TinderLayoutSwiperState createState() => _TinderLayoutSwiperState();
}

class _TinderLayoutSwiperState extends State<TinderLayoutSwiper> {
  @override
  Widget build(BuildContext context) {
    return Swiper(
      itemBuilder: (BuildContext context, int index) {
        return Image.network(
          widget.banner[index]['banner_url'],
          fit: BoxFit.fill,
        );
      },
      onTap: (index) {
        print(index);
      },
      itemCount: widget.banner.length,
      // autoplay: true,
      pagination: const SwiperPagination(
          builder: DotSwiperPaginationBuilder(
              color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),
      viewportFraction: 0.8,
      scale: 0.9,
      itemWidth: 300.0,
      itemHeight: 400.0,
      layout: SwiperLayout.TINDER,
    );
  }
}


// CUSTOM LAYOUT Swiper
class CustomLayoutSwiper extends StatefulWidget {
  const CustomLayoutSwiper({super.key, required this.banner});
  final List banner;

  @override
  _CustomLayoutSwiperState createState()=>_CustomLayoutSwiperState();

}
class _CustomLayoutSwiperState extends State<CustomLayoutSwiper>{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Swiper(
      itemBuilder: (BuildContext context, int index) {
        return Image.network(
          widget.banner[index]['banner_url'],
          fit: BoxFit.fill,
        );
      },
      onTap: (index) {
        print(index);
      },
      itemCount: widget.banner.length,
      // autoplay: true,
      pagination: const SwiperPagination(
          builder: DotSwiperPaginationBuilder(
              color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),
      viewportFraction: 0.8,
      scale: 0.9,
      itemWidth: 300.0,
      itemHeight: 400.0,
      layout: SwiperLayout.CUSTOM,
       customLayoutOption: CustomLayoutOption(
    startIndex: -1,
    stateCount: 3
  )..addRotate([
    -45.0/180,
    0.0,
    45.0/180
  ])..addTranslate([
    Offset(-370.0, -40.0),
    Offset(0.0, 0.0),
    Offset(370.0, -40.0)
  ]),
    );
  }
  
}

main.dart全部代码文章来源地址https://www.toymoban.com/news/detail-829147.html

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(
            colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple)),
        home: const Home());
  }
}

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  List banner = [
    {
      "banner_url":
          "https://ts1.cn.mm.bing.net/th/id/R-C.8e091d0e6a2b9bcb27738cd96e22f699?rik=M4LFAVmmb38W6A&riu=http%3a%2f%2fi3.img.969g.com%2fdown%2fimgx2013%2f01%2f21%2f206_170432_901de.jpg&ehk=564uTBfxvugUBybGO2%2bTpMUNgJEa6rUfSrc1sonLso8%3d&risl=&pid=ImgRaw&r=0"
    },
    {
      "banner_url":
          "https://ts1.cn.mm.bing.net/th/id/R-C.abd4829c9387ec1bfd1a276a5c1da122?rik=dl55Voqxy4wINQ&riu=http%3a%2f%2fi1.073img.com%2f140306%2f4343693_144142_1.jpg&ehk=qvhMjT0iGQT5DhH8MTkAzJqUpjHJRScTQTT5hj%2forLM%3d&risl=&pid=ImgRaw&r=0"
    },
    {
      "banner_url":
          "https://ts1.cn.mm.bing.net/th/id/R-C.ddfbf9ed55354323035f947515fe0233?rik=0KFdFk3RHUzBdg&riu=http%3a%2f%2fi1.img.969g.com%2fdown%2fimgx2013%2f01%2f05%2f206_164916_4fab0.jpg&ehk=Vqb%2f5c3%2fW5n39t7bAae6YpUlfG4ibEbf9lpETY5Xz4c%3d&risl=&pid=ImgRaw&r=0"
    }
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text('flutter轮播图学习'), centerTitle: true),
        // body: Container(child: Text('pp')),
        body: SingleChildScrollView(
          child: Column(children: [
            const Text('Custom swiper',
                style: TextStyle(fontSize: 26, fontWeight: FontWeight.bold)),
            SizedBox(
                height: 200,
                child: CustomSwiper(
                  banner: banner,
                )),
            const Text('Build in layouts ',
                style: TextStyle(fontSize: 26, fontWeight: FontWeight.bold)),
            SizedBox(
                height: 200,
                child: MyLayoutSwiper(
                  banner: banner,
                )),
            const Text('Build in STACK layouts ',
                style: TextStyle(fontSize: 26, fontWeight: FontWeight.bold)),
            SizedBox(
                height: 200,
                child: StackLayoutSwiper(
                  banner: banner,
                )),
            const Text('Build in  TINDER layouts ',
                style: TextStyle(fontSize: 26, fontWeight: FontWeight.bold)),
            SizedBox(
                height: 200,
                child: TinderLayoutSwiper(
                  banner: banner,
                )),

                const Text('Build in  CUSTOM layouts ',
                style: TextStyle(fontSize: 26, fontWeight: FontWeight.bold)),
            SizedBox(
                height: 200,
                child: CustomLayoutSwiper(
                  banner: banner,
                )),
          ]),
        ));
  }
}

//custom swiper
class CustomSwiper extends StatefulWidget {
  const CustomSwiper({super.key, required this.banner});
  final List banner;

  @override
  _CustomSwiperState createState() => _CustomSwiperState();
}

class _CustomSwiperState extends State<CustomSwiper> {
  @override
  Widget build(BuildContext context) {
    return Swiper(
      itemBuilder: (BuildContext context, int index) {
        return Image.network(
          widget.banner[index]['banner_url'],
          fit: BoxFit.fill,
        );
      },
      onTap: (index) {
        print(index);
      },
      itemCount: widget.banner.length,
      // autoplay: true,
      pagination: const SwiperPagination(
          builder: DotSwiperPaginationBuilder(
              color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),
      control: SwiperControl(),
    );
  }
}

//layouts swiper
class MyLayoutSwiper extends StatefulWidget {
  const MyLayoutSwiper({super.key, required this.banner});
  final List banner;

  @override
  _MyLayoutSwiperState createState() => _MyLayoutSwiperState();
}

class _MyLayoutSwiperState extends State<MyLayoutSwiper> {
  @override
  Widget build(BuildContext context) {
    return Swiper(
      itemBuilder: (BuildContext context, int index) {
        return Image.network(
          widget.banner[index]['banner_url'],
          fit: BoxFit.fill,
        );
      },
      onTap: (index) {
        print(index);
      },
      itemCount: widget.banner.length,
      // autoplay: true,
      pagination: const SwiperPagination(
          builder: DotSwiperPaginationBuilder(
              color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),
      viewportFraction: 0.8,
      scale: 0.9,
    );
  }
}

// STACK Layout swiper
class StackLayoutSwiper extends StatefulWidget {
  const StackLayoutSwiper({super.key, required this.banner});
  final List banner;

  @override
  _StackLayoutSwiperState createState() => _StackLayoutSwiperState();
}

class _StackLayoutSwiperState extends State<StackLayoutSwiper> {
  @override
  Widget build(BuildContext context) {
    return Swiper(
      itemBuilder: (BuildContext context, int index) {
        return Image.network(
          widget.banner[index]['banner_url'],
          fit: BoxFit.fill,
        );
      },
      onTap: (index) {
        print(index);
      },
      itemCount: widget.banner.length,
      // autoplay: true,
      pagination: const SwiperPagination(
          builder: DotSwiperPaginationBuilder(
              color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),
      viewportFraction: 0.8,
      scale: 0.9,
      itemWidth: 300.0,
      layout: SwiperLayout.STACK,
    );
  }
}

// TINDER Layout Swiper
class TinderLayoutSwiper extends StatefulWidget {
  const TinderLayoutSwiper({super.key, required this.banner});
  final List banner;

  @override
  _TinderLayoutSwiperState createState() => _TinderLayoutSwiperState();
}

class _TinderLayoutSwiperState extends State<TinderLayoutSwiper> {
  @override
  Widget build(BuildContext context) {
    return Swiper(
      itemBuilder: (BuildContext context, int index) {
        return Image.network(
          widget.banner[index]['banner_url'],
          fit: BoxFit.fill,
        );
      },
      onTap: (index) {
        print(index);
      },
      itemCount: widget.banner.length,
      // autoplay: true,
      pagination: const SwiperPagination(
          builder: DotSwiperPaginationBuilder(
              color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),
      viewportFraction: 0.8,
      scale: 0.9,
      itemWidth: 300.0,
      itemHeight: 400.0,
      layout: SwiperLayout.TINDER,
    );
  }
}


// CUSTOM LAYOUT Swiper
class CustomLayoutSwiper extends StatefulWidget {
  const CustomLayoutSwiper({super.key, required this.banner});
  final List banner;

  @override
  _CustomLayoutSwiperState createState()=>_CustomLayoutSwiperState();

}
class _CustomLayoutSwiperState extends State<CustomLayoutSwiper>{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Swiper(
      itemBuilder: (BuildContext context, int index) {
        return Image.network(
          widget.banner[index]['banner_url'],
          fit: BoxFit.fill,
        );
      },
      onTap: (index) {
        print(index);
      },
      itemCount: widget.banner.length,
      // autoplay: true,
      pagination: const SwiperPagination(
          builder: DotSwiperPaginationBuilder(
              color: Color(0xFFFFFFFF), activeColor: Color(0xFFFF4646))),
      viewportFraction: 0.8,
      scale: 0.9,
      itemWidth: 300.0,
      itemHeight: 400.0,
      layout: SwiperLayout.CUSTOM,
       customLayoutOption: CustomLayoutOption(
    startIndex: -1,
    stateCount: 3
  )..addRotate([
    -45.0/180,
    0.0,
    45.0/180
  ])..addTranslate([
    Offset(-370.0, -40.0),
    Offset(0.0, 0.0),
    Offset(370.0, -40.0)
  ]),
    );
  }
  
}

到了这里,关于初学Flutter:swiper实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • flutter开发实战-inappwebview实现flutter与Javascript方法调用

    flutter开发实战-inappwebview实现flutter与Javascript方法调用 在使用inappwebview时候,需要flutter端与JS进行交互,调用相应的方法,在inappwebview中的JavaScript Handlers。 要添加JavaScript Handlers,可以使用InAppWebViewController.addJavaScriptHandler方法,在该方法中定义handlerName和JavaScript端调用它时要

    2024年02月03日
    浏览(43)
  • flutter开发实战-MethodChannel实现flutter与iOS双向通信

    flutter开发实战-MethodChannel实现flutter与iOS双向通信 最近开发中需要iOS与flutter实现通信,这里使用的MethodChannel 如果需要flutter与Android实现双向通信,请看 https://blog.csdn.net/gloryFlow/article/details/132218837 这部分与https://blog.csdn.net/gloryFlow/article/details/132218837中的一致,这里实现一下

    2024年02月13日
    浏览(51)
  • flutter开发实战-MethodChannel实现flutter与原生Android双向通信

    flutter开发实战-MethodChannel实现flutter与原生Android双向通信 最近开发中需要原生Android与flutter实现通信,这里使用的MethodChannel MethodChannel:用于传递方法调用(method invocation)。 通道的客户端和宿主端通过传递给通道构造函数的通道名称进行连接 一个应用中所使用的所有通道名称

    2024年02月13日
    浏览(39)
  • 【Flutter】Flutter 使用 table_calendar 实现自定义日历

    【Flutter】Flutter 使用 table_calendar 实现自定义日历 你好!今天我要为你介绍一个非常实用的 Flutter 日历组件—— table_calendar 。这个组件不仅功能强大、高度可定制,而且使用起来非常简单。在本文中,我会手把手教你如何使用这个组件,并分享一些实际业务中的应用示例。希

    2024年02月08日
    浏览(44)
  • 【Flutter】Flutter 实现 Text 自动换行 解决长文本溢出问题

    你是否渴望成为 Flutter 的专家,掌握更多的技巧和最佳实践?我们有个好消息要告诉你! Flutter 从零到一 基础入门到应用上线全攻略 正在等待你的加入!这个专栏包含了你需要的所有 Flutter 学习资源,包括代码示例和深度解析。专栏内容会持续更新,价格也会随之上涨。现

    2024年02月12日
    浏览(35)
  • 【Flutter】Flutter 使用 fluent_ui 实现 Windows UI

    当然,我们将按照你的要求分批次输出文章的正文内容。以下是前三个章节的内容: fluent_ui 是一个在 Flutter 中实现 Windows UI 的包。通过使用这个包,开发者可以轻松地在 Flutter 项目中创建出符合 Windows UI 指南的应用程序。本文将详细介绍 fluent_ui 的主要特性和使用方法,帮助

    2024年02月09日
    浏览(42)
  • 【Flutter】Flutter Text 控件实现下划线、删除线、虚线、加粗、斜体

    在 Flutter 开发中,我们经常需要对 Text 控件进行各种样式的设置,包括但不限于下划线、删除线、虚线、加粗和斜体等。这些样式的设置可以帮助我们更好地展示文本内容,提升用户体验。本文将详细介绍如何在 Flutter 3.10.0 或更高版本中实现这些效果。阅读本文后,你将掌握

    2024年02月06日
    浏览(38)
  • flutter开发实战-inappwebview实现flutter与Javascript的交互JSBridge

    flutter开发实战-inappwebview实现flutter与Javascript的交互JSBridge 在使用webview中,需要实现flutter与Javascript交互,在使用webview_flutter插件的时候,整理了一下webview与Javascript的交互JSBridge,具体可以查看 https://blog.csdn.net/gloryFlow/article/details/131683122 这里使用inappwebview插件来实现flutter与

    2024年02月08日
    浏览(48)
  • flutter开发实战-Universal Links配置及flutter微信分享实现

    flutter开发实战-Universal Links配置及flutter微信分享实现 在最近开发中碰到了需要实现微信分享,在iOS端需要配置UniversalLink,在分享使用fluwx插件来实现微信分享功能。 1.1、什么是UniversalLink Universal link 是Apple在iOS9推出的一种能够方便的通过传统HTTPS链接来启动APP的功能,可以使

    2024年01月19日
    浏览(48)
  • flutter开发实战-flutter_spinkit实现多种风格进度指示器

    flutter开发实战-flutter_spinkit实现多种风格进度指示器 最近开发过程中flutter_spinkit,这个拥有多种种风格加载指示器 引入flutter_spinkit 效果示例 代码如下 flutter开发实战-flutter_spinkit实现多种风格进度指示器. 学习记录,每天不停进步。

    2024年02月14日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包