Hello Guys, In this Post we are going to learn how to use Lottie animations in Flutter
step 1: Create Flutter Application
Step 2: Lottie Configuration
add lottie dependencies in pubspec.yaml file under dependencies
lottie_flutter: ^0.2.0
|
Now download required Lottie json files and put inside assets folder
and configure those files in pubspec.yaml file
assets:
- assets/lottie_success.json
- assets/lottie_error.json
- assets/lottie_gift.json
|
Step 3: Create UI to handle events, here i have created UI screen with display three buttons
SafeArea(
child: Scaffold(
backgroundColor: Colors.grey,
appBar: AppBar(backgroundColor: Colors.pink,title: Text("Lottie Animations"),),
key: _scafoldkey,
body: Container(
width: double.infinity,
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
RaisedButton(
padding: EdgeInsets.all(10),
color: Colors.green,
child: Text("Success",style: TextStyle(color: Colors.white,fontSize: 20),),
onPressed: (){
},
),
SizedBox(height: 20,),
RaisedButton(
padding: EdgeInsets.all(10),
color: Colors.red,
child: Text("Failure",style: TextStyle(color: Colors.white,fontSize: 20),),
onPressed: (){
},
),
SizedBox(height: 20,),
RaisedButton(
padding: EdgeInsets.all(10),
color: Colors.brown,
child: Text("Gift",style: TextStyle(color: Colors.white,fontSize: 20),),
onPressed: (){
},
),
],
),
),
),
)
|
Step 4: Generate LottieComposition
Here on Tap on each button display Dialog
ThisTo show Lottie animations we need to read Json file from assets folder and pass these json files as LottieComposition.
Here we are converting JSON file into LottieComposition by
Future loadAsset(String assetName,color) async {
return await rootBundle
.loadString(assetName)
.then>((String data) => json.decode(data))
.then((Map map) => new LottieComposition.fromMap(map)).then((_composition){});
}
|
After fetching the LottieComposition we are showing the dialog with this LottieComposition.
Lottie code will be like below
showDialog(context: _scafoldkey.currentContext,
child: Container(
height: 400,
margin: EdgeInsets.all(20),
color: Colors.white,
child: Column(
children: [
Lottie( composition: _composition,
size: const Size(300.0, 300.0),
coerceDuration: false,
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Material(child: Text("Success"),textStyle: TextStyle(color: color,fontSize: 40)),
),
RaisedButton(
color: color,
child: Text("Continue",style: TextStyle(color: Colors.white,fontSize: 20),),
onPressed: (){
Navigator.pop(_scafoldkey.currentContext);
})
],
),
)
);
|
Step 5: Now run the code and check the result.
Complete code here
void main() => runApp(MyLottie());
class MyLottie extends StatefulWidget{
@override
State createState() {
// TODO: implement createState
return MyLottieState();
}
}
class MyLottieState extends State with SingleTickerProviderStateMixin{
LottieComposition _composition;
AnimationController _controller;
GlobalKey_scafoldkey=GlobalKey();
@override
void initState() {
// TODO: implement initState
super.initState();
_controller=AnimationController(vsync: this,duration: const Duration(milliseconds: 1));
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: SafeArea(
child: Scaffold(
backgroundColor: Colors.grey,
appBar: AppBar(backgroundColor: Colors.pink,title: Text("Lottie Animations"),),
key: _scafoldkey,
body: Container(
width: double.infinity,
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
RaisedButton(
padding: EdgeInsets.all(10),
color: Colors.green,
child: Text("Success",style: TextStyle(color: Colors.white,fontSize: 20),),
onPressed: (){
_loadButtonPressed("assets/lottie_success.json",Colors.green);
},
),
SizedBox(height: 20,),
RaisedButton(
padding: EdgeInsets.all(10),
color: Colors.red,
child: Text("Failure",style: TextStyle(color: Colors.white,fontSize: 20),),
onPressed: (){
_loadButtonPressed("assets/lottie_error.json",Colors.red);
},
),
SizedBox(height: 20,),
RaisedButton(
padding: EdgeInsets.all(10),
color: Colors.brown,
child: Text("Gift",style: TextStyle(color: Colors.white,fontSize: 20),),
onPressed: (){
_loadButtonPressed("assets/lottie_gift.json",Colors.brown);
},
),
],
),
),
),
),
);
}
void _loadButtonPressed(String assetName,color) {
loadAsset(assetName,color).then((LottieComposition composition) {
// setState(() {
_composition = composition;
//});
});
}
Future loadAsset(String assetName,color) async {
return await rootBundle
.loadString(assetName)
.then>((String data) => json.decode(data))
.then((Map map) => new LottieComposition.fromMap(map)).then((_composition){
showDialog(context: _scafoldkey.currentContext,
child: Container(
height: 400,
margin: EdgeInsets.all(20),
color: Colors.white,
child: Column(
children: [
Lottie( composition: _composition,
size: const Size(300.0, 300.0),
coerceDuration: false,
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Material(child: Text("Success"),
textStyle: TextStyle(color: color,fontSize: 40)),
),
RaisedButton(
color: color,
child: Text("Continue",style: TextStyle(color: Colors.white,fontSize: 20),),
onPressed: (){
Navigator.pop(_scafoldkey.currentContext);
})
],
),
)
);
});
}
}
|
|
Article Contributed By :
|
|
|
|
|
5951 Views |
|