Flutter CupertinoPicker not rendering - flutter

Trying to make a Flutter CupertinoPicker work on Flutter 1.7. No fancy stuff, just the basic code inside a Scaffold body...
Only using the mandatory elements...tried even sample code of other people, nothing works.
CupertinoPicker(
itemExtent: 30.0,
onSelectedItemChanged: (int idx) {
setState(() {
_prayer.rebuild((b) =>
b..category = listOfStrings[idx]);
});
},
children: List<Widget>.generate(
listOfStrings.length,
(int i) {
return Text('Dummy Text');
},
),
)
flutter: Another exception was thrown: RenderFlex children have non-zero flex but incoming height constraints are unbounded.
flutter: Another exception was thrown: RenderBox was not laid out: RenderFlex#fdf27 relayoutBoundary=up3 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
flutter: Another exception was thrown: RenderBox was not laid out: RenderFlex#052f5 relayoutBoundary=up2 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
flutter: Another exception was thrown: RenderBox was not laid out: RenderPadding#0d6c9 relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
flutter: Another exception was thrown: RenderFlex children have non-zero flex but incoming height constraints are unbounded.
flutter: Another exception was thrown: RenderBox was not laid out: RenderFlex#fdf27 relayoutBoundary=up3 NEEDS-PAINT
flutter: Another exception was thrown: RenderBox was not laid out: RenderFlex#052f5 relayoutBoundary=up2 NEEDS-PAINT
flutter: Another exception was thrown: RenderBox was not laid out: RenderPadding#0d6c9 relayoutBoundary=up1 NEEDS-PAINT
flutter: Another exception was thrown: NoSuchMethodError: The method '>' was called on null.
Android Picker works...
Is there a need that the parent Widget should be Cupertino based or something ?

Expanded(
child:
CupertinoPicker(
backgroundColor: Colors.white,
onSelectedItemChanged: (index) {
},
itemExtent: 50.0,
children:new List<Widget>.generate(
companyList.length, (int index) {
return new Center(
child: new Text(
"${companyList[index]}",
style: TextStyle(fontSize: 16,fontFamily:
'HelveticaRegular'),),
);})
))

You can fix it in two ways. As the answer is in the logcat RenderFlex.
We need to provide the height either using Container
Container(
height: 200.0,
child: CupertinoPicker(
itemExtent: 30.0,
onSelectedItemChanged: (int idx) {
setState(() {
_prayer.rebuild((b) =>
b..category = listOfStrings[idx]);
});
},
children: List<Widget>.generate(
listOfStrings.length,
(int i) {
return Text('Dummy Text');
},
),
)
)
Or
Using the Expanded in case of Row and Column
Expanded(
child: CupertinoPicker(
itemExtent: 30.0,
onSelectedItemChanged: (int idx) {
setState(() {
_prayer.rebuild((b) =>
b..category = listOfStrings[idx]);
});
},
children: List<Widget>.generate(
listOfStrings.length,
(int i) {
return Text('Dummy Text');
},
),
)
)

Related

BoxConstraints forces an infinite width Flutter

