見出し画像

Flutter #3 : リスト・インライン動画再生・アニメーションのサンプル

iOS / Android それぞれの挙動を撮影した動画をアップしました。

ソース(動画を含んでいるので重いです)もこちらにアップしました。

動作説明とコードについて

画面は2つ(main_screen.dart と video_screen.dart)。
データは1つ(list_data.dart)。
一覧画面を初期化するとき、まずJSONをロードし、その情報をもとにリストを表示します。

使用しているパッケージについて

Flutter(Dart)にはパッケージ(いわゆるサードパーティーライブラリ)がたくさんアップされていて、今回のデモもそれを使ってます。

・video_player
https://github.com/flutter/plugins/tree/master/packages/video_player/video_player
代表的なパッケージで、アプリ上で動画を再生したいときにまずこれから使います。
・animations
https://github.com/flutter/packages/tree/master/packages/animations
"Material motion" を実現するためのパッケージです。詳しくは上記リンク先のデモ画像、動画を見てもらえると分かるはずです。

ポイント

video_player パッケージは iOS / Android それぞれのネイティブコードを使用しています。ただ、実装するときにネイティブコードの存在は気にならないです。(ビルド・デプロイのタイミングには気を付ける必要が出てくることがあります)

一覧画面から詳細画面への滑らかな切り替わりの動きは animations パッケージを使用しています。ネイティブで実装しようとすると iOS / Android それぞれで結構大変なんですが、このパッケージを使えばざっくり数十行のコードで作れます。

ちなみに、Flutterで使えるパッケージ(ライブラリ)をまとめてくれているページもいくつかあります。例えばこことか。

おわりに

できるだけわかりやすく書こうと思いますので、表現方法などに色々言いたくなる方がいらっしゃるかもしれませんが、大目にみてください。
正確な技術情報は、公式ドキュメントやもっとFlutterについて理解されている方の情報を参考にしてください。
ウソは書かないように努力します。もしあればご指摘ください。
また、この記事を書いている私について知りたい方はこちらをご確認ください。

なお、私はFlutter“推し”派です。そこも考慮していただけると幸いです。