How to create Animated icon in flutter

Animation Icon in Flutter

Flutter provides a wide range of widgets and features enabling developers to create impressive and dynamic mobile applications. One notable feature is the capability to create animations. In this blog post, we will guide you through the process of creating a blinking animation icon in Flutter using a straightforward yet effective approach. We'll cover everything from setting up your Flutter project to implementing the animation. Let's get started!

Step 1: Creating the Main Application

Next, let's create the main application structure in the lib/main.dart file. This will include setting up the basic UI and our custom animation widget.

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Blinking Icon',
      home: Scaffold(
        backgroundColor: Colors.white,
        body: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Blinking Animation Icon',
                style: GoogleFonts.hammersmithOne(
                  fontSize: 18,
                  color: Color(0xFF12397B),
                  fontWeight: FontWeight.bold,
                  letterSpacing: 2,
                ),
              ),
              SizedBox(height: 50),
              BlinkingIcon(),
            ],
          ),
        ),
      ),
    );
  }
}

Step 2: Creating the Blinking Icon Widget

Let's create the blinking icon widget, which will handle the animation logic and switch between two different icons.

class BlinkingIcon extends StatefulWidget {
  @override
  _BlinkingIconState createState() => _BlinkingIconState();
}

class _BlinkingIconState extends State<BlinkingIcon> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  int _currentWidget = 0;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(milliseconds: 500),
      vsync: this,
    );

    _controller.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        setState(() {
          _currentWidget = (_currentWidget + 1) % 2;
        });
        _controller.forward(from: 0.0);
      }
    });

    _controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 170,
      width: 170,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(100),
        gradient: LinearGradient(
          colors: [
            Color.fromARGB(255, 194, 235, 194),
            Color(0xFFC0F0E5),
          ],
        ),
        boxShadow: [
          BoxShadow(
            color: Color.fromARGB(255, 220, 218, 218),
            blurRadius: 5.0,
          ),
        ],
      ),
      child: Center(
        child: Icon(
          _currentWidget == 0 ? Icons.favorite : Icons.favorite,
          color: _currentWidget == 0 ? Color(0xFFFB928A) : Color(0xFFCF362B),
          size: 50.0,
        ),
      ),
    );
  }
}

With the code in place, you can now run the application. Once your app finishes running, you should see a screen with a blinking animation icon, switching between two different colors.

SOURCE CODE DOWNLOAD GITHUB

SAMPLE VIDEO REFERENCE:

Conclusion

In this step-by-step guide, we have developed a simple yet effective blinking animation icon in Flutter. By following these steps, you can easily incorporate similar animations in your own Flutter projects. Feel free to customize the icons, colors, and animation intervals to match your application's design requirements.

Flutter simplifies the process of creating engaging and dynamic user interfaces, and animations can significantly improve the user experience.Happy coding!