How can I fix exception "Floating SnackBar presented off screen" in flutter - flutter

I have an app that displays a snackbar when some action is done. I had tested this with my phone and some emulator and it works. Recently I installed an emulator with android 13 and maybe a bigger resolution and I'm getting this error:
The following assertion was thrown during performLayout():
Floating SnackBar presented off screen.
A SnackBar with behavior property set to SnackBarBehavior.floating is fully or partially off screen because some or all the widgets provided to Scaffold.floatingActionButton, Scaffold.persistentFooterButtons and Scaffold.bottomNavigationBar take up too much vertical space.
Consider constraining the size of these widgets to allow room for the SnackBar to be visible.
The relevant error-causing widget was
Scaffold
dashboard.dart:69
When the exception was thrown, this was the stack
#0 _ScaffoldLayout.performLayout.<anonymous closure>
#0 _ScaffoldLayout.performLayout.<anonymous closure>
scaffold.dart:1189
#1 _ScaffoldLayout.performLayout
scaffold.dart:1204
#2 MultiChildLayoutDelegate._callPerformLayout
custom_layout.dart:240
#3 RenderCustomMultiChildLayoutBox.performLayout
custom_layout.dart:410
#4 RenderObject._layoutWithoutResize
object.dart:2027
#5 PipelineOwner.flushLayout
object.dart:1020
#6 RendererBinding.drawFrame
binding.dart:516
#7 WidgetsBinding.drawFrame
binding.dart:865
#8 RendererBinding._handlePersistentFrameCallback
binding.dart:381
#9 SchedulerBinding._invokeFrameCallback
binding.dart:1289
#10 SchedulerBinding.handleDrawFrame
binding.dart:1218
#11 SchedulerBinding._handleDrawFrame
binding.dart:1076
#12 _invoke (dart:ui/hooks.dart:145:13)
#13 PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:338:5)
#14 _drawFrame (dart:ui/hooks.dart:112:31)
The following RenderObject was being processed when the exception was fired: RenderCustomMultiChildLayoutBox#3f6d8 NEEDS-LAYOUT NEEDS-COMPOSITING-BITS-UPDATE
RenderObject: RenderCustomMultiChildLayoutBox#3f6d8 NEEDS-LAYOUT NEEDS-COMPOSITING-BITS-UPDATE
needs compositing
parentData: <none> (can use size)
constraints: BoxConstraints(w=411.4, h=867.4)
size: Size(411.4, 867.4)
child 1: RenderRepaintBoundary#ba78b relayoutBoundary=up1
needs compositing
I have no idea how can I debug what is going on here. The code works in smaller devices/older versions of android. The popups are triggered quiet straightforward:
SnackBar getSnackbar({
required String message,
required Color backgroundColor,
}) {
return SnackBar(
elevation: 8,
backgroundColor: backgroundColor,
behavior: SnackBarBehavior.floating,
content: Row(children: [
Flexible(
child: Text(
message,
style: const TextStyle(
color: Colors.white,
),
),
)
]),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30)),
);
}
ScaffoldMessenger.of(context)
..hideCurrentSnackBar()
..showSnackBar(getSnackbar(
backgroundColor: Colors.green,
message: 'File saved to $filename',
));
The screen where this is called does not have any Scaffold.floatingActionButton, Scaffold.persistentFooterButtons and Scaffold.bottomNavigationBar as the exception says. It is just a Scaffold with a body:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('SomeScreen'),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: _isLoading
? const Center(child: CircularProgressIndicator())
: Column(children: [
_displaySomething(),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
_displayAnotherThing(),
],
))
]),
),
);
}
Update: I have futher debugged the issue and it also happens in older versions of android. So it may be related to a recent update of flutter but I'm not able to find why.
I was able to see the problem appears only with behavior:SnackBarBehavior.floating,.
Also removing all the code from the Scaffolfd, leaving just the TextButton that triggers the snackbar is enough to reproduce the issue, but I don't know what can I do with it.

I faced this problem too. This problem arises due to the fact that your column takes up all the available space, you need to limit it somehow to give room for a snackbar

