AnimatedCrossFade Widget in Flutter

This Article is posted by seven.srikanth at 14-03-2019 05:39:05

In this article, I'm going to share an example of AnimatedCorssFade Widget in Flutter. 
Here is how the final output is going to look.
Below is the full code of this example from main.dart file. In order to run this project locally, all you need to do is create a project and copy paste the below code in Lib\main.dart file.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
final title = 'AnimatedCrossFade example';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: title,
home: MyHomePage(title: title,),
);
}
}
class MyHomePage extends StatefulWidget {
final String title;
const MyHomePage({Key key, this.title}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool _first = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: AnimatedCrossFade(
duration: const Duration(seconds: 1),
firstChild: const FlutterLogo(style: FlutterLogoStyle.horizontal, size: 100.0),
secondChild: const FlutterLogo(style: FlutterLogoStyle.stacked, size: 100.0),
crossFadeState: _first ? CrossFadeState.showFirst : CrossFadeState.showSecond,
)
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.transform),
onPressed: () {
setState(() {
_first = !_first;
});
}
),
);
}
}
Hope this example will be useful to you.
Thanks,
Srikanth

Tags: AnimatedCrossFade Widget in Flutter; animation examples;



0 Comments
Login to comment.
Recent Comments

Be the first to Comment. You can ask a Query or Share your toughts or Just say thanks.



Recent Articles


How to deploy flutter web site on GitHub using peanut

Posted by nikhilchaudhary12155 on 13 Oct 2019 Article


AnimatedPositioned Widget Example in Flutter

Posted by seven.srikanth on 10 Oct 2019 Article


Flutter Open-Source and directory lists

Posted by nishantkotatech on 09 Oct 2019 Article


Flutter Travelling Couple Leading Page - Flutter Web Series 3

Posted by nikhilchaudhary12155 on 05 Oct 2019 Article



© 2018 - Fluttercentral | Email to me - Seven.srikanth@gmail.com