https://github.com/rustdesk-org/dynamic_layouts
https://github.com/flutter/packages/tree/main/packages/dynamic_layouts
https://github.com/rustdesk-org/dynamic_layouts
Last synced: 6 months ago
JSON representation
https://github.com/flutter/packages/tree/main/packages/dynamic_layouts
- Host: GitHub
- URL: https://github.com/rustdesk-org/dynamic_layouts
- Owner: rustdesk-org
- License: bsd-3-clause
- Created: 2023-09-27T00:31:52.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-09-27T00:34:26.000Z (over 1 year ago)
- Last Synced: 2024-10-18T23:31:48.556Z (8 months ago)
- Language: Dart
- Size: 216 KB
- Stars: 2
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
A package that provides two dynamic grid layouts: wrap and staggered.
## Features
This package provides support for multi sized tiles and different layouts.
Currently the layouts that are implemented in this package are `Stagger` and
`Wrap`.
### Stagger Features
`DynamicGridView` is a subclass of `GridView` and gives access
to the `SliverGridDelegate`s that are already implemented in the Flutter
Framework. Some `SliverGridDelegate`s are `SliverGridDelegateWithMaxCrossAxisExtent` and
`SliverGridDelegateWithFixedCrossAxisCount`. This layout can be used with
`DynamicGridView.stagger`.
### Wrap Features
The Wrap layout is able to do runs of different widgets and adapt accordingly with
the sizes of the children. It can leave spacing with `mainAxisSpacing` and
`crossAxisSpacing`.
Having different sizes in only one of the axis is possible by
changing the values of `childCrossAxisExtent` and `childMainAxisExtent`. These
values by default are set to have loose constraints, but by giving `childCrossAxisExtent` a specific value like
100 pixels, it will make all of the children 100 pixels in the main axis.
This layout can be used with `DynamicGridView.wrap` and with
`DynamicGridView.builder` and `SliverGridDelegateWithWrapping` as the delegate.
## Getting started
### Depend on it
Run this command with Flutter:
```sh
$ flutter pub add dynamic_layouts
```
### Import it
Now in your Dart code, you can use:
```sh
import 'package:dynamic_layouts/dynamic_layouts.dart';
```
## Usage
Use `DynamicGridView`s to access these layouts.
`DynamicGridView` has some constructors that use `SliverChildListDelegate` like
`.wrap` and `.stagger`. For a more efficient option that uses `SliverChildBuilderDelegate` use
`.builder`, it works the same as `GridView.builder`.
### Wrap
The following are simple examples of how to use `DynamicGridView.wrap`.
The following example uses `DynamicGridView.builder` with
`SliverGridDelegateWithWrapping`.
By using `childCrossAxisExtent` and `childMainAxisExtent` the main axis
can be limited to have a specific size and the other can be set to loose
constraints.
### Stagger
The `Stagger` layout can be used with the constructor
`DynamicGridView.stagger` and still use the delegates from `GridView`
like `SliverGridDelegateWithMaxCrossAxisExtent` and
`SliverGridDelegateWithFixedCrossAxisCount`.
## Additional information
The staggered layout is similar to Android's [StaggeredGridLayoutManager](https://developer.android.com/reference/androidx/recyclerview/widget/StaggeredGridLayoutManager), while the wrap layout
emulates iOS' [UICollectionView](https://developer.apple.com/documentation/uikit/uicollectionview).
The inner functionality of this package is exposed, meaning that other dynamic layouts
can be created on top of it and added to the collection. If you want to contribute to
this package, you can open a pull request in [Flutter Packages](https://github.com/flutter/packages)
and add the tag "p: dynamic_layouts".