Flutterにアニメーション画像を表示するには？

Question

Flutterでアニメーション画像をどのようなフォーマットで表示したいですか？現時点では、現在利用可能なソリューションはvideo_loaderの1つしかないようです。これはフルスクリーンでのみ動作しますが、私の使用例に合わない。

どのように私はこれを整理することができますか？

Answer 1

https://ezgif.com/splitを使用してフレームを別々の画像に分割し、それらをpubspec.yamlのアセットとして追加することができます。

次に、Animation<int>を使用して、表示する正しいフレームを選択します。ちらつきを避けるためにgaplessPlayback: trueを設定してください。

たとえば、次のコードはGuillaume Kurkdjianによって作成されたanimated GIFのフレームを表示します。

import 'package:flutter/material.dart'; 

void main() { 
    runApp(new MyApp()); 
} 

class MyApp extends StatelessWidget { 
    @override 
    Widget build(BuildContext context) { 
    return new MaterialApp(
     theme: new ThemeData.dark(), 
     home: new MyHomePage(), 
    ); 
    } 
} 

class MyHomePage extends StatefulWidget { 
    @override 
    State createState() => new MyHomePageState(); 
} 

class MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin { 
    AnimationController _controller; 
    Animation<int> _animation; 

    @override 
    void initState() { 
    _controller = new AnimationController(vsync: this, duration: const Duration(seconds: 5)) 
     ..repeat(); 
    _animation = new IntTween(begin: 0, end: 116).animate(_controller); 
    } 

    Widget build(BuildContext context) { 
    return new Scaffold(
     body: new Column(
     mainAxisAlignment: MainAxisAlignment.center, 
     children: <Widget>[ 
      new AnimatedBuilder(
      animation: _animation, 
      builder: (BuildContext context, Widget child) { 
       String frame = _animation.value.toString().padLeft(3, '0'); 
       return new Image.asset(
       'assets/frame_${frame}_delay-0.04s.png', 
       gaplessPlayback: true, 
      ); 
      }, 
     ), 
      new Text('Image: Guillaume Kurkdjian', style: new TextStyle(fontStyle: FontStyle.italic)), 
     ], 
    ), 
    ); 
    } 
}