ANIMATED APP WITH FLUTTER
TASK 6:
As a part of this task we have to create amazing and unique animation in the application we are creating so here is an app which lets you choose wallpapers for your screen from the options provided.
Well-designed animations make a UI feel more intuitive, contribute to the slick look and feel of a polished app, and improve the user experience. Flutter’s animation support makes it easy to implement a variety of animation types. Many widgets, especially Material Widgets, come with the standard motion effects defined in their design spec, but it’s also possible to customize these effects.
In my app no pre-created pub.dev packages have been used to give the effect of animation.
main.dart
import 'package:AnimationApp/MyAnim.dart';
import 'package:flutter/material.dart';
import 'MyAnim.dart';
import 'MyWallpaper.dart';
void main() {
runApp(MaterialApp(
initialRoute: "/",
routes: {
"/":(context)=> MyA1(),
"/wp":(context)=> Mywp(),
},
debugShowCheckedModeBanner: false,
));
}
MyAnim.dart
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/rendering.dart';
import 'package:fluttertoast/fluttertoast.dart';
class MyA1 extends StatefulWidget {
@override
_MyA1State createState() => _MyA1State();
}
class _MyA1State extends State<MyA1> with SingleTickerProviderStateMixin {
var myanicon;
var animation;
var animation1;
var animation2;
var animation3;
Color color;
MediaQueryData queryData;
var url="https://github.com/ashimachopra20/animationn/raw/main/NicePng_vintage-arrow-png_3021133.png";
var animationx;
var animationy;
@override
void initState() {
super.initState();
myanicon = AnimationController(
vsync: this,
duration: Duration(seconds: 6),
);
print(myanicon);
animation = CurvedAnimation(parent: myanicon, curve: Curves.easeInOutCirc);
animation1=CurvedAnimation(parent: myanicon, curve: Curves.elasticOut);
animation2=CurvedAnimation(parent: myanicon, curve: Curves.elasticOut);
animation3=CurvedAnimation(parent: myanicon, curve: Curves.bounceOut);
animationx=ColorTween(begin:Colors.yellow[300],end: Colors.pink[100]).animate(myanicon);
animationy=ColorTween(begin:Colors.yellow[300],end: Colors.white).animate(myanicon)
..addListener(() {
setState(() {
print(animation.value);
print(animation1.value);
print(animation2.value);
print(animation3.value);
//animation.value;
print(animationx.value);
print(animationy.value);
});
});
//print(animation);
myanicon.forward();
// print(myanicon);
}
@override
void dispose() {
super.dispose();
myanicon.dispose();
}
@override
Widget build(BuildContext context) {
queryData = MediaQuery.of(context);
var mw= queryData.size.width;
var mh=queryData.size.height;
return Scaffold(
body:
Stack(children: <Widget>[
Container(
child:Image.asset('assets/jr-korpa-9XngoIpxcEo-unsplash.jpg')
),
Container(
height: mh*animation.value,
width: mw*animation.value,
child:
RotationTransition(
turns: Tween(begin: 0.0, end: 1.0).animate(myanicon),
child:Image.asset('assets/jr-korpa-9XngoIpxcEo-unsplash.jpg',fit: BoxFit.cover,)
),
),
Center(
child: Container(
decoration: BoxDecoration
( border:Border.all(width: 6.0, color: Colors.black),borderRadius: BorderRadius.circular(25)),
height:100*animation1.value ,
width:200,
margin: EdgeInsets.only(
bottom:(mh/2)*animation2.value/2,
//left:mw*animation.value-mw/2
),
child: Card(
color: Colors.black,
child: Center(
child: Text('WALLPAPER',
style: TextStyle(
color: animationx.value,
fontWeight: FontWeight.bold,fontSize: 30*animation.value
),
),
)
,),
),
),
Center(
child: Container(
margin: EdgeInsets.only(bottom:4*animation3.value),
child: Center(child: Text('EXPLORE THE BACKGROUNDS',textScaleFactor:0.85,style: TextStyle(color:animationy.value,fontWeight: FontWeight.bold,fontSize: 30*animation.value,fontStyle: FontStyle.italic),))),
),
GestureDetector(child:
Center(
child: Container(
margin: EdgeInsets.only(top:300),
height:150,
width: 150*animation3.value,
child:Image.asset("assets/Arrow-PNG-Clipart.png"),
),
),
onTap: (){
Navigator.pushNamed(context,'/wp');
}
,),
Container(
margin: EdgeInsets.only(bottom:15),
height:150,
child:Center(child:Image.asset("assets/—Pngtree—digital social media device phone_5442609.png"),),
),
],
));
}}
Animation used: As the app starts the background image rotates, the size, color, margin, font of the text changes and the png image of the arrow used also changes its position. Everything is controlled by Animation Controller and as we double tap on this arrow the new screen appears which can be moved in horizontal as well as vertical direction.
MyWallpaper.dart
import 'package:flutter/material.dart';
import 'package:flutter_cache_manager/flutter_cache_manager.dart';
import 'package:wallpaper_manager/wallpaper_manager.dart';
class Mywp extends StatefulWidget {
@override
_MywpState createState() => _MywpState();
}
class _MywpState extends State<Mywp>
with SingleTickerProviderStateMixin {
String _wallpaperAsset = 'Unknown';
var myanicon;
var animation;
var animation1;
var animation2;
var animation3;
var animationy;
MediaQueryData queryData;
Future<void> setWallpaperFromAsset() async {
setState(() {
_wallpaperAsset = "Loading";
});
String result;
String assetPath = "assets/cyberpunk.jpg";
result = await WallpaperManager.setWallpaperFromAsset(
assetPath, WallpaperManager.HOME_SCREEN);
// result = 'Failed to get wallpaper.';
// If the widget was removed from the tree while the asynchronous platform
// message was in flight, we want to discard the reply rather than calling
// setState to update our non-existent appearance.
if (!mounted) return;
setState(() {
_wallpaperAsset = result;
});
}
// Platform me
@override
void initState() {
super.initState();
myanicon = AnimationController(
vsync: this,
duration: Duration(seconds: 10),
);
print(myanicon);
animation = CurvedAnimation(parent: myanicon, curve: Curves.easeInOutCirc);
animation1=CurvedAnimation(parent: myanicon, curve: Curves.elasticOut);
animation2=CurvedAnimation(parent: myanicon, curve: Curves.elasticOut);
animation3=CurvedAnimation(parent: myanicon, curve: Curves.easeInCirc);
animationy=ColorTween(begin:Colors.red,end: Colors.blueGrey).animate(myanicon)
..addListener(() {
setState(() {
print(animation.value);
print(animation1.value);
print(animation2.value);
print(animation3.value);
print(animationy.value);
});
});
//print(animation);
myanicon.forward();
// print(myanicon);
}
@override
void dispose() {
super.dispose();
myanicon.dispose();
}
@override
Widget build(BuildContext context) {
queryData = MediaQuery.of(context);
var mw= queryData.size.width;
var mh=queryData.size.height;
var myi=Icon(Icons.check_circle);
return Scaffold(
appBar: AppBar(
title:Center(child: Text('CHOOSE WALLPAPER ',textAlign:TextAlign.center,style:TextStyle(fontStyle: FontStyle.italic),)),
backgroundColor: Colors.black,
),
body: Stack(children: <Widget>[
ListView(
// This next line does the trick.
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
width: mw,
height:30.0,
color: Colors.black,
child:Stack(children:<Widget>[
RotationTransition(
turns: Tween(begin: 0.0, end: 1.0).animate(myanicon),child:Stack(
children: <Widget>[
Center(child: Image.asset('assets/pexels-pixabay-414860.jpg',fit: BoxFit.cover,)),
],)
)]),),
Container(
width: mw,
height:30.0,
color: animationy.value,
child:
ListView(
// This next line does the trick.
scrollDirection: Axis.vertical,
children: <Widget>[
/* Checkbox(
checkColor: Colors.greenAccent,
activeColor: Colors.red,
value: this.valuefirst,
onChanged: (bool value) {
setState(() {
this.valuefirst = value;
});
},
),
*/
SizedBox(height:100, width:100),
Container(
height:300 ,
width:mw,
child:Image.asset('assets/cyberpunk.jpg')),
IconButton(icon: myi, onPressed: setWallpaperFromAsset,splashColor: Colors.red,color:Colors.black ,),
Center(child: Card(child: Text('Wallpaper status: $_wallpaperAsset\n'))),
SizedBox(height:100, width:100),
Container(
height:300 ,
width:mw ,
child:Image.asset('assets/im2.jpg'),
),
IconButton(icon: myi, onPressed: setWallpaperFromAsset,splashColor: Colors.red,color:Colors.black ,),
SizedBox(height:100, width:100),
Container(
height:300 ,
width:mw ,
child:Image.asset('assets/mourad-saadi-GyDktTa0Nmw-unsplash.jpg'),
),
IconButton(icon: myi, onPressed: setWallpaperFromAsset,splashColor: Colors.red,color:Colors.black ,),
SizedBox(height:100, width:100),
Container(
height:300 ,
width:mw ,
child:Image.asset('assets/pexels-andre-moura-4021521.jpg'),
),
IconButton(icon: myi, onPressed: setWallpaperFromAsset,splashColor: Colors.red,color:Colors.black ,),
SizedBox(height:100, width:100),
Container(
height:300 ,
width:mw ,
child:Image.asset('assets/pawel-czerwinski-6lQDFGOB1iw-unsplash.jpg'),
),
IconButton(icon: myi, onPressed: setWallpaperFromAsset,splashColor: Colors.red,color:Colors.black ,),
]
) )]
)
] ) );
}}
The object in the image rotates and revolutes at the same time
As we scroll down to the bottom of the screen the background colour changes from pink to grey, and as we choose the wallpaper the status changes dynamically and now you can see the new wallpaper on your screen.
Above is the link for the video of this app.
You can check out the complete code on my GitHub :)