Flutter 使用 flare

• video
• flare_flutter
• 工做示例

install

dependencies:
  flare_flutter: ^1.5.5
  
assets:
  - assets/flr/switch_daytime.flr

code

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool b = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.deepPurple,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            GestureDetector(
              onTap: () {
                setState(() {
                  b = !b;
                });
              },
              child: SizedBox(
                width: 42,
                height: 42,
                child: FlareActor(
                  "assets/flr/switch_daytime.flr",
                  alignment: Alignment.center,
                  fit: BoxFit.contain,
                  animation: b ? "switch_day" : 'switch_night',
                ),
              ),
            ),
            Switch(
              value: b,
              onChanged: (v) {
                setState(() {
                  b = v;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

導出

export>binary>export