I cross posted this here, because I though it was a bug. But there it was explained that for the SnackBars you have to also consider other Scaffolds in the widget tree as moving backwards would keep the snackbar "flying" and could collide with elements of the previous Scaffolds.
So as a summary on how to solve this issue, take a look not only in the screen where you see the exception triggered but also from previous screens.

Related

Scaffold.geometryOf() must only be accessed during the paint phase

Exception is thrown when debugging on windows, stacktrace:
ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: Scaffold.geometryOf() must only be accessed during the paint phase.
The ScaffoldGeometry is only available during the paint phase, because its value is computed during the animation and layout phases prior to painting.
#0 _ScaffoldGeometryNotifier.value.<anonymous closure> (package:flutter/src/material/scaffold.dart:835:9)
#1 _ScaffoldGeometryNotifier.value (package:flutter/src/material/scaffold.dart:842:6)
#2 _BottomAppBarClipper.getClip (package:flutter/src/material/bottom_app_bar.dart:238:35)
The stacktrace is hinting at getting geometry values from a BottomAppBar which is what I have in my widget. This error is followed by a lot of error messages for mouse_tracker when I move the mouse on the screen:
[ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: 'package:flutter/src/rendering/mouse_tracker.dart': Failed assertion: line 195 pos 12: '!_debugDuringDeviceUpdate': is not true.
#0 _AssertionError._doThrowNew (dart:core-patch/errors_patch.dart:51:61)
#1 _AssertionError._throwNew (dart:core-patch/errors_patch.dart:40:5)
#2 MouseTracker._deviceUpdatePhase (package:flutter/src/rendering/mouse_tracker.dart:195:12)
Nothing on the screen is clickable after this.
The error occurs only after the FloatingActionButton is pressed, and not if the back button on the page is pressed. The onPressed for the FAB is:
void onOkPressed() {
Navigator.of(context).pop();
}
How can I solve this error?
The FAB is contained in the bottom app bar, try setting the FAB location to float
from
Scaffold(
appBar: const AppBar(),
bottomNavigationBar: const BottomAppBar(),
floatingActionButton: FloatingActionButton(
onPressed: onOkPressed,
child: const Icon(Icons.check, size: 32),
),
floatingActionButtonLocation: FloatingActionButtonLocation.endContained,
....
to
Scaffold(
appBar: const AppBar(),
bottomNavigationBar: const BottomAppBar(),
floatingActionButton: FloatingActionButton(
onPressed: onOkPressed,
child: const Icon(Icons.check, size: 32),
),
floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
....

No TabController for TabBar when adding bottom TabBar to AppBar (Flutter)

So what I'm trying to do, besides my app bar where I have logo and search option I want to add bottom TabBar where user can choose between movies or tv shows, and while he is on one of them the text should be lit up (different color). But when I tried to add the TabBar i got an error:
══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
The following assertion was thrown building MediaQuery(MediaQueryData(size: Size(411.4, 683.4),
devicePixelRatio: 2.6, textScaleFactor: 1.0, platformBrightness: Brightness.light, padding:
EdgeInsets.zero, viewPadding: EdgeInsets.zero, viewInsets: EdgeInsets.zero, alwaysUse24HourFormat:
false, accessibleNavigation: false, highContrast: false, disableAnimations: false, invertColors:
false, boldText: false, navigationMode: traditional)):
No TabController for TabBar.
When creating a TabBar, you must either provide an explicit TabController using the "controller"
property, or you must ensure that there is a DefaultTabController above the TabBar.
In this case, there was neither an explicit controller nor a default controller.
The relevant error-causing widget was:
AppBar file:///C:/Users/Meliha/Desktop/Rubicon/chillax/lib/presenter/home_page_movies.dart:22:15
When the exception was thrown, this was the stack:
#0 _TabBarState._updateTabController.<anonymous closure> (package:flutter/src/material/tabs.dart:965:9)
#1 _TabBarState._updateTabController (package:flutter/src/material/tabs.dart:974:6)
#2 _TabBarState.didChangeDependencies (package:flutter/src/material/tabs.dart:1006:5)
#3 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:4653:11)
#4 ComponentElement.mount (package:flutter/src/widgets/framework.dart:4469:5)
#5 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3541:14)
#6 MultiChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:6094:32)
... Normal element mounting (99 frames)
#105 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3541:14)
#106 MultiChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:6094:32)
... Normal element mounting (238 frames)
#344 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3541:14)
#345 MultiChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:6094:32)
... Normal element mounting (300 frames)
#645 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3541:14)
#646 Element.updateChild (package:flutter/src/widgets/framework.dart:3306:18)
#647 RenderObjectToWidgetElement._rebuild (package:flutter/src/widgets/binding.dart:1182:16)
#648 RenderObjectToWidgetElement.mount (package:flutter/src/widgets/binding.dart:1153:5)
#649 RenderObjectToWidgetAdapter.attachToRenderTree.<anonymous closure> (package:flutter/src/widgets/binding.dart:1095:18)
#650 BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2647:19)
#651 RenderObjectToWidgetAdapter.attachToRenderTree (package:flutter/src/widgets/binding.dart:1094:13)
#652 WidgetsBinding.attachRootWidget (package:flutter/src/widgets/binding.dart:934:7)
#653 WidgetsBinding.scheduleAttachRootWidget.<anonymous closure> (package:flutter/src/widgets/binding.dart:915:7)
(elided 11 frames from class _RawReceivePortImpl, class _Timer, dart:async, and dart:async-patch)
════════════════════════════════════════════════════════════════════════════════════════════════════
Here is the code of the main page for the movies:
import 'package:eva_icons_flutter/eva_icons_flutter.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:movie_app/view/now_playing_movie.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:movie_app/view/now_playing_tv.dart';
import 'package:movie_app/view/test.dart';
import 'package:movie_app/view/top_movies.dart';
import 'package:movie_app/view/top_tvs.dart';
import '../style/style.dart';
class HomePageMovie extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePageMovie> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFF151C26),
appBar: AppBar(
backgroundColor: Color(0xFF151C26),
title: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SvgPicture.asset(
logo,
height: 195,
),
],
),
actions: <Widget>[
IconButton(
onPressed: () {},
icon: Icon(
EvaIcons.searchOutline,
color: Colors.white,
))
],
bottom: TabBar(
indicatorColor: Color(0xFFf4C10F),
indicatorSize: TabBarIndicatorSize.tab,
indicatorWeight: 3.0,
unselectedLabelColor: Colors.white,
labelColor: Colors.white,
isScrollable: true,
tabs: [
Tab(
icon: Icon(Icons.movie),
text: "Movies",
),
Tab(
icon: Icon(Icons.tv),
text: "TV Shows",
)
]),
titleSpacing: 0.0,
),
body: ListView(
children: <Widget>[
NowPlayingMovies(),
BestMovie(),
],
),
);
}
}
Any form of help/tip/guide would be great. Thanks in advance
The solution for your problem is right inside the error text
When creating a TabBar, you must either provide an explicit TabController using the "controller"
property, or you must ensure that there is a DefaultTabController above the TabBar.
Therefore the easiest solution is to wrap your TabBar with the DefaultTabController. Since you are making use of the bottom property of AppBar which expects a PreferredSizeWidget, you additionally need to wrap it all inside something that implements this (since it's an abstract class) - easiest solution here is to just make use of PreferredSize. Complete example could look like this:
AppBar(
bottom: PreferredSize(
// Set whatever size you want - this is a good default one
preferredSize: Size.fromHeight(kToolbarHeight),
child: DefaultTabController(
length: 2,
child: TabBar(
tabs: [
Tab(
text: 'Movies',
),
Tab(
text: 'TV Shows',
),
],
),
),
),
),
The error logs are pretty verbose at times, but this is the crucial message:
When creating a TabBar, you must either provide an explicit TabController using the "controller"
property, or you must ensure that there is a DefaultTabController above the TabBar.
In this case, there was neither an explicit controller nor a default controller.
You just need to wrap your Scaffold widget in a DefaultTabController and give it a length corresponding to the number of tabs you have. For more complex behaviour you can initialise a ScrollController and add this to the controller: parameter of the TabBar and TabBarView.
I also notice in the example you have a ListView containing your two tab widgets. This won't work, swap it out for a TabBarView.

Failed assertion: line 320 pos 12: 'width > 0.0': is not true for simple sidebar in Flutter

I created a sidebar to my app to show some icons:
Widget build(BuildContext context) {
return Container(
color: widget.backgroundColor,
//width: double.infinity,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
child: FittedBox(
child: Image(image: AssetImage('my_icon.png')))),
FittedBox(child: Image(image: AssetImage('my_st.png'))),
FittedBox(child: Image(image: AssetImage('my_cart_2.png'))),
FittedBox(child: Image(image: AssetImage('my_info_2.png'))),
FittedBox(child: Image(image: AssetImage('my_rotate_2.png')))
],
),
);
}
Even though it renders perfectly, I get this error:
════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during performLayout():
'package:flutter/src/rendering/box.dart': Failed assertion: line 320 pos 12: 'width > 0.0': 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
The relevant error-causing widget was:
FittedBox file:///home/user/AndroidStudioProjects/flutter_app/lib/sidebar.dart:23:22
When the exception was thrown, this was the stack:
#2 BoxConstraints.constrainSizeAndAttemptToPreserveAspectRatio (package:flutter/src/rendering/box.dart:320:12)
#3 RenderFittedBox.performLayout (package:flutter/src/rendering/proxy_box.dart:2433:30)
#4 RenderObject.layout (package:flutter/src/rendering/object.dart:1777:7)
#5 RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:768:15)
#6 RenderObject.layout (package:flutter/src/rendering/object.dart:1777:7)
Where the error happens in the first FittedBox. If I remove that, I get the error on the second FittedBox.
I thought it had something to do with the Image not having width, but setting width to them (just to test) didn't work.
Even though I get errors, the sidebar renders correctly.
No need to wrap Image in a FittedBox. Just pass a BoxFit to Image's fit parameter.
Image(image: AssetImage('my_icon.png'), fit: BoxFit.fitWidth)

