Atomic Flutter Package

Atomic Flutter Package is a design system package for Flutter applications, organized according to Atomic Design principles. It provides a structured hierarchy of UI components that are modular, reusable, and easy to integrate into your Flutter projects.

Getting started

Installation

Add ecommerce_design_system_package to your pubspec.yaml file:

dependencies:
  ecommerce_design_system_package: ^1.0.0

Then,

run flutter pub get

Usage

Atoms

Atoms are the basic building blocks of the design system.

Example:

import 'package:ecommerce_design_system_package/atoms/skeleton_widget.dart';

SkeletonWidget(
  height: 100,
  width: 100,
);

Molecules

Molecules are relatively simple groups of UI elements functioning together as a unit.

Example:

import 'package:ecommerce_design_system_package/molecules/detail_card.dart';

ProductCard(
  cardData: ProductCardModel(
      id: 1,
      title: 'Title test',
      image: 'assets/molecule.png',
      subtitle: 'Subtitle test'),
);

Organisms

Organisms are relatively complex UI components composed of groups of molecules and/or atoms.

Example:

import 'package:ecommerce_design_system_package/organisms/login_form.dart';

LoginForm(
  usernameController: TextEditingController(),
  passwordController: TextEditingController(),
  onLogin: () => print('Login button pressed'),
);

Templates

Templates are page-level objects that place components into a layout and articulate the design’s underlying content structure.

Example:

import 'package:ecommerce_design_system_package/templates/login_template.dart';

LoginTemplate(
  usernameController: TextEditingController(),
  passwordController: TextEditingController(),
  onLogin: () => print('Login button pressed'),
);

Pages

Pages are specific instances of templates that populate the layout with real content.

Example:

import 'package:ecommerce_design_system_package/pages/login_page.dart';

LoginPage(
  handleLogin: () => print('Login button pressed'),
  usernameController: TextEditingController(),
  passwordController: TextEditingController(),
);

Documentation

• For more detailed examples and documentation, check out the GitHub repository.

Contributing

Contributions are welcome! Please fork the repository and create a pull request with your changes.

License

This package is licensed under the MIT License. See the LICENSE (https://choosealicense.com/licenses/mit/) file for more details.