Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Creating Flutter Animations with Rive

Creating Flutter Animations with Rive

potatotips 70での発表資料です。
「Creating Flutter Animations with Rive」
#potatotips

Avatar for Kenichi Kambara

Kenichi Kambara

July 10, 2020
Tweet

More Decks by Kenichi Kambara

Other Decks in Technology

Transcript

  1. About me •Mobile App Development •Technical Speeches •Technical Writings •[Official]

    Evangelist at NTT TechnoCross •[Private] iplatform.org Kenichi Kambara (@korodroid) 
  2. 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
  3. 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), ),
  4.  Adding the package into Flutter Project dependencies: flutter: sdk:

    flutter ## Flare flare_flutter: pubspec.yaml Rive
  5.  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
  6.  •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
  7. 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