flutterでTinderのようなスワイプ型カードの実装方法を解説します。

左右にスワイプできるカード型アプリはアプリ開発で応用できる幅が広いです。

flutterでのアプリ開発を検討中の方に役立てば幸いです。

flutter_tindercardを使ってtinder型のスワイプ式カードを実装しよう!

目次

この記事は以下のような方を対象者としています。

本記事の対象者

  • flutter初学者の方
  • flutterでスワイプ型カードのやり方を知りたい方
  • flutterでアプリ開発をしたい方
  • flutterでTinder型のアプリを作りたい方

前置き : flutterのflutter_tindercardライブラリとは!?

tranquilpeak

まずは、こちらのgif画像をご覧ください。

こちらが今回の記事で実装するTinderのようなスワイプ式カード型アプリの挙動になります。

マッチングアプリや単語帳アプリなど様々なシーンで応用が効く挙動の一つです。

今回の記事では下記githubのコードを参考にさせていただきました。

flutter_tindercard
https://pub.dev/packages/flutter_tindercard

flutterでTinderライクなアプリ開発その1 : プロジェクトファイルを作成

ここからは実際のコードを交えて説明して行きます。

まずはflutterのプロジェクトを自分のローカル上に作成しましょう。

まずはターミナルを開き下記コマンドを実行してください。

1
2
<!-- デスクトップ上にflutter_tinderというflutterプロジェクトフォルダを作成 -->
 ~ $ flutter create ~/Desktop/flutter_tinder

flutterでTinderライクなアプリ開発その2 : スワイプ型カードライブラリのインストール

続いて先ほど作ったプロジェクトにflutter_tinderをインストールします。

flutterでプロジェクトにライブラリを追加するにはpubspec.yamlファイルを編集する必要があります

pubspec.yamlとはパッケージ管理ファイルです。

pubspec.yamlはプロジェクトフォルダ直下に存在します。

pubspec.yaml
1
2
3
4
5
dependencies:
  flutter:
    sdk: flutter
  <!-- 下記コードを追加(バージョンは常時常時最新バージョンを指定でOK) -->
  flutter_tindercard: ^0.1.7

上記ファイル保存後にターミナル上で下記コマンドを実行します。

1
flutter pub get

これにより自分のプロジェクト内でflutter_tinderを利用できるようになります。

flutterでTinderライクなアプリ開発その3 : スワイプ型カード用のコードを書く

これでflutterアプリ内でTinderライクなスワイプ型カードを描画する準備ができました。

デフォルトで生成されるmain.dartにflutter_tinder用のコードを書いて行きます。

main.dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
import 'package:flutter/material.dart';
<!-- flutter_tinderライブラリをインポート -->
import 'package:flutter_tindercard/flutter_tindercard.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ExampleHomePage(),
    );
  }
}

class ExampleHomePage extends StatefulWidget {
  @override
  _ExampleHomePageState createState() => _ExampleHomePageState();
}

