A widget displaying children in a line with an overflow indicator at the end if there is not enough space.

Related tags

Widgets flutter flutter-widget flutter-ui flutter-package
Overview

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

Getting started

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  overflow_view:

In your library add the following import:

import 'package:overflow_view/overflow_view.dart';

Usage

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: <Widget>[
    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 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.
If you fixed a bug or implemented a feature, please send a pull request.

You might also like...

A simple Flutter widget to add in the widget tree when you want to show nothing, with minimal impact on performance.

nil A simple widget to add in the widget tree when you want to show nothing, with minimal impact on performance. Why? Sometimes, according to a condit

Dec 22, 2022

A flutter carousel widget, support infinite scroll, and custom child widget.

A flutter carousel widget, support infinite scroll, and custom child widget.

carousel_slider A carousel slider widget. Features Infinite scroll Custom child widgets Auto play Supported platforms Flutter Android Flutter iOS Flut

Nov 25, 2021

A Flutter Widget to make interactive timeline widget.

A Flutter Widget to make interactive timeline widget.

Bubble Timeline Package A Flutter Widget to make interactive timeline widget. This widget can be used to make Event Timelines, or Timelines for certai

Sep 22, 2022

Widget, that can make any static located widget hidable

Widget, that can make any static located widget hidable

Installing See the official installing guidline from hidable/install Usage & Overview To start using Hidable widget, we have to create a ScrollControl

Dec 16, 2022

📸 Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget.

📸 Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget.

📸 Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget. Photo View is largely used to show interacive images and other stuff such as SVG.

Jan 7, 2023

A widget that allow user resize the widget with drag

Flutter-Resizable-Widget A widget that allow user resize the widget with drag Note: this widget uses Getx Example bandicam.2021-11-11.12-34-41-056.mp4

Dec 13, 2022

A widget lib that the widget in this lib can react to flutter ScrollController's offset

A widget lib that the widget in this lib can react to flutter ScrollController's offset

Language: English | 中文įŽ€äŊ“ linked_scroll_widgets A lib full of widgets that can react to the scrollController's offset change,to custom your UI effect.

Oct 16, 2022

Full customable rolling switch widget for flutter apps based on Pedro Massango's 'crazy-switch' widget

Full customable rolling switch widget for flutter apps based on Pedro Massango's 'crazy-switch' widget

lite_rolling_switch Full customable rolling switch widget for flutter apps based on Pedro Massango's 'crazy-switch' widget https://github.com/pedromas

Dec 1, 2022

Progress Dialog widget for flutter projects with ability to customize loading widget, background color and background blur.

Progress Dialog widget for flutter projects with ability to customize loading widget, background color and background blur.

DISCONTINUED Checkout ArsDialog ars_progress_dialog Customizable progress dialog for Flutter applications with smooth animation for background dim col

Apr 15, 2022
Comments
  • Error when rendering no indicator after having shown the indicator (flexible mode)

    Error when rendering no indicator after having shown the indicator (flexible mode)

    @letsar Congratulations on the package, it is really great! I have found a possible bug, which I have a failing test for it.

    If I have the OverflowView widget showing the indicator because items don't fit, if I setState or rebuild the UI with a set of children that fits, it throws an error.

    This is a failing test with the latest version of the repo. It only seems to happen with the flexible mode. It looks like the issue is in the layout logic, but I have low experience with it to make a PR. If I add a different key based on the children it doesn't throw.

    testWidgets(
    'failing test',
    (tester) async {
      print("Building first with indicator...");
      await tester.pumpWidget(
        Center(
          child: SizedBox(
            width: 100,
            child: OverflowView.flexible(
              builder: (context, count) {
                return const SizedBox(width: 30);
              },
              children: [
                const SizedBox(width: 50),
                const SizedBox(width: 20),
                const SizedBox(width: 50),
                const SizedBox(width: 50),
              ],
            ),
          ),
        ),
      );

      print("Building second without indicator...");
      await tester.pumpWidget(
        Center(
          child: SizedBox(
            width: 100,
            child: OverflowView.flexible(
              builder: (context, count) {
                return const SizedBox(width: 30);
              },
              children: [
                const SizedBox(width: 50),
              ],
            ),
          ),
        ),
      );
    },
  );

    And this is the stacktrace

    Output for failing test
Building first with indicator...
Building second without indicator...
══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
The following assertion was thrown while finalizing the widget tree:
'package:flutter/src/rendering/object.dart': Failed assertion: line 1532 pos 14:
'_debugSubtreeRelayoutRootAlreadyMarkedNeedsLayout()': is not true.

Either the assertion indicates an error in the framework itself, or we should provide substantially
more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
  https://github.com/flutter/flutter/issues/new?template=BUG.md

When the exception was thrown, this was the stack:
#2      RenderObject.markNeedsLayout (package:flutter/src/rendering/object.dart:1532:14)
#3      RenderBox.markNeedsLayout (package:flutter/src/rendering/box.dart:2147:11)
#4      RenderConstrainedLayoutBuilder.updateCallback (package:flutter/src/widgets/layout_builder.dart:192:5)
#5      _LayoutBuilderElement.unmount (package:flutter/src/widgets/layout_builder.dart:115:18)
#6      _InactiveElements._unmount (package:flutter/src/widgets/framework.dart:1998:13)
#7      _InactiveElements._unmount.<anonymous closure> (package:flutter/src/widgets/framework.dart:1996:7)
#8      MultiChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:6218:16)
#9      _InactiveElements._unmount (package:flutter/src/widgets/framework.dart:1994:13)
#10     _InactiveElements._unmount.<anonymous closure> (package:flutter/src/widgets/framework.dart:1996:7)
#11     SingleChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:6105:14)
#12     _InactiveElements._unmount (package:flutter/src/widgets/framework.dart:1994:13)
#13     _InactiveElements._unmount.<anonymous closure> (package:flutter/src/widgets/framework.dart:1996:7)
#14     SingleChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:6105:14)
#15     _InactiveElements._unmount (package:flutter/src/widgets/framework.dart:1994:13)
#16     ListIterable.forEach (dart:_internal/iterable.dart:39:13)
#17     _InactiveElements._unmountAll (package:flutter/src/widgets/framework.dart:2007:25)
#18     BuildOwner.finalizeTree.<anonymous closure> (package:flutter/src/widgets/framework.dart:2821:27)
#19     BuildOwner.lockState (package:flutter/src/widgets/framework.dart:2621:15)
#20     BuildOwner.finalizeTree (package:flutter/src/widgets/framework.dart:2820:7)
#21     AutomatedTestWidgetsFlutterBinding.drawFrame (package:flutter_test/src/binding.dart:1108:18)
#22     RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:302:5)
#23     SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1117:15)
#24     SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1055:9)
#25     AutomatedTestWidgetsFlutterBinding.scheduleWarmUpFrame (package:flutter_test/src/binding.dart:1036:5)
#26     runApp (package:flutter/src/widgets/binding.dart:1063:7)
#27     TestWidgetsFlutterBinding._runTestBody (package:flutter_test/src/binding.dart:791:7)
<asynchronous suspension>
#30     TestWidgetsFlutterBinding._runTest (package:flutter_test/src/binding.dart:764:14)
#31     AutomatedTestWidgetsFlutterBinding.runTest.<anonymous closure> (package:flutter_test/src/binding.dart:1173:24)
#32     FakeAsync.run.<anonymous closure>.<anonymous closure> (package:fake_async/fake_async.dart:178:54)
#37     withClock (package:clock/src/default.dart:48:10)
#38     FakeAsync.run.<anonymous closure> (package:fake_async/fake_async.dart:178:22)
#43     FakeAsync.run (package:fake_async/fake_async.dart:178:7)
#44     AutomatedTestWidgetsFlutterBinding.runTest (package:flutter_test/src/binding.dart:1170:15)
#45     testWidgets.<anonymous closure> (package:flutter_test/src/widget_tester.dart:138:24)
#46     Declarer.test.<anonymous closure>.<anonymous closure> (package:test_api/src/backend/declarer.dart:175:19)
<asynchronous suspension>
#47     Declarer.test.<anonymous closure>.<anonymous closure> (package:test_api/src/backend/declarer.dart)
#52     Declarer.test.<anonymous closure> (package:test_api/src/backend/declarer.dart:173:13)
#53     Invoker.waitForOutstandingCallbacks.<anonymous closure> (package:test_api/src/backend/invoker.dart:231:15)
#58     Invoker.waitForOutstandingCallbacks (package:test_api/src/backend/invoker.dart:228:5)
#59     Invoker._onRun.<anonymous closure>.<anonymous closure>.<anonymous closure> (package:test_api/src/backend/invoker.dart:383:17)
<asynchronous suspension>
#60     Invoker._onRun.<anonymous closure>.<anonymous closure>.<anonymous closure> (package:test_api/src/backend/invoker.dart)
#65     Invoker._onRun.<anonymous closure>.<anonymous closure> (package:test_api/src/backend/invoker.dart:370:9)
#66     Invoker._guardIfGuarded (package:test_api/src/backend/invoker.dart:415:15)
#67     Invoker._onRun.<anonymous closure> (package:test_api/src/backend/invoker.dart:369:7)
#74     Invoker._onRun (package:test_api/src/backend/invoker.dart:368:11)
#75     LiveTestController.run (package:test_api/src/backend/live_test_controller.dart:153:11)
#76     RemoteListener._runLiveTest.<anonymous closure> (package:test_api/src/remote_listener.dart:256:16)
#81     RemoteListener._runLiveTest (package:test_api/src/remote_listener.dart:255:5)
#82     RemoteListener._serializeTest.<anonymous closure> (package:test_api/src/remote_listener.dart:208:7)
#100    _GuaranteeSink.add (package:stream_channel/src/guarantee_channel.dart:125:12)
#101    new _MultiChannel.<anonymous closure> (package:stream_channel/src/multi_channel.dart:159:31)
#105    CastStreamSubscription._onData (dart:_internal/async_cast.dart:85:11)
#139    new _WebSocketImpl._fromSocket.<anonymous closure> (dart:_http/websocket_impl.dart:1145:21)
#147    _WebSocketProtocolTransformer._messageFrameEnd (dart:_http/websocket_impl.dart:338:23)
#148    _WebSocketProtocolTransformer.add (dart:_http/websocket_impl.dart:232:46)
#158    _Socket._onData (dart:io-patch/socket_patch.dart:2044:41)
#167    new _RawSocket.<anonymous closure> (dart:io-patch/socket_patch.dart:1580:33)
#168    _NativeSocket.issueReadEvent.issue (dart:io-patch/socket_patch.dart:1076:14)
(elided 113 frames from class _AssertionError, dart:async, and package:stack_trace)
════════════════════════════════════════════════════════════════════════════════════════════════════
Test failed. See exception logs above.
The test description was: failing test
    opened by davidmartos96 3
  • Migrate to null safety

    Migrate to null safety

    Hi @letsar as the previous PR for value_layout_builder We want to contribute in this one too 😄 Tell us what we can do to improve the migration to nullsafety Best regards.

    opened by John-Dormevil 1
  • Implement wrapped items

    Implement wrapped items

    Hey @letsar, I implemented the #2 enhancement request (Wrapped items). The example is also updated.

    The picture below is an example that demonstrates how to control maximum number of rows/columns via parameters maxRun and maxItemPerRun.

    overflow_view pr enhancement request 2

    opened by thanhle1547 4
  • Support reversing visible children

    Support reversing visible children

    Currently I believe it's only possible to layout the children from left to right (or top to bottom). It would be helpful to be able to reverse this so the children are laid out right to left (or bottom to top) in the available space.

    To explain our use case... we're using the widget to show save/cancel/email actions at the top of the screen. We'd like to ensure the save button is always shown in the top right corner and extra buttons are displayed to the left.

    Thanks for the excellent package!

    opened by hillelcoren 0
Owner
Romain Rastel
Flutter Developer
Romain Rastel
GitHub
Rows_Columns with Child and Children Widget Demo

Rows_Columns with Child and Children Widget Demo A new Flutter project.This project is to show the combination of Rows and Columns and Child and Child

Avinandan Bose 1 Mar 17, 2022
A Flutter library to add the Common effect (line, bubble, dot ...) of tab indicator.

flutter_tab_indicator A Flutter library to add the Common effect (line, bubble, dot ...) of tab indicator. Showcases Installation Showcases Showcases

CrabMan 14 Jun 19, 2022
A flutter package for displaying common picker dialogs.

Flutter Material Pickers A flutter package containing commonly used material design picker dialogs. Some are new, some wrap existing or built in picke

CodeGrue 89 Jan 2, 2023
A package that creates a popup when there's no internet connection

internet_popup A package that shows a pop up alert when the internet connection is lost Features auto popUp option to fix or pop the warning one line

DropDew 4 Apr 19, 2022
Main focus is to show dynamic operation not supported in Stateless Widget of Flutter

A new Flutter project. It will count the number of donut(Though increment doesnot take place Stateless Widget). Main focus is to show dynamic operation not supported in Stateless Widget of Flutter.

Avinandan Bose 2 Sep 9, 2022
A Flutter library to add bubble tab indicator to TabBar

Bubble Tab Indicator A Flutter library to add bubble tab indicator to TabBar. Getting Started Add package from github by adding the following to your

Vipul Asri 184 Nov 23, 2022
Animated, highly customizable, open-source Flutter gauge indicator widgets

Animated, highly customizable, open-source Flutter gauge indicator widgets. They use renderbox under the hood, thus ensuring high performance.

HTD Health 6 Jun 10, 2022
Various Flutter widgets that are developed by Google but not by the core Flutter team

Flutter widgets This repository contains the source code for various Flutter widgets that are developed by Google but not by the core Flutter team. Is

Google 1.1k Jan 7, 2023
A package for flutter to use alert and toast within one line code.

easy_alert A package for flutter to use alert and toast within one line code. Getting Started Add easy_alert: to your pubspec.yaml, and run flutt

null 34 Jun 25, 2021
The complete solution for Dart command-line interfaces

The complete solution for Dart command-line interfaces, inspired by node commander.js which created by tj.

Axetroy 6 Feb 21, 2020