Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/letsar/overflow_view
A widget displaying children in a line until there is not enough space and showing a the number of children not rendered.
https://github.com/letsar/overflow_view
flutter flutter-package flutter-ui flutter-widget
Last synced: 5 days ago
JSON representation
A widget displaying children in a line until there is not enough space and showing a the number of children not rendered.
- Host: GitHub
- URL: https://github.com/letsar/overflow_view
- Owner: letsar
- License: mit
- Created: 2020-08-29T20:39:28.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-10-14T13:56:03.000Z (3 months ago)
- Last Synced: 2024-12-27T19:09:51.978Z (12 days ago)
- Topics: flutter, flutter-package, flutter-ui, flutter-widget
- Language: Dart
- Homepage:
- Size: 9.73 MB
- Stars: 175
- Watchers: 10
- Forks: 23
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# overflow_view
A widget displaying children in a line with an overflow indicator at the end if there is not enough space.
[][pub]
## Features
* Renders children horizontally or vertically.
* Has an overflow indicator builder so that you can display a widget showing the number of elements not rendered.
* Can either constrain the children to the size of the first child or let them have the size they want.
* Children can overlap each other by setting a negative spacing.
![Overview][overview]
## Getting started
In the `pubspec.yaml` of your flutter project, add the following dependency:
```yaml
dependencies:
...
overflow_view:
```
In your library add the following import:
```dart
import 'package:overflow_view/overflow_view.dart';
```
## Usage
```dart
OverflowView(
// Either layout the children horizontally (the default)
// or vertically.
direction: Axis.horizontal,
// The amount of space between children.
spacing: 4,
// The widgets to display until there is not enough space.
children: [
for (int i = 0; i < _counter; i++)
AvatarWidget(
text: avatars[i].initials,
color: avatars[i].color,
)
],
// The overview indicator showed if there is not enough space for
// all chidren.
builder: (context, remaining) {
// You can return any widget here.
// You can either show a +n widget or a more complex widget
// which can show a thumbnail of not rendered widgets.
return AvatarWidget(
text: '+$remaining',
color: Colors.red,
);
},
)
```
### Constructors
There are two constuctors depending on what you want to do.
The `OverflowView` constructor will constrain all children to have the same size as the first one. This can be used for an avatar list for example.
The `OverflowView.flexible` constructor will let all children to determine their own size. This is less performant than the default one, but it's more flexible. This can be used for a menu bar for example.
## Sponsoring
I'm working on my packages on my free-time, but I don't have as much time as I would. If this package or any other package I created is helping you, please consider to sponsor me. By doing so, I will prioritize your issues or your pull-requests before the others.
## Changelog
Please see the [Changelog][changelog] page to know what's recently changed.
## Contributions
Feel free to contribute to this project.
If you find a bug or want a feature, but don't know how to fix/implement it, please fill an [issue][issue].
If you fixed a bug or implemented a feature, please send a [pull request][pr].
[pub]: https://pub.dartlang.org/packages/overflow_view
[changelog]: https://github.com/letsar/overflow_view/blob/master/CHANGELOG.md
[issue]: https://github.com/letsar/overflow_view/issues
[pr]: https://github.com/letsar/overflow_view/pulls
[overview]: https://raw.githubusercontent.com/letsar/overflow_view/master/packages/images/overflow_view.gif