Comments (9)
@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.
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.
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.
I've come up with a new solution, probably better that the first one I suggested.
The 12pixels being subtracted is from
@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.
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.
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.
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.
Hi, this issue still exists. Crashlytics is constantly logging this bug. Is there any ETA on fixing this?
from fluent_ui.
@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)
- π Handle enter click in a NumberBox and add onEditingComplete event HOT 1
- NumberFormBox doesn't rebuild properly when setState is called
- example no longer compiles on flutter 3.22.0-39.0.pre.2π HOT 1
- π Weird effect when a ComboBox is inside a SizedBox HOT 3
- πIn the document, there is a bug in the source code of the AutoSuggestBox component.
- What is the purpose of the generated_plugin_registrant.dart file in the example/lib path and how it was generated HOT 3
- Ability to add common interactive implementations for multi-window applications HOT 1
- [Feature Request] Support disabled `MenuFlyoutItem` HOT 1
- Use `WidgetStateProperty` instead of `ButtonState`
- A lot of animations feel laggy and incomplete HOT 1
- π Scrollbar, disappear when the mouse is not over HOT 1
- Support `onChange` method for `DropDownButton`
- π Numberbox format notwork when precision bigger then 4
- π Disabled `PaneItem` Still Accessible in Compact Mode of `NavigationPane`
- π TextBox is unfocussable HOT 1
- π `showDialog` `barrierDismissible` documentation has contradictory "default value"
- Change ComboBox color HOT 1
- Create `PaneItemWidget` HOT 1
- Code Assist AI for devs building with Fluent UI in Flutter HOT 1
- Padding button HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fluent_ui.