Flutter：如何显示和隐藏 Lottie 动画

Question

我已经成功地展示了 Lottie，如下所示：

但是问题来了，如何通过按钮触发Lottie的显示和隐藏呢？例如Lottie不显示，但是当我点击Show Lottie button时，Lottie会显示，当我点击Hide Lottie button时，Lottie会隐藏。

这是我的完整代码：

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Lottie Flutter'),
        ),
        body: Container(
          width: double.infinity,
          child: Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              SizedBox(
                width: 50,
                height: 50,
                child: Lottie.asset(
                  'assets/10219-notification-dot.json',
                ),
              ),
              Row(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  RaisedButton(
                    onPressed: () {},
                    child: Text('Show Lottie'),
                  ),
                  RaisedButton(
                    onPressed: () {},
                    child: Text('Hide Lottie'),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

您可以使用 bool 和 if else 条件来显示它。下面的代码也许可以给出一个想法。

  var show = true;
    ...
  class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
    ....
     show ?? Lottie.asset(
                      'assets/10219-notification-dot.json',
                    ),
    ....

    RaisedButton(
                        onPressed: () {
    setState(){show = true}
    },
                        child: Text('Show Lottie'),
                      ),
                      RaisedButton(
                        onPressed: () {
    setState(){show = false}
    },
                        child: Text('Hide Lottie'),
                      ),

Answer 2

我使用 setState 和 Visibility 小部件解决了这个问题，这是我的代码：

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  var _isShow = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Lottie Flutter'),
        ),
        body: Container(
          width: double.infinity,
          child: Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              SizedBox(
                width: 50,
                height: 50,
                child: Visibility(
                  visible: _isShow,
                  child: Lottie.asset(
                    'assets/10219-notification-dot.json',
                  ),
                ),
              ),
              Row(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  RaisedButton(
                    onPressed: () {
                      setState(() {
                        _isShow = true;
                      });
                    },
                    child: Text('Show Lottie'),
                  ),
                  RaisedButton(
                    onPressed: () {
                      setState(() {
                        _isShow = false;
                      });
                    },
                    child: Text('Hide Lottie'),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 3

使用 showDialogue 方法。 child -> GestureDetector，点击它会弹出。

代码如下：

showDialog(
           context: context,
           builder: (context) {
             return GestureDetector(
               onTap: () {
                 Navigator.pop(context);
               },
               child: Lottie.asset('assets/animations/success.json',
                   repeat: false, animate: true),
             );
           });
     });

Flutter：如何显示和隐藏 Lottie 动画

Flutter: How to show and hide the Lottie animation

flutter

lottie