Expanded widget in AppBar

I have an app bar where I want to have the title and then next to it a raised button that expands to fill the remaining horizontal space. I tried variations of this:
AppBar(
title: Row(
children: [
Text("Select view"),
// the row that follows is because it says Expanded widgets
// should be put directly in Row or Column or Flex
Padding(padding: EdgeInsets.only(left: 12.0), child: Row(children: [
Expanded(child: RaisedButton(
child: Text("view 1"),
onPressed: () {
// something
},
),),
])),
]
),
);
For this I'm getting the following error:
I/flutter (26477): The following assertion was thrown during performLayout():
I/flutter (26477): The _ToolbarLayout custom multichild layout delegate forgot to lay out the following children:
I/flutter (26477): _ToolbarSlot.middle: RenderSemanticsAnnotations#6d937 NEEDS-LAYOUT NEEDS-PAINT
I/flutter (26477): _ToolbarSlot.middle: RenderSemanticsAnnotations#7fcd5 NEEDS-LAYOUT NEEDS-PAINT
I/flutter (26477): _ToolbarSlot.middle: RenderSemanticsAnnotations#f9a7a NEEDS-LAYOUT NEEDS-PAINT
I/flutter (26477): _ToolbarSlot.middle: RenderSemanticsAnnotations#ce1f2 NEEDS-LAYOUT NEEDS-PAINT
I/flutter (26477): Each child must be laid out exactly once.
Every other thing I tried was also throwing some assertion exception. I don't really care how I do it, I just want to have two widgets - the title and next to it a RaisedButton that fills the rest of the space in the app bar.
just remove the row that contains the RaisedButton
appBar: AppBar(
title: Row(children: [
Text("Select view"),
Expanded(
child: RaisedButton(
child: Text("view 1"),
onPressed: () {
// something
},
),
),
]),
),