class _ExampleHomePageState extends State<ExampleHomePage>
    with TickerProviderStateMixin {
<!-- カード上に表示させる画像のファイルパスを配列で指定 -->
  List<String> welcomeImages = [
    "assets/girl_1.png",
    "assets/girl_2.png",
    "assets/girl_3.png",
    "assets/girl_4.png",
    "assets/girl_5.png",
    "assets/girl_6.png"
  ];

 <!-- カード上に表示させる出身地を配列で指定 -->
  List<String> fromProvinces = ["石川県", "大分県", "東京都", "沖縄県", "大阪府", "北海道"];

 <!-- カード上に表示させるパートナー名を配列で指定 -->
  List<String> partnerNames = [
    "あきこ(22)",
    "ゆかり(25)",
    "かなこ(21)",
    "かな(27)",
    "まほ(22)",
    "あすか(27)"
  ];

  @override
  Widget build(BuildContext context) {
    CardController controller; //Use this to trigger swap.

    return new Scaffold(
      body: Column(
        children: [
          new Text(
            'Swiper',
            style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 50,
                color: Colors.orangeAccent),
            textAlign: TextAlign.center,
          ),
          new Center(
            child: Container(
              height: MediaQuery.of(context).size.height * 0.6,
              child: new TinderSwapCard(
                swipeUp: false,
                swipeDown: false,
                orientation: AmassOrientation.BOTTOM,
                totalNum: welcomeImages.length,
                stackNum: 3,
                swipeEdge: 4.0,
                maxWidth: MediaQuery.of(context).size.width * 0.9,
                maxHeight: MediaQuery.of(context).size.width * 0.9,
                minWidth: MediaQuery.of(context).size.width * 0.8,
                minHeight: MediaQuery.of(context).size.width * 0.8,
                cardBuilder: (context, index) => Card(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      ListTile(
                        leading: Icon(Icons.access_alarms),
                        title: Text('${fromProvinces[index]}'),
                        subtitle: Text(
                          "${partnerNames[index]}",
                          style:
                              TextStyle(color: Colors.black.withOpacity(0.6)),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(16.0),
                      ),
                      Container(
                          width: 200,
                          height: 200,
                          child: Image.asset('${welcomeImages[index]}')),
                    ],
                  ),
                ),
                cardController: controller = CardController(),
                swipeUpdateCallback:
                    (DragUpdateDetails details, Alignment align) {
                  /// Get swiping card's alignment
                  if (align.x < 0) {
                    <!-- 右にスワイプした時の挙動 -->
                  } else if (align.x > 0) {
                    <!-- 左にスワイプした時の挙動 -->
                  }
                },
                swipeCompleteCallback:
                    (CardSwipeOrientation orientation, int index) {
                  /// Get orientation & index of swiped card!
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}

こちらのソースコードをコピペし起動すると上記添付したgif画像と同じ挙動のアプリが表示されます。

ちなみに、用意した画像を画面上に表示させるにはプロジェクトフォルダ上にassetsフォルダを作成し、pubspec.yaml内で指定する必要があります。

pubspec.yaml
1
2
3
<!-- To add assets to your application, add an assets section, like this: -->
  assets:
    - assets/

これでソースコード上で画像フォルダへの指定ができるようになり、当該フォルダに格納した画像が表示できるようになります。

さいごに

ここまでお読みいただきありがとうございました。

僕のブログサイト「kzy.tech〜日本脱出のための教科書〜」どのようなサービスで作られているかが気になる方は以下別記事にてご説明していますので、ご覧いただけますと小躍りして喜びます💃

【コピペOK】HUGOでアフィリエイト用ブログサイトを作ろう

手間暇かけずにサクッとアフィリエイト用のブログサイトを作りたいという方向け。

ある程度自由にカスタマイズできる、かつコマンド一つで 記事の自動生成ができる静的サイトジェネレータ「HUGO」についてまとめました。

また、海外移住の 英語とプログラミングを習得することを推奨しています。
これは私の経験則から言えることですが、上記二つのスキルがあれば海外移住は絶対に実現できます

以下に僕が実際に使って効率よくプログラミング学習ができるおすすめサービスを載せます😌

速習!おすすめプログラミング勉強法【Udemy】

いくつかプログラミング学習サービスを利用しましたが、一番効率よく勉強できると感じたのはUdemyでした。

Udemyでは動画での説明や解説等もあり親切で、学習教材も豊富にあることから プログラミング初学者の方が短期間でエンジニアを目指したいのであれば、非常に良い教材だと思います。

ちなみに私は文系卒で社会人になってから独学でudemyを使ってプログラミングの勉強をして、実際にエンジニアとして採用されました

Udemyのコースは1つ1,000円ほどなので、ITの参考本を一冊(3,000円)を買うよりもUdemyのコースを購入する方が安い上により効率的にプログラミングを勉強できると思います。
世界最大級のオンライン学習サイトUdemy

また、別記事にてダナンでの生活やIT関連についても記事を書いていますのでクリックいただけると嬉しくて踊ります💃

【Udemy】未経験から始める格安プログラミング講座4選

未経験だけどプログラミングを学んでエンジニアになりたい、社会人だから時間もそれほど多く無いので効率よく勉強したい。 私もその内の一人でした。今回の記事で最短でエンジニアになるためのおすすめUdemy講座4選をご紹介したいと思います。

【flutter】他クラスの関数/変数を使う方法をわかりやすく解説

こんにちはkzyです。 flutterで他クラスの関数や変数を使う方法を探している方向け。 開発を進める上で他クラスから値をインポートして使うことは頻繁にあると思います。 どのように他クラス内のデータにアクセスするのか、検証したソースコードでわかりやすく解説したいと思います。

【個人開発】副業でアプリを作りたいならサーバーは契約しない方がいい理由

個人で副業のためにアプリ開発をしてみたいと考えている方向け。 iOS/Androidの個人アプリ開発の場合データのやりとりを行うため、サーバを契約する人が多いです。 しかし、考えなしにサーバを契約するのは非常に大きなデメリットがあるため、私はあまりオススメしません。 ではどの様にしてお金をかけずにアプリ作りができるか、なぜFirebaseを使うべきなのかこの記事で解説していきます。

【flutter】コピペOK!おしゃれなアニメーションのやり方!【Liquid Swipe Animation】

flutterでおしゃれなアニメーションの実装方法を探している方向け。 今回は流れるような画面遷移のアニメーション「Liquid Swipe Animation」のやり方を解説します。

【ダナンの物価】ダナン在住者が伝える2020年ベトナム最新状況!

最近観光地として人気が高まっているダナンですが、近年物価の変動が大きくなっていっているように感じます。 2019年〜2020年でのダナンの物価はどのようなものなのか、ダナン在住者として現地の声をお届けできればと思います

【残業大国】日本の異常な労働環境をベトナムで働いてみて実感した件

日本ってやっぱり「働く」ことに関しては異常ですよ。 「お客様は神様」精神、残業を美徳とする文化、過労死という言葉を作り出してしまう労働環境。 今回は日本の異常な労働環境をベトナムの労働環境と比較しながら説明したいと思います😱

【海外移住】ベトナムに移住したら日本の8億倍住みやすかった件

海外移住を始めて2年ほどが経過しました、日本に住んでいた時と今ベトナムに移住してからとでどのように生活が変わったのかをこちらの記事にまとめていこうと思います。

【ダナンの家賃】日本相場の半額以下!?ベトナム家賃相場調査!

ベトナム・ダナンへ移住を考えている方向け。 海外移住をする上で家賃相場を事前に知っておくことは生活費がどれくらいかかるのか計算ができるので非常に重要です。 こちらの記事で家賃相場、賃貸契約の流れ、賃貸契約時のトラブルについて解説していきます。

【おすすめ】Udemy講座でAWS ソリューションアーキテクト アソシエイトを一発合格できた件

AWS ソリューションアーキテクトの勉強をしている方向け。
Udemyでのおすすめ講座、一発合格のための勉強方法から受験の手順まで本記事でまとめました。
認定試験の受験を考えている方には必見です。

【python】文字認識で画像からテキストを出力するやり方をわかりやすく【Tesseract&PyOCR】

こんにちはkzyです。 今回は文字認識ライブラリのPyOCRとTesseractを使って画像からテキストを抽出したいと思います。 環境構築含めpythonでの文字認識のやり方を簡潔に説明できればと思います。

【コピペOK】flutterのSizedBoxとExpandedの違いをわかりやすく

flutterでオブジェクトのサイズ調整の理解が曖昧な方向け。 flutterでアプリ開発を行う際に頻出する項目の一つのため、この記事でなるべくわかりやすく解説します。

【python】文字認識したテキストをエクセルに出力するやり方をわかりやすく【PyOCR + XlsxWriter】

こんにちはkzyです。 今回はPyOCRで文字認識したテキストをエクセルに出力する方法を解説します。 具体的にはXlsxWriterというライブラリを使用してPythonスクリプトからエクセル操作を行います。