flutterでおしゃれなアニメーションの実装方法を探している方向け。
今回は流れるような画面遷移のアニメーション「Liquid Swipe Animation」のやり方を解説します。
おしゃれなアニメーションを取り入れて魅力的なアプリやWebサービスを作ろう!
目次
この記事は以下のような方を対象者としています。
本記事の対象者
- flutter初学者の方
- flutterでアニメーションの使い方が分からない方
- flutterでWebとアプリの作り方を探している方
前置き : flutterのLiquid Swipe Animationとは!?
まずは、こちらのgif画像をご覧ください。
こちらが今回の記事で実装するスワイプ時のアニメーションの挙動になります。
画面遷移やLP(ランディングページ)など様々なシーンで活用できるアニメーションです。
今回の記事では下記githubのコードを参考にさせていただきました。
liquid_swipe_flutter
https://github.com/iamSahdeep/liquid_swipe_flutter
flutterでアニメーション実装その1 : プロジェクトファイルを作成
ここからは実際のコードを交えて説明して行きます。
まずはflutterのプロジェクトを自分のローカル上に作成しましょう。
まずはターミナルを開き下記コマンドを実行してください。
1 2
|
<!-- デスクトップ上にliquid-animationというflutterプロジェクトフォルダを作成 -->
~ $ flutter create ~/Desktop/liquid-animation
|
flutterでアニメーション実装その2 : アニメーションライブラリのインストール
続いて先ほど作ったプロジェクトにliquid_swipeをインストールします。
flutterでプロジェクトにライブラリを追加するにはpubspec.yamlファイルを編集する必要があります
pubspec.yamlとはパッケージ管理ファイルです。
pubspec.yamlはプロジェクトフォルダ直下に存在します。
pubspec.yaml
1 2 3 4 5
|
dependencies:
flutter:
sdk: flutter
<!-- 下記コードを追加(バージョンは常時常時最新バージョンを指定でOK) -->
liquid_swipe: ^1.1.0
|
上記ファイル保存後にターミナル上で下記コマンドを実行します。
これにより自分のプロジェクト内でliquid_swipeを利用できるようになります。
flutterでアニメーション実装その3 : 波形アニメーション用ののコードを書く
これでflutterアプリ内で波形アニメーションを描画する準備ができました。
デフォルトで生成されるmain.dartにliquid animation用のコードを書いて行きます。
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
|
import 'package:flutter/material.dart';
<!-- 下記でインストールしたライブラリを利用 -->
import 'package:liquid_swipe/liquid_swipe.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: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
<!-- LiquidSwipeを指定 -->
body: LiquidSwipe(
<!-- 遷移する画面数だけcontainer widgetを用意 -->
pages: containers,
fullTransitionValue: 500,
enableSlideIcon: true,
)));
}
<!-- 遷移させる画面分のcontainer widgetを配列で用意 -->
final containers = [
redLiquidWidget(),
blueLiquidWidget(),
greenLiquidWidget()
];
}
<!-- width, heightは全画面表示で指定 -->
double size = double.infinity;
<!-- 緑色の画面 -->
Widget greenLiquidWidget() {
return Container(
color: Colors.greenAccent,
width: size,
height: size,
child: Center(
child: Text(
"Cool Animation",
style: TextStyle(
fontSize: 30,
color: Colors.white,
fontFamily: "Billy",
fontWeight: FontWeight.w600),
)));
}
<!-- 青色の画面 -->
Widget blueLiquidWidget() {
return Container(
color: Colors.blueAccent,
width: size,
height: size,
child: Center(
child: Text(
"Cool Animation",
style: TextStyle(
fontSize: 30,
color: Colors.white,
fontFamily: "Billy",
fontWeight: FontWeight.w600),
)));
}
<!-- 赤色の画面 -->
Widget redLiquidWidget() {
return Container(
color: Colors.redAccent,
width: size,
height: size,
child: Center(
child: Text(
"Cool Animation",
style: TextStyle(
fontSize: 30,
color: Colors.white,
fontFamily: "Billy",
fontWeight: FontWeight.w600),
),
),
);
}
|
こちらのソースコードをコピペし起動すると上記添付したgif画像と同じ挙動のアプリが表示されます。
さいごに
ここまでお読みいただきありがとうございました。
僕のブログサイト「kzy.tech〜日本脱出のための教科書〜」がどのようなサービスで作られているかが気になる方は以下別記事にてご説明していますので、ご覧いただけますと小躍りして喜びます💃
手間暇かけずにサクッとアフィリエイト用のブログサイトを作りたいという方向け。
ある程度自由にカスタマイズできる、かつコマンド一つで 記事の自動生成ができる静的サイトジェネレータ「HUGO」についてまとめました。
また、海外移住の 英語とプログラミングを習得することを推奨しています。
これは私の経験則から言えることですが、上記二つのスキルがあれば海外移住は絶対に実現できます。
以下に僕が実際に使って効率よくプログラミング学習ができるおすすめサービスを載せます😌
速習!おすすめプログラミング勉強法【Udemy】
いくつかプログラミング学習サービスを利用しましたが、一番効率よく勉強できると感じたのはUdemyでした。
Udemyでは動画での説明や解説等もあり親切で、学習教材も豊富にあることから プログラミング初学者の方が短期間でエンジニアを目指したいのであれば、非常に良い教材だと思います。
ちなみに私は文系卒で社会人になってから独学でudemyを使ってプログラミングの勉強をして、実際にエンジニアとして採用されました
Udemyのコースは1つ1,000円ほどなので、ITの参考本を一冊(3,000円)を買うよりもUdemyのコースを購入する方が安い上により効率的にプログラミングを勉強できると思います。
世界最大級のオンライン学習サイトUdemy
また、別記事にてダナンでの生活やIT関連についても記事を書いていますのでクリックいただけると嬉しくて踊ります💃
人気記事
未経験だけどプログラミングを学んでエンジニアになりたい、社会人だから時間もそれほど多く無いので効率よく勉強したい。
私もその内の一人でした。今回の記事で最短でエンジニアになるためのおすすめUdemy講座4選をご紹介したいと思います。
デスク周りのPC周辺機器の購入を検討されている方向け。
普段コスパ重視でPC周辺機器を選んでいますが、実際に買ってよかったと思えたおすすめPC周辺機器を本記事でご紹介します。
個人でアプリを作って収益を上げるやり方を探している方向け。
アプリ開発を副業で考えている方向けに広告収入のやり方、及びおすすめの収益戦略を本記事で解説します。
個人で副業のためにアプリ開発をしてみたいと考えている方向け。
iOS/Androidの個人アプリ開発の場合データのやりとりを行うため、サーバを契約する人が多いです。
しかし、考えなしにサーバを契約するのは非常に大きなデメリットがあるため、私はあまりオススメしません。
ではどの様にしてお金をかけずにアプリ作りができるか、なぜFirebaseを使うべきなのかこの記事で解説していきます。
ベトナム・ダナン生活関連
最近観光地として人気が高まっているダナンですが、近年物価の変動が大きくなっていっているように感じます。
2019年〜2020年でのダナンの物価はどのようなものなのか、ダナン在住者として現地の声をお届けできればと思います
日本ってやっぱり「働く」ことに関しては異常ですよ。
「お客様は神様」精神、残業を美徳とする文化、過労死という言葉を作り出してしまう労働環境。
今回は日本の異常な労働環境をベトナムの労働環境と比較しながら説明したいと思います😱
海外移住を始めて2年ほどが経過しました、日本に住んでいた時と今ベトナムに移住してからとでどのように生活が変わったのかをこちらの記事にまとめていこうと思います。
ベトナム・ダナンへ移住を考えている方向け。
海外移住をする上で家賃相場を事前に知っておくことは生活費がどれくらいかかるのか計算ができるので非常に重要です。
こちらの記事で家賃相場、賃貸契約の流れ、賃貸契約時のトラブルについて解説していきます。
技術メモ・プログラミング関連
AWS ソリューションアーキテクトの勉強をしている方向け。
Udemyでのおすすめ講座、一発合格のための勉強方法から受験の手順まで本記事でまとめました。
認定試験の受験を考えている方には必見です。
こんにちはkzyです。
今回は文字認識ライブラリのPyOCRとTesseractを使って画像からテキストを抽出したいと思います。
環境構築含めpythonでの文字認識のやり方を簡潔に説明できればと思います。
flutterでオブジェクトのサイズ調整の理解が曖昧な方向け。
flutterでアプリ開発を行う際に頻出する項目の一つのため、この記事でなるべくわかりやすく解説します。
こんにちはkzyです。
今回はPyOCRで文字認識したテキストをエクセルに出力する方法を解説します。
具体的にはXlsxWriterというライブラリを使用してPythonスクリプトからエクセル操作を行います。