Creating Flutter Animations with Rive

Slide 1

Slide 1 text

2020.07.10 Kenichi Kambara (@korodroid) Creating Flutter Animations with Rive potatotips #70

Slide 2

Slide 2 text

About me •Mobile App Development •Technical Speeches •Technical Writings •[Ofﬁcial] Evangelist at NTT TechnoCross •[Private] iplatform.org Kenichi Kambara (@korodroid)

Slide 3

Slide 3 text

•Creating Flutter Animations •Rive Introduction

Slide 4

Slide 4 text

Creating Animations Implementing with Dart Using an Animation Tool

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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), ),

Slide 7

Slide 7 text

Using an Animation Tool Rive: Adding high-quality animation easily (Former name: Flare)

Slide 8

Slide 8 text

-JWF%FNP Creating Simple Animation with Rive

Slide 9

Slide 9 text

Rive #JOBSZ

Slide 10

Slide 10 text

Adding the package into Flutter Project dependencies: flutter: sdk: flutter ## Flare flare_flutter: pubspec.yaml Rive

Slide 11

Slide 11 text

Importing Flare data (*.ﬂr) 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

Slide 12

Slide 12 text

Creating Morphing with Rive -JWF%FNP

Slide 13

Slide 13 text

•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

Slide 14

Slide 14 text

Conclusion •Ξχϝʔγϣϯͷ࣮ݱํࣜ͸͞·͟· •΍Γ͍ͨ͜ͱ(+ίετ؍఺΋)ʹ߹Θͤͨํࣜબ୒͕ॏཁ •Rive΋બ୒ࢶͷ1ͭ

Slide 15

Slide 15 text

•Rive https://rive.app/ •flare_flutter https://pub.dev/packages/flare_flutter Reference

Slide 16

Slide 16 text

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