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.

How To Easily Use Flutter Hero Animation | Flutter Tutorial 2022 | Flutter Widgets

How To Easily Use Flutter Hero Anim...
How To Easily Use Flutter Hero Animation | Flutter Tutorial 2022 | Flutter Widgets

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