Flutterでカルーセルマップを実現する

flutter_swiper 最も強力なスワイパー、複数のレイアウト、無限カルーセル、Android と IOS のデュアルエンド適応。

1. pubspec.yaml に flutter_swiper を導入する

flutter_swiper: ^1.1.6

忘れずに実行してください

flutter pub get

2. 引用

import 'package:flutter_swiper/flutter_swiper.dart';

3. 使用する

    Swiper(
      itemBuilder: (BuildContext context,int index){
    
    
        // 配置图片地址
        return new Image.network(productModel.headImages[index],fit: BoxFit.fill,);
      },
      // 配置图片数量
      itemCount: productModel.headImages.length ,
      // 底部分页器
      pagination: new SwiperPagination(),
      // 左右箭头
      control: new SwiperControl(),
      // 无限循环
      loop: true,
      // 自动轮播
      autoplay: true,
    )

4.エフェクト画像
ここに画像の説明を挿入
5.スワイパーの基本パラメータ

パラメータ	デフォルト	説明
スクロール方向	軸.水平	スクロール方向。垂直スクロールが必要な場合は、Axis.vertical に設定します。
ループ	真実	無限カルーセルモードスイッチ
索引	0	添字の最初の位置
自動再生	間違い	自動再生スイッチ
autoplayDely	3000	自動再生の遅延 (ミリ秒単位)
autoplayDiableOnInteraction	真実	ユーザーがドラッグしたときに自動再生を停止するかどうか
onIndexChanged	void onIndexChanged(int インデックス)	ユーザーが手動でドラッグまたは自動再生して添え字を変更するときに呼び出されます。
オンタップ	void onTap(int インデックス)	ユーザーがカルーセルをクリックすると呼び出されます
間隔	300.0	アニメーション時間 (ミリ秒単位)
ページネーション	ヌル	新しい SwiperPagination() を設定して、デフォルトのページネーションインジケーターを表示します。
コントロール	ヌル	新しい SwiperControl() を設定してデフォルトのページングボタンを表示する

6. ページングインジケーターの SwiperPagination パラメーター

パラメータ	デフォルト	説明
アライメント	Alignment.bottomCenter	ページネーションインジケーターを別の位置に配置したい場合は、このパラメータを変更できます。
マージン	EdgeInsets.all(10.0)	ページネーションインジケーターとコンテナーの境界線の間の距離
ビルダー	SwiperPagination.dots	2 つのデフォルトのページネーションインジケータースタイル: SwiperPagination.dots 、 SwiperPagination.fraction (カスタマイズ可能)

7. コントロールボタン SwiperControl パラメータ

パラメータ	デフォルト	説明
アイコン前へ	Icons.arrow_back_ios	前ページのアイコンデータ
アイコン次へ	Icons.arrow_forward_ios	次のページの IconData
色	Theme.of(context).primaryColor	コントロールボタンの色
サイズ	30.0	コントロールボタンのサイズ
パディング	const EdgeInsets.all(5.0)	コントロールボタンとコンテナ間の距離

コントローラー（SwiperController）で利用できるメソッド

方法	説明
void move(int インデックス, {bool アニメーション: true})	指定した添え字に移動し、アニメーションを再生するかどうかを設定します
void next({bool アニメーション: true})	次のページ
voidPrevious({boolアニメーション:true})	前のページ
void startAutoplay()	自動再生を開始する
void stopAutoplay()	自動再生を停止する

Flutterでカルーセルマップを実現する

おすすめ