Getting renderbox not laid out exception in FutureBuilder - flutter

Question

I have the following FutureBuilder and I am trying to display a loading spinner when the connection state is in waiting status but am getting alot of exception regarding size. Not sure where to include the size since my spinner already has a size.
return Scaffold(
backgroundColor: Colors.grey[100],
appBar: AppBar(
backgroundColor: Colors.grey[100],
elevation: 0,
brightness: Brightness.light,
leading: Icon(null),
actions: <Widget>[
IconButton(
onPressed: () {},
icon: Icon(
Icons.shopping_basket,
color: Colors.grey[800],
),
)
],
),
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(horizontal: 20.0),
child: FutureBuilder(
future: _screenFuture,
// ignore: missing_return
builder: (context, snap) {
if (snap.error != null &&
!snap.error
.toString()
.contains('NoSuchMethodError')) {
return Center(child: Text('Something went wrong!'));
} else if (snap.hasData) {
var categoriesData = Provider.of<Categories>(context);
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
FadeAnimation(
1,
Text(
'Food Delivery',
style: TextStyle(
color: Colors.grey[80],
fontWeight: FontWeight.bold,
fontSize: 30),
)),
SizedBox(
height: 20,
),
Container(
height: 50,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: categoriesData.items.length,
itemBuilder: (ctx, i) => FadeAnimation(
1,
makeCategory(
isActive: true,
title: categoriesData.items
.toList()[i]
.title)))),
SizedBox(
height: 10,
),
],
);
} else if (snap.connectionState ==
ConnectionState.waiting) {
return Center(child: Loading());
}
})),
SizedBox(
height: 30,
)
],
),
),
);
Loading spinner class
class Loading extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: SpinKitFadingCircle(
color: Colors.black,
size: 30,
)
);
}
}
Exceptions I am getting: I see that it is pointing to line 7 of my loading spinner but I am honestly not sure what to make of it.
════════ Exception caught by rendering library ═════════════════════════════════
The following assertion was thrown during performResize():
'package:flutter/src/widgets/overlay.dart': Failed assertion: line 720 pos 12: 'constraints.biggest.isFinite': is not true.
2
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=2_bug.md
The relevant error-causing widget was
MaterialApp
lib\widgets\loading.dart:7
When the exception was thrown, this was the stack
#2 _RenderTheatre.computeDryLayout
package:flutter/…/widgets/overlay.dart:720
#3 RenderBox.performResize
package:flutter/…/rendering/box.dart:2332
#4 RenderObject.layout
package:flutter/…/rendering/object.dart:1758
#5 RenderProxyBoxMixin.performLayout
package:flutter/…/rendering/proxy_box.dart:116
#6 RenderObject.layout
package:flutter/…/rendering/object.dart:1779
...
The following RenderObject was being processed when the exception was fired: _RenderTheatre#d0b0d NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
RenderObject: _RenderTheatre#d0b0d NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
arentData: <none> (can use size)
constraints: BoxConstraints(0.0<=w<=320.0, 0.0<=h<=Infinity)
size: MISSING
skipCount: 0
textDirection: ltr
onstage 1: RenderIgnorePointer#7e525 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: not positioned; offset=Offset(0.0, 0.0)
constraints: MISSING
size: MISSING
ignoring: false
ignoringSemantics: implicitly false
child: RenderBlockSemantics#115dd NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: <none>
constraints: MISSING
blocks semantics of earlier render objects below the common boundary
size: MISSING
blocking: true
child: RenderExcludeSemantics#791f1 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: <none>
constraints: MISSING
size: MISSING
excluding: true
child: RenderSemanticsGestureHandler#fab4a NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: <none>
constraints: MISSING
size: MISSING
behavior: opaque
gestures: tap
onstage 2: RenderSemanticsAnnotations#e679a NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: not positioned; offset=Offset(0.0, 0.0)
constraints: MISSING
size: MISSING
child: RenderOffstage#31df1 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: <none>
constraints: MISSING
size: MISSING
offstage: false
child: RenderSemanticsAnnotations#12c91 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: <none>
constraints: MISSING
size: MISSING
child: RenderRepaintBoundary#93c1c NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
needs compositing
parentData: <none>
constraints: MISSING
size: MISSING
usefulness ratio: no metrics collected yet (never painted)
no offstage children
════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by rendering library ═════════════════════════════════
BoxConstraints forces an infinite height.
The relevant error-causing widget was
MaterialApp
lib\widgets\loading.dart:7
════════════════════════════════════════════════════════════════════════════════
After removing materialApp in loading spinner, I am now getting this exception:
════════ Exception caught by widgets library ═══════════════════════════════════
The following assertion was thrown building SpinKitFadingCircle(state: _SpinKitFadingCircleState#75158(ticker active)):
No Directionality widget found.
Stack widgets require a Directionality widget ancestor to resolve the 'alignment' argument.
The default value for 'alignment' is AlignmentDirectional.topStart, which requires a text direction.
The specific widget that could not find a Directionality ancestor was: Stack
alignment: AlignmentDirectional.topStart
fit: loose
dirty
The ownership chain for the affected widget is: "Stack ← SizedBox ← Center ← SpinKitFadingCircle ← ColoredBox ← Container ← Loading ← Center ← MyApp ← [root]"
Typically, the Directionality widget is introduced by the MaterialApp or WidgetsApp widget at the top of your application widget tree. It determines the ambient reading direction and is used, for example, to determine how to lay out text, how to interpret "start" and "end" values, and to resolve EdgeInsetsDirectional, AlignmentDirectional, and other *Directional objects.
Instead of providing a Directionality widget, another solution would be passing a non-directional 'alignment', or an explicit 'textDirection', to the Stack.

Answer 1

from the error message, I guess if you wrapped SpinKitFadingCircle inside a Directionality it might work! if it didn't, we need more info about the SpinKitFadingCircle widget.
class Loading extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: Directionality(
textDirection: TextDirection.rtl,
child: SpinKitFadingCircle(
color: Colors.black,
size: 30,
),
),
);
}
}