create_atom 2.0.0

An animated widget that displays atom with three electrons revolving around a nucleus at its center.

create_atom |

An animated widget that displays atom with a three electrons revolving around a nucleus at its center.

size: 200	size: 100	size: 50

Some Famous logos using Atom

Name	Code	Logo
React Logo	Atom( size: 200.0, orbit1Angle: math.pi / 2, orbit2Angle: math.pi / 6, orbit3Angle: - math.pi / 6, orbitsColor: Color(0xFF00D8FF), electronsColor: Color(0xFF00D8FF), nucleusColor: Color(0xFF00D8FF), ),
Atom Text Editor Logo	Container( width: 300.0, height: 300.0, color: Color(0xFF323232), child: Atom( size: 200.0, orbit1Angle: math.pi / 1.9, orbit2Angle: math.pi / 5, orbit3Angle: -math.pi / 7, orbitsColor: Color(0xFFEED9B7), electronsColor: Color(0xFFEED9B7), nucleusColor: Color(0xFFEED9B7), ), ),

Features

• Can be scaled upto any size within parent widget boundaries
• Smooth animations with mathematically pre-derived ellipse path equation
• Transparent background for flexible usage with colors
• 3 electron orbits (support for more may come later)
• Orbits angle can be changed
• Orbits color can be changed (support for individual color may come later)
• Nucleus color can be changed
• Electrons color can be changed (support for individual color may come later)
• Individual electron's revolution duration can be changed
• Any widget can be added in the center instead of nucleus

Getting Started

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  create_atom: ^2.0.0

In your library add the following import:

import 'package:create_atom/create_atom.dart';

After that run flutter pub get

For help getting started with Flutter, view the online documentation.

Usage

...
child: Atom(
  size: 100.0,
),
...

Yeah, just like that. All properties are optional except size property.

You will get a black atom by default.

centerWidget property usage -

Assign centerWidget with any widget to display that Widget instead of nucleus.

...
child: Atom(
  size: 100.0,
  centerWidget: Text("At Center"),
),
...

Note: If both nucleusColor and centerWidget are set then the Widget will get preference.

Properties

Definitions -

Property	Definition
size	Defines size of the atom's container
orbit1angle	Defines 1st orbit's angle in radians
orbit2angle	Defines 2nd orbit's angle in radians
orbit3angle	Defines 3rd orbit's angle in radians
nucleusColor	Defines Nucleus Color
orbitsColor	Defines Orbits Color
electronsColor	Defines Electrons Color
animDuration1	Defines Animation Duration of 1st electron
animDuration2	Defines Animation Duration of 2nd electron
animDuration3	Defines Animation Duration of 3rd electron
centerWidget	Defines a widget to display at center

Types and Initial Values -

Property	Type	Initial Value
size	double	null (required)
orbit1angle	double	0.0 (Radians), 0.0 (Degrees)
orbit2angle	double	pi/3 (Radians), 60.0 (Degrees)
orbit3angle	double	-pi/3 (Radians), -60.0 (Degrees)
nucleusColor	Color	Colors.black
orbitsColor	Color	Colors.black
electronsColor	Color	Colors.black
animDuration1	Duration	Duration(seconds: 1)
animDuration2	Duration	Duration(seconds: 2)
animDuration3	Duration	Duration(seconds: 3)
centerWidget	Widget	null

Example App

Checkout here - https://abhi011999.github.io/create_atom_flutter/

Code

Changelog

Breaking Changes from v1.4.0 kindly see changelog

See CHANGELOG.md for recent changes.

Contributions

You can be of great help if you want to improve or add anything !

• If you found a bug, open an issue.
• If you have a feature request, open an issue.
• If you want to contribute, submit a pull request.

License

Package and all code within licensed under MIT License.