flutterでTinderのようなスワイプ型カードの実装方法を解説します。
左右にスワイプできるカード型アプリはアプリ開発で応用できる幅が広いです。
flutterでのアプリ開発を検討中の方に役立てば幸いです。
目次
この記事は以下のような方を対象者としています。
- flutter初学者の方
- flutterでスワイプ型カードのやり方を知りたい方
- flutterでアプリ開発をしたい方
- flutterでTinder型のアプリを作りたい方
前置き : flutterのflutter_tindercardライブラリとは!?
まずは、こちらのgif画像をご覧ください。
こちらが今回の記事で実装するTinderのようなスワイプ式カード型アプリの挙動になります。
マッチングアプリや単語帳アプリなど様々なシーンで応用が効く挙動の一つです。
今回の記事では下記githubのコードを参考にさせていただきました。
flutter_tindercard
https://pub.dev/packages/flutter_tindercard
flutterでTinderライクなアプリ開発その1 : プロジェクトファイルを作成
ここからは実際のコードを交えて説明して行きます。
まずはflutterのプロジェクトを自分のローカル上に作成しましょう。
まずはターミナルを開き下記コマンドを実行してください。
1 |
|
flutterでTinderライクなアプリ開発その2 : スワイプ型カードライブラリのインストール
続いて先ほど作ったプロジェクトにflutter_tinderをインストールします。
flutterでプロジェクトにライブラリを追加するにはpubspec.yamlファイルを編集する必要があります
pubspec.yamlとはパッケージ管理ファイルです。
pubspec.yamlはプロジェクトフォルダ直下に存在します。
1 |
|
上記ファイル保存後にターミナル上で下記コマンドを実行します。
1 |
|
これにより自分のプロジェクト内でflutter_tinderを利用できるようになります。
flutterでTinderライクなアプリ開発その3 : スワイプ型カード用のコードを書く
これでflutterアプリ内でTinderライクなスワイプ型カードを描画する準備ができました。
デフォルトで生成されるmain.dartにflutter_tinder用のコードを書いて行きます。
1 |
|
こちらのソースコードをコピペし起動すると上記添付したgif画像と同じ挙動のアプリが表示されます。
ちなみに、用意した画像を画面上に表示させるにはプロジェクトフォルダ上にassetsフォルダを作成し、pubspec.yaml内で指定する必要があります。
1 |
|
これでソースコード上で画像フォルダへの指定ができるようになり、当該フォルダに格納した画像が表示できるようになります。
さいごに
ここまでお読みいただきありがとうございました。
僕のブログサイト「kzy.tech〜日本脱出のための教科書〜」がどのようなサービスで作られているかが気になる方は以下別記事にてご説明していますので、ご覧いただけますと小躍りして喜びます💃
また、海外移住の 英語とプログラミングを習得することを推奨しています。
これは私の経験則から言えることですが、上記二つのスキルがあれば海外移住は絶対に実現できます。
以下に僕が実際に使って効率よくプログラミング学習ができるおすすめサービスを載せます😌
速習!おすすめプログラミング勉強法【Udemy】
いくつかプログラミング学習サービスを利用しましたが、一番効率よく勉強できると感じたのはUdemyでした。
Udemyでは動画での説明や解説等もあり親切で、学習教材も豊富にあることから プログラミング初学者の方が短期間でエンジニアを目指したいのであれば、非常に良い教材だと思います。
ちなみに私は文系卒で社会人になってから独学でudemyを使ってプログラミングの勉強をして、実際にエンジニアとして採用されました
Udemyのコースは1つ1,000円ほどなので、ITの参考本を一冊(3,000円)を買うよりもUdemyのコースを購入する方が安い上により効率的にプログラミングを勉強できると思います。
世界最大級のオンライン学習サイトUdemy
また、別記事にてダナンでの生活やIT関連についても記事を書いていますのでクリックいただけると嬉しくて踊ります💃