Giter Club home page Giter Club logo

Comments (9)

bdlukaa avatar bdlukaa commented on August 22, 2024

@harlanx can you try the latest master and see if the issue goes away?

dependencies:
  fluent_ui:
    git:
      url: https://github.com/bdlukaa/fluent_ui.git

from fluent_ui.

harlanx avatar harlanx commented on August 22, 2024

I'm still getting an error on my project using master even without infoBar or trailing provided. I don't know why its being painted during transition even though there are null checks.

Debug (My Project) 
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 4.0 pixels on the right.

The relevant error-causing widget was:
  Row
  Row:file:///C:/Users/Arctic%20Snow/AppData/Local/Pub/Cache/git/fluent_ui-f14c46484cf102942638708653c1129ce10b680e/lib/src/controls/navigation/navigation_view/pane_items.
  dart:248:24

To inspect this widget in Flutter DevTools, visit:
http://127.0.0.1:9102/#/inspector?uri=http%3A%2F%2F127.0.0.1%3A54919%2FSp_n4joIKLQ%3D%2F&inspectorRef=inspector-0

The overflowing RenderFlex has an orientation of Axis.horizontal.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be
seen. If the content is legitimately bigger than the available space, consider clipping it with a
ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
like a ListView.
The specific RenderFlex in question is: RenderFlex#b3784 relayoutBoundary=up40 OVERFLOWING:
  creator: Row ← ConstrainedBox-[GlobalKey#1a771 NavigationPaneItem key; PaneItem] ← Stack ←
    FocusBorder ← Padding ← DecoratedBox ← Padding ← Container ← Semantics ← Listener ←
    _GestureSemantics ← RawGestureDetector ← ⋯
  parentData: <none> (can use size)
  constraints: BoxConstraints(0.0<=w<=38.0, 40.0<=h<=Infinity)
  size: Size(38.0, 40.0)
  direction: horizontal
  mainAxisAlignment: start
  mainAxisSize: max
  crossAxisAlignment: center
  textDirection: ltr
  verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════

I've downloaded a local copy of the package and modified the returned widget for PaneDisplayMode.open in pane_items.dart which seems to fix the issue for me. This allows those trailing widgets to be painted even during transition. I don't know if there would be potential issues with this solution though since I've only used basic widgets on infoBar and trailing during my testing.

Code changes 
            case PaneDisplayMode.open:
              return ConstrainedBox(
                key: itemKey,
                constraints: const BoxConstraints(
                  minHeight: kPaneItemMinHeight,
                ),
                child: Row(children: [
                  Padding(
                    padding: theme.iconPadding ?? EdgeInsets.zero,
                    child: IconTheme.merge(
                      data: iconThemeData,
                      child: Center(child: icon),
                    ),
                  ),
                  Expanded(child: textResult),
                  Flexible(
                    child: Align(
                      alignment: AlignmentDirectional.centerEnd,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          if (infoBadge != null)
                            Flexible(
                              child: IntrinsicWidth(
                                child: Padding(
                                  padding: const EdgeInsetsDirectional.only(
                                      end: 8.0),
                                  child: infoBadge!,
                                ),
                              ),
                            ),
                          if (trailing != null)
                            Flexible(
                              child: IntrinsicWidth(
                                child: IconTheme.merge(
                                  data: const IconThemeData(size: 16.0),
                                  child: trailing!,
                                ),
                              ),
                            ),
                        ],
                      ),
                    ),
                  ),
                ]),
              );

from fluent_ui.

harlanx avatar harlanx commented on August 22, 2024

Just an update on this. Turns out that all of the non-Flexible items in the row for PaneDisplayMode.open is causing this issue.

from fluent_ui.

harlanx avatar harlanx commented on August 22, 2024

I've come up with a new solution, probably better that the first one I suggested.
The 12pixels being subtracted is from

fluent_ui/lib/src/controls/navigation/navigation_view/pane_items.dart

Line 308 in f14c464

margin: const EdgeInsets.symmetric(horizontal: 6.0),

@bdlukaa can you take a look? If you have another solution in mind, let's go your way since I'm not familiarized with the package.

            case PaneDisplayMode.open:
              return IntrinsicHeight(
                child: ConstrainedBox(
                  key: itemKey,
                  constraints: const BoxConstraints(
                    minHeight: kPaneItemMinHeight,
                  ),
                  child: OverflowBox(
                    maxWidth: (maybeBody?.pane?.size?.openMaxWidth ??
                            kOpenNavigationPaneWidth) -
                        12.0,
                    child: Row(children: [
                      Padding(
                        padding: theme.iconPadding ?? EdgeInsets.zero,
                        child: IconTheme.merge(
                          data: iconThemeData,
                          child: Center(child: icon),
                        ),
                      ),
                      Expanded(child: textResult),
                      if (infoBadge != null)
                        Padding(
                          padding: const EdgeInsetsDirectional.only(end: 8.0),
                          child: infoBadge!,
                        ),
                      if (trailing != null)
                        IconTheme.merge(
                          data: const IconThemeData(size: 16.0),
                          child: trailing!,
                        ),
                    ]),
                  ),
                ),
              );

from fluent_ui.

bdlukaa avatar bdlukaa commented on August 22, 2024

I would rather not make use of intrinsic widgets on this widget. Ideally, the solution would be to create a RenderObject for this widget, but I do not have the time to invest into it :/

Locally, I don't have any issues when hiding the infoBadge and trailing widgets while transitioning

from fluent_ui.

harlanx avatar harlanx commented on August 22, 2024
Desktop.2023.08.04.mp4

It is reproduceable in the example app.
In release mode it is hidden so it doesn't bother me that much.

from fluent_ui.

bdlukaa avatar bdlukaa commented on August 22, 2024

I see. It is fine when using the compact mode and opening the pane from there, but when changing the displayMode property from compact to open, this issue happens.

from fluent_ui.

ikramhasan avatar ikramhasan commented on August 22, 2024

Hi, this issue still exists. Crashlytics is constantly logging this bug. Is there any ETA on fixing this?

from fluent_ui.

bdlukaa avatar bdlukaa commented on August 22, 2024

@ikramhasan This would likely come with #919, but there is no estimated time on when this is going to be fixed. Please consider sponsoring to help me maintain the project. Thanks.

from fluent_ui.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.