This is the error that I got
> Another exception was thrown: BoxConstraints forces an infinite width.
>
> Another exception was thrown: RenderBox was not laid out:
> _RenderListTile#bfb7d relayoutBoundary=up18 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
>
> Another exception was thrown: RenderBox was not laid out:
> RenderPadding#9ad87 relayoutBoundary=up17 NEEDS-PAINT
> NEEDS-COMPOSITING-BITS-UPDATE
>
> Another exception was thrown: RenderBox was not laid out:
> RenderPadding#24132 relayoutBoundary=up16 NEEDS-PAINT
> NEEDS-COMPOSITING-BITS-UPDATE
>
> Another exception was thrown: RenderBox was not laid out:
> RenderSemanticsAnnotations#09519 relayoutBoundary=up15 NEEDS-PAINT
> NEEDS-COMPOSITING-BITS-UPDATE
>
> Another exception was thrown: RenderBox was not laid out:
> RenderPointerListener#6e77f relayoutBoundary=up14 NEEDS-PAINT
> NEEDS-COMPOSITING-BITS-UPDATE
>
> Another exception was thrown: RenderBox was not laid out:
> RenderSemanticsAnnotations#39ab6 relayoutBoundary=up13 NEEDS-PAINT
> NEEDS-COMPOSITING-BITS-UPDATE
>
> Another exception was thrown: RenderBox was not laid out:
> RenderMouseRegion#77c75 relayoutBoundary=up12 NEEDS-PAINT
> NEEDS-COMPOSITING-BITS-UPDATE
>
> Another exception was thrown: RenderBox was not laid out:
> RenderSemanticsAnnotations#39f2d relayoutBoundary=up11 NEEDS-PAINT
> NEEDS-COMPOSITING-BITS-UPDATE
>
> Another exception was thrown: RenderBox was not laid out:
> RenderSemanticsAnnotations#e877e relayoutBoundary=up10 NEEDS-PAINT
> NEEDS-COMPOSITING-BITS-UPDATE
>
> Another exception was thrown: RenderBox was not laid out:
> _RenderInkFeatures#8f433 relayoutBoundary=up9 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
>
> Another exception was thrown: RenderBox was not laid out:
> RenderCustomPaint#ded6d relayoutBoundary=up8 NEEDS-PAINT
> NEEDS-COMPOSITING-BITS-UPDATE
>
> Another exception was thrown: RenderBox was not laid out:
> RenderPhysicalShape#9e5aa relayoutBoundary=up7 NEEDS-PAINT
> NEEDS-COMPOSITING-BITS-UPDATE
>
> Another exception was thrown: RenderBox was not laid out:
> RenderPadding#ef085 relayoutBoundary=up6 NEEDS-PAINT
> NEEDS-COMPOSITING-BITS-UPDATE
>
> Another exception was thrown: RenderBox was not laid out:
> RenderSemanticsAnnotations#e3df0 relayoutBoundary=up5 NEEDS-PAINT
> NEEDS-COMPOSITING-BITS-UPDATE
>
> Another exception was thrown: RenderBox was not laid out:
> RenderRepaintBoundary#88219 relayoutBoundary=up4 NEEDS-PAINT
> NEEDS-COMPOSITING-BITS-UPDATE
>
> Another exception was thrown:
> 'package:flutter/src/rendering/sliver_multi_box_adaptor.dart': Failed
> assertion: line 544 pos 12: 'child.hasSize': is not true.
And this is the code :
return Container(
height: size.height,
width: size.width,
child: Stack(alignment: Alignment.center, children: <Widget>[
Container(
width: 300,
height: 100,
margin: EdgeInsets.only(bottom: 490, right: 10),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(19),
topRight: Radius.circular(19),
bottomLeft: Radius.circular(19),
bottomRight: Radius.circular(19)),
boxShadow: [
BoxShadow(
color: Color.fromARGB(255, 185, 203, 203).withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
),
Container(
margin: EdgeInsets.only(bottom: 550, right: 140),
child: Text(
"Filter by Patient",
style: TextStyle(color: Colors.teal, fontSize: 17),
),
),
Container(
//list image profile
width: 200,
height: 80,
margin: EdgeInsets.only(bottom: 650, right: 140),
child: StreamBuilder<QuerySnapshot>(
stream: db.collection("patient").snapshots(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
List value = snapshot.data!.docs;
if (snapshot.data == null) {
return Container(child: Center(child: Text("Loading...")));
} else {
return ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
print(snapshot.data!.docs);
return Card(
child: ListTile(
leading: CircleAvatar(
backgroundImage:
NetworkImage(value[index]['imageURL']),
),
));
});
}
},
),
)
]));
The issue rise using ListTile inside horizontal list, on listView parent you are using width:200 and it can be set on ListTile width. You can wrap Card or ListTile with a sized widget by providing width, and it will solve the issue.
itemBuilder: (context, index) {
return SizedBox(
width: 200,
child: Card(
child: ListTile(
I will encourage you to check LayoutBuilder for using sizes and ui/layout
Check this video to learn more about Unbounded height/ width.

Getting renderbox not laid out exception in FutureBuilder

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.
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,
),
),
);
}
}

Flutter - Vertical viewport was given unbounded height

