You are currently viewing Flutter image Effect Animations
Photo by John Bakator on Unsplash

Flutter image Effect Animations

In this tutorial we will explore how to apply effects on images via simple examples.

Atomized Image Image Effect

atomized_image is a widget which paints and animates images with particles to achieve an atomized effect.

Here is the demo:

Atomized Image Example

Step 1: Create Project

Start by creating an empty Flutter Project in your favorite editor or IDE.

Step 2: Add Dependency

Install the library by declaring it in your pubspec.yaml as follows:

  atomized_image: 0.1.0

Then sync.

Step : Write Code

Start by importing it:

import 'package:atomized_image/atomized_image.dart';

Then for example you can fetch an image from the network and apply the atomic effect onto it as follows:

  // Use an ImageProvider to get the image you want to atomize.
  image: NetworkImage(''),

To change the image and animates the particles again, just change the image provider with a new one.

Full Example

Here is the full example:


import 'package:atomized_image/atomized_image.dart';
import 'package:flutter/material.dart';
void main() {
class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Atomized Image demo',
      theme: ThemeData(
      home: const MyHomePage(),
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key key}) : super(key: key);
  _MyHomePageState createState() => _MyHomePageState();
class _MyHomePageState extends State<MyHomePage> {
  final List<String> _images = [
  int _index = 0;
  void _nextImage() {
    _index = (_index + 1) % _images.length;
    setState(() {});
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Atomized Image'),
      body: AtomizedImage(
        image: NetworkImage(
      floatingActionButton: FloatingActionButton(
        onPressed: _nextImage,
        tooltip: 'Next',
        child: const Icon(Icons.navigate_next),


Copy the code into your project or download the code in the reference links below.


Find the reference links below:

Number Link
1. [Download]() code
2. Read more
3. Follow code author

Leave a Reply