ecommerce_design_system_package 1.0.5 ecommerce_design_system_package: ^1.0.5 copied to clipboard
Design system package for Flutter applications, organized according to Atomic Design principles.
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.