Flutter Listview Scrollable Row

ListView(
children: [
new SizedBox(
height: 100.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
new Text("hi"),
new Text("hi"),
new Text("hi"),
],
),
),
],
)
I used the Sized Box and seems still got the error.
This is my widget tree:
SingleChildScrollView -> Column -> children
Performing hot reload... flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ flutter: The following assertion was thrown during performResize(): flutter: Vertical viewport was given unbounded height. flutter: Viewports expand in the scrolling direction to fill their container.In this case, a vertical flutter: viewport was given an unlimited amount of vertical space in which to expand. This situation flutter: typically happens when a scrollable widget is nested inside another scrollable widget. flutter: If this widget is always nested in a scrollable widget there is no need to use a viewport because flutter: there will always be enough vertical space for the children. In this case, consider using a Column flutter: instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size flutter: the height of the viewport to the sum of the heights of its children. flutter: flutter: When the exception was thrown, this was the stack: flutter: #0 RenderViewport.performResize.<anonymous closure> (package:flutter/src/rendering/viewport.dart:944:15) flutter:
#1 RenderViewport.performResize (package:flutter/src/rendering/viewport.dart:997:6) flutter: #2 RenderObject.layout (package:flutter/src/rendering/object.dart:1555:9) flutter: #3
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #4 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #5
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #6 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #7
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #8 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #9
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #10 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #11
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #12 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #13 RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:738:15) flutter: #14 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #15 RenderPadding.performLayout (package:flutter/src/rendering/shifted_box.dart:199:11) flutter: #16 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #17 _RenderSingleChildViewport.performLayout (package:flutter/src/widgets/single_child_scroll_view.dart:479:13) flutter: #18 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #19
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #20 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #21
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #22 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #23
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #24 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #25
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #26 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #27
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #28 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #29 RenderPositionedBox.performLayout (package:flutter/src/rendering/shifted_box.dart:381:13) flutter: #30 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #31 MultiChildLayoutDelegate.layoutChild (package:flutter/src/rendering/custom_layout.dart:141:11) flutter: #32
_ScaffoldLayout.performLayout (package:flutter/src/material/scaffold.dart:399:7) flutter: #33 MultiChildLayoutDelegate._callPerformLayout (package:flutter/src/rendering/custom_layout.dart:211:7) flutter: #34 RenderCustomMultiChildLayoutBox.performLayout (package:flutter/src/rendering/custom_layout.dart:355:14) flutter: #35 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #36
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #37 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #38
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #39
_RenderCustomClip.performLayout (package:flutter/src/rendering/proxy_box.dart:1143:11) flutter: #40 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #41
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #42 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #43
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #44 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #45
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #46 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #47 RenderStack.performLayout (package:flutter/src/rendering/stack.dart:520:15) flutter: #48 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #49
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #50 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #51
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #52 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #53
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #54 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #55
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #56 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #57
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #58 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #59
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #60 RenderOffstage.performLayout (package:flutter/src/rendering/proxy_box.dart:2809:13) flutter: #61 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #62 RenderStack.performLayout (package:flutter/src/rendering/stack.dart:520:15) flutter: #63 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #64
__RenderTheatre&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #65 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #66
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #67 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #68
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #69 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #70
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #71 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #72
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #73 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #74
_RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13) flutter: #75 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7) flutter: #76 RenderView.performLayout (package:flutter/src/rendering/view.dart:125:13) flutter: #77 RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1445:7) flutter: #78 PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:709:18) flutter: #79
_WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:270:19) flutter: #80
_WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:627:13) flutter: #81
_WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:208:5) flutter: #82
_WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:990:15) flutter: #83
_WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:930:9) flutter: #84
_WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.scheduleWarmUpFrame.<anonymous closure> (package:flutter/src/scheduler/binding.dart:751:7) flutter:
#86 _Timer._runTimers (dart:isolate/runtime/libtimer_impl.dart:382:19) flutter: #87
_Timer._handleMessage (dart:isolate/runtime/libtimer_impl.dart:416:5) flutter: #88 _RawReceivePortImpl._handleMessage (dart:isolate/runtime/libisolate_patch.dart:165:12) flutter: (elided one frame from package dart:async) flutter: flutter: The following RenderObject was being processed when the exception was fired: flutter: RenderViewport#c5015 NEEDS-LAYOUT NEEDS-PAINT flutter: creator: Viewport ← _ScrollableScope ← IgnorePointer-[GlobalKey#58446] ← Semantics ← Listener ← flutter: _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#efcf9] ← flutter: _ExcludableScrollSemantics-[GlobalKey#1ff3b] ← Scrollable ← ListView ← Column ← Padding ← ⋯ flutter: parentData: <none> (can use size) flutter: constraints: BoxConstraints(0.0<=w<=335.0,
0.0<=h<=Infinity) flutter: size: MISSING flutter: axisDirection: down flutter: crossAxisDirection: right flutter: offset: ScrollPositionWithSingleContext#05c53(offset: 0.0, range: null..null, viewport: null, flutter: ScrollableState, AlwaysScrollableScrollPhysics -> BouncingScrollPhysics, IdleScrollActivity#31dab, flutter: ScrollDirection.idle) flutter: anchor: 0.0 flutter: This RenderObject had the following descendants (showing up to depth 5): flutter: RenderSliverPadding#912f7 NEEDS-LAYOUT NEEDS-PAINT flutter: RenderSliverList#41182 NEEDS-LAYOUT NEEDS-PAINT flutter: RenderRepaintBoundary#8a6de NEEDS-LAYOUT NEEDS-PAINT flutter: RenderConstrainedBox#4bfc3 NEEDS-LAYOUT NEEDS-PAINT flutter:
_RenderExcludableScrollSemantics#0976e NEEDS-LAYOUT NEEDS-PAINT flutter: ════════════════════════════════════════════════════════════════════════════════════════════════════ flutter: Another exception was thrown: RenderBox was not laid out: RenderViewport#c5015 NEEDS-LAYOUT NEEDS-PAINT flutter: Another exception was thrown: RenderBox was not laid out: RenderViewport#c5015 NEEDS-PAINT flutter: Another exception was thrown: RenderBox was not laid out: RenderIgnorePointer#a987c relayoutBoundary=up14 NEEDS-PAINT flutter: Another exception was thrown: RenderBox was not laid out: RenderSemanticsAnnotations#9bd09 relayoutBoundary=up13 NEEDS-PAINT flutter: Another exception was thrown: RenderBox was not laid out: RenderPointerListener#12af7 relayoutBoundary=up12 NEEDS-PAINT Reloaded 1 of 493 libraries in 603ms. flutter: Another exception was thrown: RenderBox was not laid out: RenderSemanticsGestureHandler#27e1a relayoutBoundary=up11 NEEDS-PAINT flutter: Another exception was thrown: RenderBox was not laid out:
_RenderExcludableScrollSemantics#85fc5 relayoutBoundary=up10 NEEDS-PAINT flutter: Another exception was thrown: RenderBox was not laid out: RenderFlex#19bee relayoutBoundary=up9 NEEDS-PAINT flutter: Another exception was thrown: RenderBox was not laid out: RenderPadding#e802a relayoutBoundary=up8 NEEDS-PAINT flutter: Another exception was thrown: RenderBox was not laid out:
_RenderSingleChildViewport#5d1aa relayoutBoundary=up7 NEEDS-PAINT flutter: Another exception was thrown: RenderBox was not laid out: RenderIgnorePointer#f73b8 relayoutBoundary=up6 NEEDS-PAINT flutter: Another exception was thrown: RenderBox was not laid out: RenderSemanticsAnnotations#610b2 relayoutBoundary=up5 NEEDS-PAINT flutter: Another exception was thrown: RenderBox was not laid out: RenderPointerListener#cbdf9 relayoutBoundary=up4 NEEDS-PAINT flutter: Another exception was thrown: RenderBox was not laid out: RenderSemanticsGestureHandler#37577 relayoutBoundary=up3 NEEDS-PAINT flutter: Another exception was thrown: 'package:flutter/src/rendering/shifted_box.dart': Failed assertion: line 310 pos 12: 'child.hasSize': is not true. flutter: Another exception was thrown: RenderBox was not laid out:
_RenderSingleChildViewport#5d1aa relayoutBoundary=up7 NEEDS-P
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.4.4, on Mac OS X 10.13.1 17B1003, locale en-HK)
[✓] Android toolchain - develop for Android devices (Android SDK 26.0.2)
[✓] iOS toolchain - develop for iOS devices (Xcode 9.2)
[✓] Android Studio (version 3.1)
[✓] Connected devices (3 available)
Try this code,
You can implement scrollable row in flutter using below code
and for scrollable column just change Column with Row
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: <Widget>[
Text('hi'),
Text('hi'),
Text('hi'),
]
)
)
Edit : The keyword new is optional in Dart 2
see the output here
You can use Expanded widget to wrap your listView.
Expanded widget tells the screen to allow as much as space the widget wants to take.
Or you can also write shrinkWrap:true in your ListView widget (works in a lot of cases).
try to set the following properties of your ListView
shrinkWrap: true,
physics: ClampingScrollPhysics(),
for me, most of the Unbound constraints and scrolling errors were solved.
A horizontal ListView will expand vertically to occupy the height of its parent. It happens to be that in this case the parent is a vertical ListView, which has infinite height. You need to constrain the height of your inner ListView.
Probably the simplest way to do that is through a SizedBox widget.
ListView(
children: [
SizedBox(
height: 300.0,
child: ListView(scrollDirection: Axis.horizontal, ...),
),
],
)
EDIT:
The problem is actually caused by the vertical ListView, because it is the child of a Column. The reason is similar as above, a ListView will expand to be the height of its parent and a Column has unbounded height.
This snippet displays the symptom.
Column(
children: <Widget>[
ListView(children: [Text("hi"), Text("hi"), Text("hi")]),
],
)
The solution in this case depends on your setup. You could wrap it around a SizedBox again. You could make the column items part of your ListView. Or you could also change the ListView for a Column.
Wrap the 'ListView' with an 'Expanded' widget.
new Expanded (
child: new ListView (
.....
)
)
You'll need to wrap your horizontal ListView inside SizedBox widget. Have a look at this sample code:
new SizedBox(
height: 72.0,
child: new ListView(
padding: const EdgeInsets.symmetric(vertical: 4.0),
children: listViewItems,
scrollDirection: Axis.horizontal,
),
),
So you can also do this:
Container(
height: 100.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
new Text("hi"),
new Text("hi"),
new Text("hi"),
]
),
),
by wrapping your ListView in a Container Widget
You can try this one as well for horizontal and vertical scrolling.
return Scaffold(
body: ListView.builder(
scrollDirection: Axis.vertical,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 200,
margin: EdgeInsets.all(20),
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
return Container(
color: Colors.grey,
width: 100,
height: 100,
margin: EdgeInsets.all(20),
);
},
),
);
},
),
);
The reason is you cant use a Listview inside a Listview in flutter so you have to make one of them to either column or row as per requirement .
new Listview(
children: <Widget>[
new SizedBox(
height:100.0,
child: new Row(
children: <Widget>[
new Text("hi"),
new Text("hi"),
new Text("hi"),
]
)
)
]
)
This would satisfy your requirement according to me .
This might seem like a lazy answer but have you tried doing a $ flutter clean?
When I run this using the standard boilerplate given when you open a new flutter project it runs just fine, using the same code that gave you issues.
I know this is an older question but hopefully someone finds this useful.
This is what I used;
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body:
_listView(),
);
}
ListView _listView() {
return new ListView(
children: [
new SizedBox(
height: 100.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
new Text("hi"),
new Text("hi"),
new Text("hi"),
],
),
),
],
);
}
}
And this is what I got;