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
170
[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
36
[FlutterTokyo#6]Navigating Flutter Upgrades
korodroid
0
63
[DevFestTokyo]Accelerating Flutter App Development Using Generative AI
korodroid
2
860
[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
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
1
280
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
ymrl
2
180
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
280
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
vsanna2
0
130
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
460
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
170
Getting to Know Your Legacy (System) with AI-Driven Software Archeology (WeAreDevelopers World Congress 2025)
feststelltaste
1
130
ビギナーであり続ける/beginning
ikuodanaka
3
750
Backlog ユーザー棚卸しRTA、多分これが一番早いと思います
__allllllllez__
1
150
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
120
OPENLOGI Company Profile
hr01
0
67k
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
130
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Designing for humans not robots
tammielis
253
25k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Thoughts on Productivity
jonyablonski
69
4.7k
Building an army of robots
kneath
306
45k
Designing Experiences People Love
moore
142
24k
Visualization
eitanlees
146
16k
A better future with KSS
kneath
238
17k
Documentation Writing (for coders)
carmenintech
72
4.9k
GitHub's CSS Performance
jonrohan
1031
460k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Building Applications with DynamoDB
mza
95
6.5k
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