This article doesn’t complete fully, just a idea to implement it. :) You can improve it by add more animation, alpha and whatever you want to make awesome effect. Let checkout source and run to get smoothest.

First, define node:

class Node {

int id;

double size;

Offset position;

Direction direction;

}

One node has one id, size, position and direction which will be generated randomly.

Next define direction moving. One node has 8 direction for moving: top, right, bottom, left, top-right, bottom-right, top-left, bottom-left.

Full direction of node

When node move to Screen’s edge, we need to change to other available directions.

Apply moving

Add connection list to node. One node has circle scan to detect another node in there.

How to detect B in A, follow formula

Apply connection line

Increase nodes

Get demo here.

Source:

Wrap source to main.dart file

import 'package:flutter/widgets.dart';

import 'package:flutter/material.dart';

import 'demo3.dart';



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



class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return new MaterialApp(

title: 'Flutter Demo',

theme: new ThemeData(

primarySwatch: Colors.blue,

),

home: new DemoPage(),

);

}

}

Repo here: