Flutter：如何显示和隐藏 Lottie animation

Question

I already success to show the Lottie like below:

But the question is, how to trigger to show and hide the Lottie with a button? For example, the Lottie is not showing, but when I clicking Show Lottie button , the Lottie will show, and when I clicking Hide Lottie button , the Lottie will hide.

This is my full code:

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

I solved this with using setState and Visibility widget, this is my code:

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 2

use a showDialogue method. child -> GestureDetector, which when tapped do a pop.

Code is below:

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

Answer 3

You can use a bool and if else condition to show it. Below code can give an idea perhaphs.

  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'),
                      ),