flutter動畫flare

具體代碼地址flare,項目有平時練習的一些dom,歡迎star,issue

如上:

1.我們需要用的是 flare 官網在Explore裏面找到需要使用的動畫點擊進入

2.點擊OPEN FLARE進入編輯頁面,

3.

4.

5.將下載的文件放在項目根目錄新建一個 flrs 文件夾下

6.pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  flare_flutter: ^1.5.0
  ...
  assets:
     - flrs/

7.代碼

import 'package:flutter/material.dart';
import 'package:flare_flutter/flare_actor.dart';

class BtnFlare extends StatefulWidget {
  @override
  _BtnFlareState createState() => _BtnFlareState();
}

class _BtnFlareState extends State<BtnFlare> {
  String _currentAnimation = 'normal';
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          width: 100,
          height: 100,
          child: GestureDetector(
            child: FlareActor(
              "flrs/btn.flr",
              animation: _currentAnimation,
              fit: BoxFit.contain,
              callback: (animationName) {
                switch (animationName) {
                  case "tap":
                    break;
                  case "success":
                    break;
                  case "fail":
                    break;
                }
              },
            ),
          ),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              color: Colors.green,
              onPressed: () {
                setState(() {
                  _currentAnimation = "success";
                });
              },
              child: Text(
                'Success',
                style: TextStyle(color: Colors.white),
              ),
            ),
            RaisedButton(
              onPressed: () {
                setState(() {
                  _currentAnimation = "tap";
                });
              },
              child: Text(
                'Tap',
                style: TextStyle(color: Colors.white),
              ),
            ),
            RaisedButton(
              color: Colors.orange,
              onPressed: () {
                setState(() {
                  _currentAnimation = "loading";
                });
              },
              child: Text(
                'Loading',
                style: TextStyle(color: Colors.white),
              ),
            ),
            RaisedButton(
              color: Colors.red,
              onPressed: () {
                setState(() {
                  _currentAnimation = "fail";
                });
              },
              child: Text(
                'Fail',
                style: TextStyle(color: Colors.white),
              ),
            )
          ],
        )
      ],
    );
  }
}

具體代碼地址flare,項目有平時練習的一些dom,歡迎star,issue