create_atom 2.0.0

Flutter Android iOS web

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

create_atom | flutter flutter flutter #

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

2.0x 1.0x 0.5x
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),
        ),
        
react-logo

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),
          ),
        ),
        
atom-editor-logo

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 -

PropertyDefinition
sizeDefines size of the atom's container
orbit1angleDefines 1st orbit's angle in radians
orbit2angleDefines 2nd orbit's angle in radians
orbit3angleDefines 3rd orbit's angle in radians
nucleusColorDefines Nucleus Color
orbitsColorDefines Orbits Color
electronsColorDefines Electrons Color
animDuration1Defines Animation Duration of 1st electron
animDuration2Defines Animation Duration of 2nd electron
animDuration3Defines Animation Duration of 3rd electron
centerWidgetDefines a widget to display at center

Types and Initial Values -

PropertyTypeInitial Value
sizedoublenull (required)
orbit1angledouble0.0 (Radians), 0.0 (Degrees)
orbit2angledoublepi/3 (Radians), 60.0 (Degrees)
orbit3angledouble-pi/3 (Radians), -60.0 (Degrees)
nucleusColorColorColors.black
orbitsColorColorColors.black
electronsColorColorColors.black
animDuration1DurationDuration(seconds: 1)
animDuration2DurationDuration(seconds: 2)
animDuration3DurationDuration(seconds: 3)
centerWidgetWidgetnull

Example App #

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

Random Atoms Atoms Playground

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.

2
likes
100
pub points
8%
popularity

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

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

abh.idubey011999@gmail.com

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on create_atom