Skip to content

[Flutter] Use FadeTransition Component To Make Flicker Effect

Last Updated on 2021-10-17 by Clay

FadeTransition is an animate effect I read when I learning the Flutter animation. Although I never have a requirement to use it, but it is very easy-to-use, so recorded by the way.

Simply put it, FadeTransition is similar to AnimatedOpacity ([Flutter] How To Fade-in And Fade-out Components), both are methods to control the transparency of components.

The difference is that FadeTransition can set a period to make the change of component transparency change repeatedly, forming a flickering animation effect.


FadeTransition

The use of FadeTransition is similar to most Flutter animations, we need to prepare the two objects:

  • AnimationController: The parameters such as period
  • Animation<double>: The curve/animation of component

The explanation is a bit complicated, and it should be clear if you read the following code:

import 'package:flutter/material.dart';

// Main
void main() => runApp(MyApp());

// MyApp
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}


// HomePage
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}


// _HomePageState
class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
  // Controller
  late AnimationController _controller = AnimationController(
    vsync: this,
    duration: Duration(seconds: 1),
  )..repeat(reverse: true);

  // Animation
  late Animation<double> _animation = CurvedAnimation(
    parent: _controller,
    curve: Curves.easeInOut
  );

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: FadeTransition(
          opacity: _animation,
          child: Container(
            height: 100,
            width: 100,
            color: Colors.red,
          ),
        ),
      ),
    );
  }
}


Output:


References


Read More

Tags:

Leave a Reply