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
19
[potatotips #92]Integrating Quick Settings Tiles into Your Android App
korodroid
1
120
[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
14
[FlutterNinjas]Adapting Flutter App UX for Users Across the World
korodroid
0
45
[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
生成AI時代に必要な価値ある意思決定を育てる「開発プロセス定義」を用いた中期戦略
kakehashi
PRO
1
250
シークレット管理だけじゃない!HashiCorp Vault でデータ暗号化をしよう / Beyond Secret Management! Let's Encrypt Data with HashiCorp Vault
nnstt1
2
130
カミナシ社の『ID管理基盤』製品内製 - その意思決定背景と2年間の進化 #AWSUnicornDay / Kaminashi ID - The Big Whys
kaminashi
3
720
Skrub: machine-learning with dataframes
gaelvaroquaux
0
110
Figma + Storybook + PlaywrightのMCPを使ったフロントエンド開発
yug1224
10
3.6k
個人CLAUDE.md紹介と設定から学んだこと/introduce-my-claude-md
shibayu36
0
160
役割は変わっても、変わらないもの 〜スクラムマスターからEMへの転身で学んだ信頼構築の本質〜 / How to build trust
shinop
0
150
異業種出身エンジニアが気づいた、転向して十数年経っても変わらない自分の武器とは
macnekoayu
0
260
Oracle Cloud Infrastructure:2025年8月度サービス・アップデート
oracle4engineer
PRO
0
170
【Grafana Meetup Japan #6】Grafanaをリバプロ配下で動かすときにやること ~ Grafana Liveってなんだ ~
yoshitake945
0
220
AI時代にPdMとPMMはどう連携すべきか / PdM–PMM-collaboration-in-AI-era
rakus_dev
0
250
20250903_1つのAWSアカウントに複数システムがある環境におけるアクセス制御をABACで実現.pdf
yhana
2
250
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
20k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Side Projects
sachag
455
43k
What's in a price? How to price your products and services
michaelherold
246
12k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Thoughts on Productivity
jonyablonski
69
4.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
790
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