{"id":24772981,"url":"https://github.com/definev/boundless_stack","last_synced_at":"2025-09-09T12:43:29.210Z","repository":{"id":246701290,"uuid":"821882147","full_name":"definev/boundless_stack","owner":"definev","description":null,"archived":false,"fork":false,"pushed_at":"2024-08-13T20:21:14.000Z","size":355,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-29T04:37:25.570Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/definev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-29T18:02:51.000Z","updated_at":"2024-12-01T12:49:28.000Z","dependencies_parsed_at":"2024-06-29T20:24:39.437Z","dependency_job_id":"d329dcf9-1968-4034-8eed-eb3017aa72b8","html_url":"https://github.com/definev/boundless_stack","commit_stats":null,"previous_names":["definev/boundless_stack"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/definev%2Fboundless_stack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/definev%2Fboundless_stack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/definev%2Fboundless_stack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/definev%2Fboundless_stack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/definev","download_url":"https://codeload.github.com/definev/boundless_stack/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247809991,"owners_count":20999821,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-29T04:34:50.194Z","updated_at":"2025-09-09T12:43:29.173Z","avatar_url":"https://github.com/definev.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Boundless Stack: A Flutter Package for Infinite Scrolling with Scalable Content\n\n**Boundless Stack** is a Flutter package that enables seamless scrolling and scaling of content within a two-dimensional space. Imagine a canvas where you can scroll endlessly in all directions, zoom in and out, and arrange items with layers and movement. This package provides the foundation for creating infinite scrolling experiences for brainstorming, data visualization, interactive maps, and more.\n\n### Features\n\n* **Infinite Scrolling:** Boundless Stack offers an infinite two-dimensional scrolling area for your widgets. Users can explore content in all directions without constraints. \n* **Zoom Functionality:** Allows users to scale the content displayed on the canvas by zooming in and out, providing flexibility for exploring details or getting a broader perspective.\n* **Layer Support:** Easily position widgets on different layers to create visual depth and a sense of hierarchy within your application.\n* **Movement:** The package enables drag-and-drop interactions with the widgets, allowing users to reposition them across the infinite canvas. \n* **Background Customization:** Users can add custom backgrounds (using the `backgroundBuilder` property) to create a visually appealing environment for their content.\n\n### Installation\n\nTo use Boundless Stack in your Flutter project, follow these steps:\n\n1. **Add the dependency:** In your `pubspec.yaml`, add the following line under `dependencies`: \n    ```yaml\n    boundless_stack: ^0.0.1 \n    ```\n2. **Run `pub get` to fetch the package.**\n\n### Usage\n\nHere's a simple example to illustrate how to implement Boundless Stack:\n\n```dart\nimport 'package:boundless_stack/boundless_stack.dart';\nimport 'package:flutter/material.dart';\n\nvoid main() {\n  runApp(const MyApp());\n}\n\nclass MyApp extends StatelessWidget {\n  const MyApp({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return const MaterialApp(\n      home: HomeView(),\n    );\n  }\n}\n\nclass HomeView extends StatefulWidget {\n  const HomeView({super.key});\n\n  @override\n  State\u003cHomeView\u003e createState() =\u003e _HomeViewState();\n}\n\nclass _HomeViewState extends State\u003cHomeView\u003e {\n  final ValueNotifier\u003cdouble\u003e _scaleFactor = ValueNotifier(1.0);\n  final List\u003cStackPositionData\u003e _data = [\n    for (int index = 0; index \u003c 10; index += 1)\n      StackPositionData(\n        id: 'item_$index',\n        layer: index,\n        offset: Offset(index * 200.0, index * 200.0),\n        height: 200,\n        width: 200,\n      )\n  ];\n\n  late List\u003cGlobalKey\u003e _globalKeys = [\n    for (int index = 0; index \u003c 10; index += 1)\n      GlobalKey(debugLabel: 'key_$index'),\n  ];\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      body: ZoomStackGestureDetector(\n        enableMoveByTouch: true,\n        enableMoveByMouse: true,\n        scaleFactor: _scaleFactor,\n        onScaleFactorChanged: (scaleFactor) =\u003e\n            setState(() =\u003e _data = _data.map((data) {\n                  return data.copyWith(\n                    width: data.width! * scaleFactor,\n                    height: data.height! * scaleFactor,\n                  );\n                }).toList()),\n        stack: (stackKey, scaleFactor) =\u003e BoundlessStack(\n          key: stackKey,\n          cacheExtent: 0,\n          backgroundBuilder: gridBackgroundBuilder(\n            gridThickness: 1.0,\n            gridWidth: 100,\n            gridHeight: 100,\n            gridColor: Colors.green,\n            scaleFactor: scaleFactor,\n          ),\n          horizontalDetails: ScrollableDetails.horizontal(),\n          verticalDetails: ScrollableDetails.vertical(),\n          delegate: BoundlessStackListDelegate(\n            children: [\n              for (int index = 0; index \u003c 10; index += 1)\n                StackPosition(\n                  key: _globalKeys[index],\n                  notifier: ValueNotifier(_data[index]),\n                  scaleFactor: scaleFactor,\n                  moveable: StackMove(\n                      snap: StackSnap.square(snap: 50.0)), // Snap to grid\n                  builder: (context, notifier, child) =\u003e Container(\n                    key: _globalKeys[index],\n                    height: 200,\n                    width: 200,\n                    color: Colors.red,\n                    child: Center(\n                      child: Text('Item $index'),\n                    ),\n                  ),\n                ),\n            ],\n          ),\n          scaleFactor: scaleFactor,\n        ),\n      ),\n    );\n  }\n}\n```\n\nIn this example:\n\n1. We define a `ValueNotifier` for the scale factor to control the zoom level.\n2. A list of `StackPositionData` is generated to hold the data for each element (layer, position, and size). \n3. We use `StackPosition` with a `StackMove` to enable the ability to drag elements around the canvas.\n4. We use `gridBackgroundBuilder` to create a grid background.\n\n**Important:** You can use any Flutter widget inside a `StackPosition` to represent the content of each item within the `BoundlessStack`.\n\n### Configuration\n\n* **`backgroundBuilder`:** Allows you to define a custom background builder to render content behind the stack. It receives the current horizontal and vertical viewport offsets and returns a Flutter widget. (See the example for using the `gridBackgroundBuilder`). \n* **`foregroundBuilder`:** This works like `backgroundBuilder`, but renders a widget on top of the stack content.\n* **`cacheExtent`:** Controls the number of items around the current viewport position to pre-render (similar to the `cacheExtent` in a regular `ListView`). Defaults to `0`.\n* **`scaleFactor`:** This double value controls the initial zoom level.\n* **`horizontalDetails` and `verticalDetails`:** Allow users to define more complex behaviours for scrolling using `AxisDirection`, `ScrollPhysics`, `ScrollController`, etc.\n* **`diagonalDragBehavior`:** Enables or restricts diagonal movement (default `DiagonalDragBehavior.free`).\n* **`moveable`:** Use a `StackMove` with a `StackSnap` to implement snap-to-grid functionality for item movements.\n* **`resizable`:** This property controls the resizing ability of individual stack items.\n\n### Documentation\n\nFor more detailed documentation, please refer to:\n\n* [API Documentation](doc/API.md): Comprehensive API reference for all classes and methods.\n* [Architecture](doc/ARCHITECTURE.md): Detailed explanation of the internal architecture and design decisions.\n\n### Contribution Guidelines\n\nContributions to Boundless Stack are welcomed. Here's how you can contribute:\n\n1. **Fork the repository.**\n2. **Create a branch for your feature.**\n3. **Write your code and tests.**\n4. **Open a Pull Request.**\n\nFor detailed contribution guidelines and code style recommendations, please refer to the [CONTRIBUTING.md](CONTRIBUTING.md) file (which should be included in the repository if you are accepting contributions). \n\n### Testing Instructions\n\nThe package includes unit and integration tests within the `example` module:\n\n* **Run the example application:** `flutter run -d web --target=example/web` (or use your desired platform) to view the example code.\n* **Execute unit tests:**  `flutter test` from the project root.\n\n### License\n\nBoundless Stack is released under the MIT License. See the [LICENSE](LICENSE) file for more information. \n\n### Acknowledgements and Credits\n\n* **Flutter:** [https://flutter.dev](https://flutter.dev)\n* **Boxy:** [https://pub.dev/packages/boxy](https://pub.dev/packages/boxy)\n* **Dart Mappable:** [https://pub.dev/packages/dart_mappable](https://pub.dev/packages/dart_mappable)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdefinev%2Fboundless_stack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdefinev%2Fboundless_stack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdefinev%2Fboundless_stack/lists"}