Blog

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:

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:

dependencies:
  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:

AtomizedImage(
  // Use an ImageProvider to get the image you want to atomize.
  image: NetworkImage('https://pbs.twimg.com/profile_images/653618067084218368/XlQA-oRl_400x400.jpg'),
)

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:

main.dart

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

Run

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

Reference

Find the reference links below:

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