Flutter: How to show and hide the Lottie animation - flutter

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

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 2

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