Flutter CrosssFade Animation Example

3
User Management System
Learn Kotlin, Retrofit, MVVM and MySQL using this all-in-one app. It is designed to be beginner friendly.

Learn about cross fade animations by looking at the following open source example. The example animates a simple image using cross fade animations. AnimatedCrossFade is the class used and it is already present in the material.dart package. Several parameters will need to be passed to it like size curve, first curve, secpnd curve, duration and children.

Demo
Check the demo below:

Below is the full source code:

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    home: new AnimatedCrossFadeExample("Animated Crossfrade Demo")
  ));
}
class AnimatedCrossFadeExample extends StatefulWidget {
  final String title;

  AnimatedCrossFadeExample(this.title);

  @override
  _AnimatedCrossFadeExampleState createState() =>
      _AnimatedCrossFadeExampleState();
}

class _AnimatedCrossFadeExampleState extends State<AnimatedCrossFadeExample> {
  bool _first = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        child: Center(
          child: Column(
            children: <Widget>[
              FlatButton(
                  onPressed: () {
                    setState(() {
                      _first = !_first;
                    });
                  },
                  child: Text("Animate")),
              AnimatedCrossFade(
                sizeCurve: ElasticOutCurve(),
                firstCurve: Curves.decelerate,
                secondCurve: Curves.decelerate,
                duration: const Duration(seconds: 3),
                firstChild: const FlutterLogo(
                    style: FlutterLogoStyle.horizontal, size: 100.0),
                secondChild: const FlutterLogo(
                    style: FlutterLogoStyle.markOnly, size: 100.0),
                crossFadeState: _first
                    ? CrossFadeState.showFirst
                    : CrossFadeState.showSecond,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

How to run

This is a dead simple example. All you need to do is:

  1. Copy the above code and paste it into your main.dart file.

That's it, then run.

CREDIT: This example was created by @ibhavikmakwana from Github.

Good day.

Learn Android Retrofit using our course

Android MySQL Retrofit2 Multipart CRUD,Search,Pagination rating

When I was a 2nd year Software Engineering student, I buillt a now defunct online tool called Camposha(from Campus Share) using my then favorite language C#(ASP.NET) to compete OLX in my country(Kenya). The idea was to target campus students in Kenya. I got a few hundred signups but competing OLX proved too daunting. I decided to focus on my studies, learning other languages like Java,Python,Kotlin etc while meanwhile publishing tutorials at my YouTube Channel ProgrammingWizards TV which led to this site(camposha.info). Say hello or post me a suggestion: oclemmi@gmail.com . Follow me below; Github , and on my channel: ProgrammingWizards TV

We will be happy to hear your thoughts

Leave a reply

+ sixteen = 25

Reset Password
Compare items
  • Total (0)
Compare
0
Shopping cart