AnimatedCrossFade Widget in Flutter

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

AnimatedCrossFade Widget in Flutter

0 Comments

Recent Comments