https://github.com/mongoose13/fling-gallery
A Flutter widget that lays out its children into tight rows.
https://github.com/mongoose13/fling-gallery
flutter flutter-ui flutter-widget
Last synced: 3 months ago
JSON representation
A Flutter widget that lays out its children into tight rows.
- Host: GitHub
- URL: https://github.com/mongoose13/fling-gallery
- Owner: mongoose13
- License: bsd-3-clause
- Created: 2025-02-18T17:34:42.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2025-02-18T17:49:46.000Z (4 months ago)
- Last Synced: 2025-02-18T18:41:54.540Z (4 months ago)
- Topics: flutter, flutter-ui, flutter-widget
- Language: Dart
- Homepage:
- Size: 16.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Fling Gallery
A Flutter widget that lays out its children into tight rows.
[](https://app.circleci.com/pipelines/bitbucket/mongoose13/fling-gallery?branch=master&filter=all)
[](https://www.codacy.com/bb/gelbermungo/fling-gallery/dashboard)
[](https://pub.dev/packages/fling_gallery)
## Overview
This widget creates rows for its children not unlike a Wrap widget. However, unlike the Wrap widget, this widget tries to size its children so that they fit perfectly on each row. This widget is expected to be used with children that maintain their aspect ratios, such as [Image](https://api.flutter.dev/flutter/widgets/Image-class.html) or [AspectRatio](https://api.flutter.dev/flutter/widgets/AspectRatio-class.html).
We offer two algorithms: greedy and A*. A* will generally give better results, but if performance is a concern, consider using the greedy algorithm instead. The A* algorithm also tends to shift things around more dramatically as the gallery resizes, so if smoothness during resize is a concern you may be better off with the greedy algorithm. You can play with both on the demo page.
[Demo Page](https://fling-gallery-demo.web.app/)
## Usage
### Installation
Install the widget the usual way:
> $> flutter pub add fling_gallery
...or add it manually to your `pubspec.yaml` under "dependencies", then:
> $> flutter pub get
You can then import it in your code:
```dart
import 'package:fling_gallery/fling_gallery.dart';
```
### Instantiation
Place the widget in a constrained space of your widget tree. It will (generally) attempt to take up as much horizontal space as it is given. It will take up as much vertical space as it needs given the horizontal constraints, limited by the vertical constraints you give it.
Ensure the children are aspect ratio aware for best results. The built-in `Image` class does this, but you can also wrap your children in `AspectRatio` widgets.
Choose an implementation of `GalleryLayout` you want to use, and pass that along with the children you want to lay out to its constructor.
For example:
```dart
@override
Widget build(BuildContext context) {
// ...
Gallery(
layoutStrategy: AStarGalleryLayout(
minRatio: 0.7,
maxRatio: 1.3,
horizontalSpacing: 4.0,
verticalSpacing: 4.0,
preferredRowHeight: 300.0,
),
children: [
// ...
],
)
// ...
}
```