I want to write the available devices under the image that is shown like this:
If I remove the image part I get only available devices but i need to add image as well above the BLE devices.
But I am getting an error if I run my code:
Performing hot reload...
Syncing files to device Redmi Note 8 Pro...
════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during performResize():
Vertical viewport was given unbounded height.
Viewports expand in the scrolling direction to fill their container. In this case, a vertical viewport was given an unlimited amount of vertical space in which to expand. This situation typically happens when a scrollable widget is nested inside another scrollable widget.
If this widget is always nested in a scrollable widget there is no need to use a viewport because there will always be enough vertical space for the children. In this case, consider using a Column instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size the height of the viewport to the sum of the heights of its children.
The relevant error-causing widget was:
ListView file:///F:/epicare/lib/BluetoothScanningDevices.dart:113:12
When the exception was thrown, this was the stack:
#0 RenderViewport.computeDryLayout.<anonymous closure> (package:flutter/src/rendering/viewport.dart:1365:15)
#1 RenderViewport.computeDryLayout (package:flutter/src/rendering/viewport.dart:1426:6)
#2 RenderBox.performResize (package:flutter/src/rendering/box.dart:2342:12)
#3 RenderObject.layout (package:flutter/src/rendering/object.dart:1763:9)
#4 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:118:14)
...
The following RenderObject was being processed when the exception was fired: RenderViewport#6aa27 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
... needs compositing
... parentData: <none> (can use size)
... constraints: BoxConstraints(0.0<=w<=392.7, 0.0<=h<=Infinity)
... size: MISSING
... axisDirection: down
... crossAxisDirection: right
... offset: ScrollPositionWithSingleContext#5f4da(offset: 0.0, range: null..null, viewport: null, ScrollableState, AlwaysScrollableScrollPhysics -> ClampingScrollPhysics -> RangeMaintainingScrollPhysics, IdleScrollActivity#9b3a7, ScrollDirection.idle)
... anchor: 0.0
RenderObject: RenderViewport#6aa27 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
needs compositing
parentData: <none> (can use size)
constraints: BoxConstraints(0.0<=w<=392.7, 0.0<=h<=Infinity)
size: MISSING
axisDirection: down
crossAxisDirection: right
offset: ScrollPositionWithSingleContext#5f4da(offset: 0.0, range: null..null, viewport: null, ScrollableState, AlwaysScrollableScrollPhysics -> ClampingScrollPhysics -> RangeMaintainingScrollPhysics, IdleScrollActivity#9b3a7, ScrollDirection.idle)
anchor: 0.0
... center child: RenderSliverPadding#47e11 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
... parentData: paintOffset=Offset(0.0, 0.0)
... constraints: MISSING
... geometry: null
... padding: EdgeInsets.all(8.0)
... textDirection: ltr
... child: RenderSliverList#673c8 NEEDS-LAYOUT NEEDS-PAINT
... parentData: paintOffset=Offset(0.0, 0.0)
... constraints: MISSING
... geometry: null
... no children current live
════════════════════════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by rendering library ═════════════════════════════════════════════════════
RenderBox was not laid out: RenderViewport#6aa27 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1940 pos 12: 'hasSize'
The relevant error-causing widget was:
ListView file:///F:/epicare/lib/BluetoothScanningDevices.dart:113:12
════════════════════════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by rendering library ═════════════════════════════════════════════════════
RenderBox was not laid out: RenderViewport#6aa27 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1940 pos 12: 'hasSize'
The relevant error-causing widget was:
ListView file:///F:/epicare/lib/BluetoothScanningDevices.dart:113:12
════════════════════════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by rendering library ═════════════════════════════════════════════════════
RenderBox was not laid out: RenderIgnorePointer#d974c relayoutBoundary=up20 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1940 pos 12: 'hasSize'
The relevant error-causing widget was:
ListView file:///F:/epicare/lib/BluetoothScanningDevices.dart:113:12
════════════════════════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by rendering library ═════════════════════════════════════════════════════
RenderBox was not laid out: RenderSemanticsAnnotations#6e459 relayoutBoundary=up19 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1940 pos 12: 'hasSize'
The relevant error-causing widget was:
ListView file:///F:/epicare/lib/BluetoothScanningDevices.dart:113:12
════════════════════════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by rendering library ═════════════════════════════════════════════════════
RenderBox was not laid out: RenderPointerListener#0c15f relayoutBoundary=up18 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1940 pos 12: 'hasSize'
The relevant error-causing widget was:
ListView file:///F:/epicare/lib/BluetoothScanningDevices.dart:113:12
═════════════════════════════════════════════════════════════════════════════════════════════════
My code is:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'BluetoothConnectBand.dart';
import 'BluetoothConnectedSuccess.dart';
import 'package:flutter_blue/flutter_blue.dart';
class BluetoothScanningDevices extends StatefulWidget {
#override
_BluetoothScanningDevicesState createState() => _BluetoothScanningDevicesState();
}
class _BluetoothScanningDevicesState extends State<BluetoothScanningDevices> {
FlutterBlue flutterBlueInstance = FlutterBlue.instance;
final List<BluetoothDevice> devicesList = new List<BluetoothDevice>();
_addDeviceTolist(final BluetoothDevice device) {
if (!devicesList.contains(device)) {
setState(() {
devicesList.add(device);
});
}
}
#override
void initState() {
super.initState();
FlutterBlue.instance.connectedDevices
.asStream()
.listen((List<BluetoothDevice> devices) {
for (BluetoothDevice device in devices) {
_addDeviceTolist(device);
}
});
FlutterBlue.instance.scanResults.listen((List<ScanResult> results) {
for (ScanResult result in results) {
_addDeviceTolist(result.device);
}
});
FlutterBlue.instance.startScan();
}
ListView _buildListViewOfDevices() {
Size size = MediaQuery.of(context).size;
List<Container> containers = new List<Container>();
for (BluetoothDevice device in devicesList) {
containers.add(
Container(
width: size.width,
child: RaisedButton(
padding: EdgeInsets.symmetric(vertical:10.0, horizontal: 15.0),
elevation: 5.0,
color: Colors.white,
onPressed: (){
Navigator.push(
context,
MaterialPageRoute(
builder: (context){
return BluetoothConnectedSuccess();
},
),
);
},
child:Column(
children: [
Align(
alignment: Alignment.centerLeft,
child: Text(
device.name == '' ? '(Unknown Device)' : device.name,
style: TextStyle(
fontSize: 15.0,
color: Colors.black,
fontWeight: FontWeight.w600,
fontFamily: 'Montserrat',
),
),
),
Align(
alignment: Alignment.centerLeft,
child: Text(
device.id.toString(),
style: TextStyle(
fontSize: 13.0,
color: Colors.black,
fontWeight: FontWeight.w500,
fontFamily: 'Montserrat',
)
),
),
],
),
),
),
);
}
return ListView(
padding: const EdgeInsets.all(8),
children: <Widget>[
...containers,
],
);
}
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Scaffold(
appBar: AppBar(
backgroundColor: const Color(0xffE5E0A1),
elevation: 0,
centerTitle: true,
title: Text("Connect Band",
style: TextStyle(
fontSize: 15.0,
color: Colors.black,
fontFamily: 'Montserrat',
fontWeight: FontWeight.normal,
),
) ,
leading: IconButton(icon: Icon(Icons.arrow_back,color: Colors.black,),onPressed: (){
Navigator.push(
context,
MaterialPageRoute(builder: (context){
return BluetoothConnectBand();
},
),
);
},
),
actions: [
Padding(
padding: EdgeInsets.only(right: 5.0),
child: FlatButton(
onPressed: () {
},
child: Text(
"Search",
style: TextStyle(
fontSize: 15.0,
color: Colors.black,
fontWeight: FontWeight.normal,
fontFamily: 'Montserrat',
),
),
),
)
],
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: size.height*0.4,
width: size.width,
color: const Color(0xffE5E0A1),
child: Image.asset('assets/images/bluetooth.png',)
),
Container(
width: size.width,
padding: EdgeInsets.symmetric(vertical: 20),
child: Text(
"Scanning Available Devices...",
style: TextStyle(
fontSize: 15.0,
color: Colors.black,
fontWeight: FontWeight.w400,
fontFamily: 'Montserrat',
),
textAlign: TextAlign.center,
),
),
SingleChildScrollView(
child: _buildListViewOfDevices(),
)
],
),
);
}
}
Please help me out by telling me how can I write the available BLE devices under the image as shown in the picture attached
P.S: I am new to Flutter
As the logs show, the error is on line 113. I’m guessing this is caused by the ListView from _buildListViewOfDevices.
First, there is no need to wrap this ListView with SingleChildScrollView, the list view is scrollable already.
Second, instead, wrap the ListView with Expanded. This is tells the ListView to simply take up all remaining screen space in your Column widget.
Set shrinkWrap property of your ListView in _buildListViewOfDevices() function to true. This might work.
You can also remove SingleChildScrollView before the ListView. There is no need for it, ListView is already scrollable.

