Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Creating Flutter Animations with Rive
Search
Kenichi Kambara
July 10, 2020
Technology
0
210
Creating Flutter Animations with Rive
potatotips 70での発表資料です。
「Creating Flutter Animations with Rive」
#potatotips
Kenichi Kambara
July 10, 2020
Tweet
Share
More Decks by Kenichi Kambara
See All by Kenichi Kambara
[ABC2025Spring]Code Less, Build More: A Practical Guide to Mobile Apps with Generative AI
korodroid
0
180
[DevTalksRomania]Building Augmented Reality Experiences with Flutter and AI-Powered Development
korodroid
0
11
[FlutterNinjas]Adapting Flutter App UX for Users Across the World
korodroid
0
37
[FlutterTokyo#6]Navigating Flutter Upgrades
korodroid
0
63
[DevFestTokyo]Accelerating Flutter App Development Using Generative AI
korodroid
2
870
[DevFestMilano]Enhancing Flutter Apps UX for Global Users
korodroid
0
44
[mobile #15]UX Improvements on Flutter Apps Part 5
korodroid
0
59
[ABC2024Summer]Flutter UX Improvements + α
korodroid
0
540
[YUMEMI.grow Mobile #14]Wear OS Recap from I/O 2024 [short version]
korodroid
0
66
Other Decks in Technology
See All in Technology
「現場で活躍するAIエージェント」を実現するチームと開発プロセス
tkikuchi1002
3
300
安定した基盤システムのためのライブラリ選定
kakehashi
PRO
3
130
ソフトウェアテストのAI活用_ver1.25
fumisuke
1
610
Data Engineering Study#30 LT資料
tetsuroito
1
180
OpenTelemetryセマンティック規約の恩恵とMackerel APMにおける活用例 / SRE NEXT 2025
mackerelio
3
2k
Figma Dev Mode MCP Serverを用いたUI開発
zoothezoo
0
230
「Chatwork」のEKS環境を支えるhelmfileを使用したマニフェスト管理術
hanayo04
1
400
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
3
1k
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
39k
ABEMAの本番環境負荷試験への挑戦
mk2taiga
5
1.3k
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
230
〜『世界中の家族のこころのインフラ』を目指して”次の10年”へ〜 SREが導いたグローバルサービスの信頼性向上戦略とその舞台裏 / Towards the Next Decade: Enhancing Global Service Reliability
kohbis
3
1.5k
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.1k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Building Applications with DynamoDB
mza
95
6.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Designing Experiences People Love
moore
142
24k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Bash Introduction
62gerente
613
210k
How GitHub (no longer) Works
holman
314
140k
Music & Morning Musume
bryan
46
6.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
KATA
mclloyd
30
14k
Transcript
2020.07.10 Kenichi Kambara (@korodroid) Creating Flutter Animations with Rive potatotips
#70
About me •Mobile App Development •Technical Speeches •Technical Writings •[Official]
Evangelist at NTT TechnoCross •[Private] iplatform.org Kenichi Kambara (@korodroid)
•Creating Flutter Animations •Rive Introduction
Creating Animations Implementing with Dart Using an Animation Tool
Implementing with Dart •Implicit Widget •No need AnimationController •Customization:
Moderate •Transition Widget •Requires AnimationController •Customization: Middle •Explicit Widget •Requires AnimationController •Customization: High Implicit Widget Transition Widget
Code Sample (Implicit Widget) body: Center( child: AnimatedOpacity( opacity:
_visible ? 1.0 : 0.0, duration: Duration(milliseconds: 2000), child: Image.asset('images/chara.png')), ), floatingActionButton: FloatingActionButton( onPressed: () { setState(() { _visible = !_visible; }); }, tooltip: ‘Switch Opacity', child: Icon(Icons.flip), ),
Using an Animation Tool Rive: Adding high-quality animation easily
(Former name: Flare)
-JWF%FNP Creating Simple Animation with Rive
Rive #JOBSZ
Adding the package into Flutter Project dependencies: flutter: sdk:
flutter ## Flare flare_flutter: pubspec.yaml Rive
Importing Flare data (*.flr) and Coding return Scaffold( appBar:
AppBar( title: Text(widget.title), ), body: Center( child: FlareActor( "assets/sample.flr", animation: "sample01", fit: BoxFit.contain, )), ); } main.dart Rive w'JMFOBNF wBOJNBUJPOOBNF
Creating Morphing with Rive -JWF%FNP
•Free: File Properties must be public (View-only[by default] or
fork-OK) •Paid: File Properties can be private - 21$/month on Monthly Plan - 14$/month on Yearly Plan [Rive]Price
Conclusion •Ξχϝʔγϣϯͷ࣮ݱํࣜ͞·͟· •Γ͍ͨ͜ͱ(+ίετ؍)ʹ߹Θͤͨํࣜબ͕ॏཁ •Riveબࢶͷ1ͭ
•Rive https://rive.app/ •flare_flutter https://pub.dev/packages/flare_flutter Reference
Please let me know if you have any requests such
as technical speeches, technical writings and so on. Facebook:http://fb.com/kanbara.kenichi Twitter:@korodroid LinkedIn:http://www.linkedin.com/in/korodroid Thank you so much