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
[FlutterTokyo#10]In-App Language Switching in Flutter
korodroid
0
21
[potatotips #92]Integrating Quick Settings Tiles into Your Android App
korodroid
1
130
[ABC2025Spring]Code Less, Build More: A Practical Guide to Mobile Apps with Generative AI
korodroid
0
200
[DevTalksRomania]Building Augmented Reality Experiences with Flutter and AI-Powered Development
korodroid
0
15
[FlutterNinjas]Adapting Flutter App UX for Users Across the World
korodroid
0
49
[FlutterTokyo#6]Navigating Flutter Upgrades
korodroid
0
68
[DevFestTokyo]Accelerating Flutter App Development Using Generative AI
korodroid
2
900
[DevFestMilano]Enhancing Flutter Apps UX for Global Users
korodroid
0
48
[mobile #15]UX Improvements on Flutter Apps Part 5
korodroid
0
61
Other Decks in Technology
See All in Technology
20250912_RPALT_データを集める→とっ散らかる問題_Obsidian紹介
ratsbane666
0
100
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
22
12k
Apache Spark もくもく会
taka_aki
0
140
使いやすいプラットフォームの作り方 ー LINEヤフーのKubernetes基盤に学ぶ理論と実践
lycorptech_jp
PRO
1
160
Unlocking the Power of AI Agents with LINE Bot MCP Server
linedevth
0
120
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
ganota
2
320
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
3
200
Firestore → Spanner 移行 を成功させた段階的移行プロセス
athug
1
500
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
1.2k
Platform開発が先行する Platform Engineeringの違和感
kintotechdev
4
590
いま注目のAIエージェントを作ってみよう
supermarimobros
0
360
Bedrock で検索エージェントを再現しようとした話
ny7760
2
110
Featured
See All Featured
Faster Mobile Websites
deanohume
309
31k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
113
20k
How STYLIGHT went responsive
nonsquared
100
5.8k
4 Signs Your Business is Dying
shpigford
184
22k
GraphQLとの向き合い方2022年版
quramy
49
14k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Become a Pro
speakerdeck
PRO
29
5.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
850
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