RenderBox was not laid out: RenderFlex#4a60a NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

When I running the code I find this error in the DEBUG Console as the below shown error:
Restarted application in 2,804ms.
[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
[38;5;244mThe following assertion was thrown during performLayout():[39;49m
Leading widget consumes entire tile width. Please use a sized widget.
'package:flutter/src/material/list_tile.dart':
Failed assertion: line 1353 pos 7: 'tileWidth != leadingSize.width'
[38;5;248mEither 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
[39;49m
[38;5;244mThe relevant error-causing widget was[39;49m
[38;5;248mListTile[39;49m
[38;5;244mWhen the exception was thrown, this was the stack[39;49m
[38;5;244m#2 _RenderListTile.performLayout[39;49m
[38;5;244m#3 RenderObject.layout[39;49m
[38;5;244m#4 RenderPadding.performLayout[39;49m
[38;5;244m#5 RenderObject.layout[39;49m
[38;5;244m#6 RenderProxyBoxMixin.performLayout[39;49m
[38;5;244m...[39;49m
[38;5;244mThe following RenderObject was being processed when the exception was fired: _RenderListTile#a7a4d relayoutBoundary=up9 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE[39;49m
[38;5;244mRenderObject: _RenderListTile#a7a4d relayoutBoundary=up9 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE[39;49m
[38;5;244mparentData: offset=Offset(0.0, 0.0) (can use size)[39;49m
[38;5;244mconstraints: BoxConstraints(w=0.0, 0.0<=h<=Infinity)[39;49m
[38;5;244msize: MISSING[39;49m
[38;5;244mtitle: RenderParagraph#47706 NEEDS-LAYOUT NEEDS-PAINT[39;49m
[38;5;244mparentData: offset=Offset(0.0, 0.0)[39;49m
[38;5;244mconstraints: MISSING[39;49m
[38;5;244msize: MISSING[39;49m
[38;5;244mtextAlign: left[39;49m
[38;5;244mtextDirection: ltr[39;49m
[38;5;244msoftWrap: wrapping at box width[39;49m
[38;5;244moverflow: clip[39;49m
[38;5;244mlocale: en_US[39;49m
[38;5;244mmaxLines: unlimited[39;49m
[38;5;244mtext: TextSpan[39;49m
[38;5;244mdebugLabel: (((englishLike subhead 2014).merge(blackCupertino subtitle1)).copyWith).merge(unknown)[39;49m
[38;5;244minherit: false[39;49m
[38;5;244mcolor: MaterialColor(primary value: Color(0xff03a9f4))[39;49m
[38;5;244mfamily: WorkSans[39;49m
[38;5;244msize: 16.0[39;49m
[38;5;244mweight: 600[39;49m
[38;5;244mbaseline: alphabetic[39;49m
[38;5;244mdecoration: TextDecoration.none[39;49m
[38;5;244m"Sign Out"[39;49m
[38;5;244mtrailing: RenderSemanticsAnnotations#705a3 relayoutBoundary=up10 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE[39;49m
[38;5;244mparentData: offset=Offset(0.0, 0.0) (can use size)[39;49m
[38;5;244mconstraints: BoxConstraints(w=0.0, 0.0<=h<=56.0)[39;49m
[38;5;244msize: Size(0.0, 24.0)[39;49m
[38;5;244mchild: RenderExcludeSemantics#60a3d relayoutBoundary=up11 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE[39;49m
[38;5;244mparentData: <none> (can use size)[39;49m
[38;5;244mconstraints: BoxConstraints(w=0.0, 0.0<=h<=56.0)[39;49m
[38;5;244msize: Size(0.0, 24.0)[39;49m
[38;5;244mexcluding: true[39;49m
[38;5;244mchild: RenderConstrainedBox#bc3b1 relayoutBoundary=up12 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE[39;49m
[38;5;244mparentData: <none> (can use size)[39;49m
[38;5;244mconstraints: BoxConstraints(w=0.0, 0.0<=h<=56.0)[39;49m
[38;5;244msize: Size(0.0, 24.0)[39;49m
[38;5;244madditionalConstraints: BoxConstraints(w=24.0, h=24.0)[39;49m
[38;5;244mchild: RenderPositionedBox#c7d80 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE[39;49m
[38;5;244mparentData: <none> (can use size)[39;49m
[38;5;244mconstraints: BoxConstraints(w=0.0, h=24.0)[39;49m
[38;5;244msize: Size(0.0, 24.0)[39;49m
[38;5;244malignment: center[39;49m
[38;5;244mtextDirection: ltr[39;49m
[38;5;244mwidthFactor: expand[39;49m
[38;5;244mheightFactor: expand[39;49m
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m
[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
RenderBox was not laid out: _RenderListTile#a7a4d relayoutBoundary=up9 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1694 pos 12: 'hasSize'
[38;5;244mThe relevant error-causing widget was[39;49m
[38;5;248mListTile[39;49m
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m
[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
RenderBox was not laid out: RenderPadding#0b562 relayoutBoundary=up8 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1694 pos 12: 'hasSize'
[38;5;244mThe relevant error-causing widget was[39;49m
[38;5;248mListTile[39;49m
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m
[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
RenderBox was not laid out: RenderSemanticsAnnotations#7c546 relayoutBoundary=up7 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1694 pos 12: 'hasSize'
[38;5;244mThe relevant error-causing widget was[39;49m
[38;5;248mListTile[39;49m
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m
[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
RenderBox was not laid out: RenderPointerListener#6507d relayoutBoundary=up6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1694 pos 12: 'hasSize'
[38;5;244mThe relevant error-causing widget was[39;49m
[38;5;248mListTile[39;49m
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m
[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
RenderBox was not laid out: RenderSemanticsGestureHandler#d89dc relayoutBoundary=up5 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1694 pos 12: 'hasSize'
[38;5;244mThe relevant error-causing widget was[39;49m
[38;5;248mListTile[39;49m
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m
[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
RenderBox was not laid out: RenderMouseRegion#b5666 relayoutBoundary=up4 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1694 pos 12: 'hasSize'
[38;5;244mThe relevant error-causing widget was[39;49m
[38;5;248mListTile[39;49m
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m
[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
RenderBox was not laid out: RenderSemanticsAnnotations#ace43 relayoutBoundary=up3 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1694 pos 12: 'hasSize'
[38;5;244mThe relevant error-causing widget was[39;49m
[38;5;248mColumn[39;49m
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m
[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
RenderBox was not laid out: RenderFlex#4e86c relayoutBoundary=up2 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1694 pos 12: 'hasSize'
[38;5;244mThe relevant error-causing widget was[39;49m
[38;5;248mContainer[39;49m
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m
[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
RenderBox was not laid out: _RenderColoredBox#3fe26 relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1694 pos 12: 'hasSize'
[38;5;244mThe relevant error-causing widget was[39;49m
[38;5;248mColumn[39;49m
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m
[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
RenderBox was not laid out: RenderFlex#48686 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1694 pos 12: 'hasSize'
[38;5;244mThe relevant error-causing widget was[39;49m
[38;5;248mScaffold[39;49m
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m
and this is my full code:
import 'package:flutter/rendering.dart';
import '../providers/properties.dart';
import '../providers/cities.dart';
import '../providers/property.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../widgets/properties_grid.dart';
import '../app_theme.dart';
class MyHomePage extends StatefulWidget {
const MyHomePage({Key key}) : super(key: key);
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
int currentTab = 0;
ScrollController _scrollController = ScrollController();
bool _showBottomBar = true;
_scrollListener() {
if (_scrollController.position.userScrollDirection ==
ScrollDirection.reverse) {
setState(() {
_showBottomBar = false;
});
} else if (_scrollController.position.userScrollDirection ==
ScrollDirection.forward) {
setState(() {
_showBottomBar = true;
});
}
}
var _showOnlyFavorites = false;
AnimationController animationController;
bool multiple = true;
#override
void initState() {
animationController = AnimationController(
duration: const Duration(milliseconds: 2000), vsync: this);
_scrollController.addListener(_scrollListener);
super.initState();
}
Future<bool> getData() async {
await Future<dynamic>.delayed(const Duration(milliseconds: 0));
return true;
}
#override
void dispose() {
animationController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
// final properties = Provider.of<Properties>(context, listen: false);
return Scaffold(
resizeToAvoidBottomPadding: false,
extendBody: true,
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {},
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: AnimatedContainer(
duration: Duration(milliseconds: 500),
child: _showBottomBar
? BottomAppBar(
elevation: 0,
shape: CircularNotchedRectangle(),
notchMargin: 10,
child: Container(
height: 60,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
MaterialButton(
padding: EdgeInsets.all(0),
minWidth: 155,
onPressed: () {
setState(() {
// currentScreen =
// Chat(); // if user taps on this dashboard tab will be active
currentTab = 1;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.home,
color: currentTab == 1
? Colors.blue
: Colors.grey,
),
Text(
'Home',
style: TextStyle(
color: currentTab == 1
? Colors.blue
: Colors.grey,
),
),
],
),
)
],
),
// Right Tab bar icons
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
MaterialButton(
padding: EdgeInsets.all(0),
minWidth: 60,
onPressed: () {
setState(() {
// currentScreen =
// Settings(); // if user taps on this dashboard tab will be active
currentTab = 3;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.view_list,
color: currentTab == 3
? Colors.blue
: Colors.grey,
),
Text(
'Property List',
style: TextStyle(
color: currentTab == 3
? Colors.blue
: Colors.grey,
),
),
],
),
),
MaterialButton(
padding: EdgeInsets.all(0),
minWidth: 77,
onPressed: () {
setState(() {
// currentScreen =
// Settings(); // if user taps on this dashboard tab will be active
currentTab = 4;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.location_searching,
color: currentTab == 4
? Colors.blue
: Colors.grey,
),
Text(
'Map',
style: TextStyle(
color: currentTab == 4
? Colors.blue
: Colors.grey,
),
),
],
),
),
],
)
],
),
),
)
: Container(
color: Colors.white,
width: MediaQuery.of(context).size.width,
),
),
backgroundColor: AppTheme.white,
body: Stack(
children: <Widget>[
FutureBuilder<bool>(
future: getData(),
builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
if (!snapshot.hasData) {
return const SizedBox();
} else {
return Padding(
padding:
EdgeInsets.only(top: MediaQuery.of(context).padding.top),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
appBar(),
Expanded(
child: FutureBuilder<bool>(
future: getData(),
builder: (BuildContext context,
AsyncSnapshot<bool> snapshot) {
if (!snapshot.hasData) {
return const SizedBox();
} else {
return ChangeNotifierProvider(
create: (context) => Properties(),
child: PropertiesGrid(_showOnlyFavorites),
);
}
},
),
),
],
),
);
}
},
),
],
),
);
}
Widget appBar() {
return SizedBox(
height: AppBar().preferredSize.height,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 8, left: 8),
child: Container(
width: AppBar().preferredSize.height - 8,
height: AppBar().preferredSize.height - 8,
),
),
Expanded(
child: Center(
child: Padding(
padding: const EdgeInsets.only(top: 4),
child:
Image.asset('assets/images/logo.png', fit: BoxFit.contain),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 8, right: 8),
child: Container(
width: AppBar().preferredSize.height - 8,
height: AppBar().preferredSize.height - 8,
color: Colors.white,
child: Material(
color: Colors.transparent,
child: InkWell(
borderRadius:
BorderRadius.circular(AppBar().preferredSize.height),
child: Icon(
Icons.location_on,
color: AppTheme.dark_grey,
),
onTap: () {
setState(() {
multiple = !multiple;
});
},
),
),
),
),
],
),
);
}
}
I hope some one could figure with me this problem and how to solve it :)...
May be I think that there's a problem with the height of the SizedBox as in this question Flutter: RenderBox was not laid out, but I tried to add the height I found the same problem...
It looks like you put your appBar() in a column. That should be in the appBar property of the Scaffold widget.
You need to use the AppBar() Widget in the Scaffold.
Scaffold(
appBar: AppBar(
title: Text('Put Screen title here'),
actions: <Widget>[IconButton(
icon: Icons.location_on,
onPressed: () {
setState(() {
multiple = !multiple;
});
}),
],
),
),
You are setting height and width of the appBar manually but you are fighting the Flutter framework by doing so.

ListView inside Dynamic ListView ( Pagewise )

I'm still very new to flutter and I'm trying to create a comment list section where the child comment can be nested in the parent comment.
What I did was create a ListView inside a dynamic ListView in this case I used a 3rd party library PagewiseListView for lazy loading. But there was some error in building the List.
#override
Widget build(BuildContext context) {
return Scaffold(
body: pageWiseBuilder(context, _story.kids ?? [], PAGE_SIZE),
);
}
Widget pageWiseBuilder(BuildContext context, List<int> list, int pageSize) {
if (list != null && list.length > 0) {
return PagewiseListView(
padding: EdgeInsets.all(15.0),
pageSize: pageSize,
itemBuilder: this.itemBuilder,
pageFuture: (pageIndex) =>
_repository.fetchComments(list, pageIndex * pageSize, pageSize),
);
} else {
return Container();
}
}
Widget itemBuilder(BuildContext context, Comment entry, int index) {
return Column(
children: <Widget>[
ListTile(
title: Text(entry.by ??= ""),
subtitle: Html(
data: unescape.convert(entry.text ??= ""),
useRichText: true,
onLinkTap: (url) {
_launchURL(url);
},
showImages: true,
renderNewlines: true,
),
),
Divider(),
Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
child: SizedBox(height: 200.0,
child: ListView.builder(
physics: ClampingScrollPhysics(),
shrinkWrap: true,
itemCount: 5,
itemBuilder: (context, index) {
return Padding(
padding: EdgeInsets.only(top: 8.0),
child: Text('Nested list item $index'),
);
},
),
),
),
],
),
],
);
}
I/flutter ( 885): Another exception was thrown: RenderFlex children
have non-zero flex but incoming height constraints are unbounded.
I/flutter ( 885): Another exception was thrown: RenderBox was not
laid out: RenderFlex#a1031 relayoutBoundary=up6 NEEDS-PAINT
NEEDS-COMPOSITING-BITS-UPDATE
I/flutter ( 885): Another exception was thrown: RenderBox was not
laid out: RenderFlex#11980 relayoutBoundary=up5 NEEDS-PAINT
NEEDS-COMPOSITING-BITS-UPDATE
I/flutter ( 885): Another exception was thrown: RenderFlex children
have non-zero flex but incoming height constraints are unbounded.
I/flutter ( 885): Another exception was thrown: RenderBox was not
laid out: RenderFlex#a33b5 relayoutBoundary=up6 NEEDS-PAINT
NEEDS-COMPOSITING-BITS-UPDATE
I/flutter ( 885): Another exception was thrown: RenderBox was not
laid out: RenderFlex#48c2a relayoutBoundary=up5 NEEDS-PAINT
NEEDS-COMPOSITING-BITS-UPDATE
I/flutter ( 885): Another exception was thrown: RenderBox was not
laid out: RenderRepaintBoundary#d6726 relayoutBoundary=up4 NEEDS-PAINT
NEEDS-COMPOSITING-BITS-UPDATE
I/flutter ( 885): Another exception was thrown:
'package:flutter/src/rendering/sliver_multi_box_adaptor.dart': Failed
assertion: line 549 pos 12: 'child.hasSize': is not true.
I/flutter ( 885): Another exception was thrown: NoSuchMethodError:
The method '>' was called on null.
I/flutter ( 885): Another exception was thrown:
'package:flutter/src/rendering/sliver_multi_box_adaptor.dart': Failed
assertion: line 549 pos 12: 'child.hasSize': is not true.
Your ListView must be wrapped with a Widget that has at least the height.
Container(
height: 100,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[],
),
),
I think you need to remove any Flexible in your code, It works for me.