Expanded widget in AppBar - flutter

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
},
),
),
]),
),

Related

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

ShowAlertDialog Flutter Render Bug

I'm having a problem which i have been trying to solve for the last 3 hours but it's pointless.
Now get to the point, I'm making an custom CupertinoDialog, everything looks good to me. Idk why is this happening. I've try multiple method on Stackoverflow but it's pointless. I hope someone can save me from this bug.
======== Exception caught by rendering library =====================================================
The following assertion was thrown during performLayout():
RenderBox was not laid out: RenderIntrinsicWidth#b0789 relayoutBoundary=up5 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'
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:
SimpleDialog file:///D:/FlutterProject/airchecker/lib/main.dart:50:29
When the exception was thrown, this was the stack:
#2 RenderBox.size (package:flutter/src/rendering/box.dart:1930:12)
#3 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:117:21)
#4 RenderObject.layout (package:flutter/src/rendering/object.dart:1779:7)
#5 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116:14)
#6 RenderCustomPaint.performLayout (package:flutter/src/rendering/custom_paint.dart:545:11)
...
The following RenderObject was being processed when the exception was fired: _RenderInkFeatures#383cc relayoutBoundary=up4 NEEDS-PAINT
... needs compositing
... parentData: <none> (can use size)
... constraints: BoxConstraints(280.0<=w<=331.4, 0.0<=h<=561.6)
... size: MISSING
RenderObject: _RenderInkFeatures#383cc relayoutBoundary=up4 NEEDS-PAINT
needs compositing
parentData: <none> (can use size)
constraints: BoxConstraints(280.0<=w<=331.4, 0.0<=h<=561.6)
size: MISSING
... child: RenderIntrinsicWidth#b0789 relayoutBoundary=up5 NEEDS-PAINT
... needs compositing
... parentData: <none> (can use size)
... constraints: BoxConstraints(280.0<=w<=331.4, 0.0<=h<=561.6)
... size: MISSING
... stepWidth: 56.0
... stepHeight: null
... child: RenderConstrainedBox#9892a NEEDS-LAYOUT NEEDS-PAINT
... needs compositing
... parentData: <none>
... constraints: MISSING
... size: MISSING
... additionalConstraints: BoxConstraints(280.0<=w<=Infinity, 0.0<=h<=Infinity)
... child: RenderFlex#bca83 NEEDS-LAYOUT NEEDS-PAINT
... needs compositing
... parentData: <none>
... constraints: MISSING
... size: MISSING
... direction: vertical
... mainAxisAlignment: start
... mainAxisSize: min
... crossAxisAlignment: stretch
... verticalDirection: down
... child 1: RenderPadding#27dc0 NEEDS-LAYOUT NEEDS-PAINT
... parentData: offset=Offset(0.0, 0.0); flex=null; fit=null
... constraints: MISSING
... size: MISSING
... padding: EdgeInsets(24.0, 24.0, 24.0, 0.0)
... textDirection: ltr
... child 2: RenderRepaintBoundary#dda4c NEEDS-LAYOUT NEEDS-PAINT
... needs compositing
... parentData: offset=Offset(0.0, 0.0); flex=1; fit=FlexFit.loose
... constraints: MISSING
... size: MISSING
... usefulness ratio: no metrics collected yet (never painted)
====================================================================================================
Here's my code:
void showAlertDialog(BuildContext context, String title, String content) {
showCupertinoDialog(
context: context,
builder: (builder) => SimpleDialog(
title: title.text.semiBold.make().centered(),
children: [
content.text.make().centered().expand(),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
width: 100,
child: OutlinedButton(
style: OutlinedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
side: BorderSide(color: Colors.red, width: 1.0), // HERE
),
side:
BorderSide(color: Colors.red, width: 1.0)), // AND HERE
onPressed: () {},
child: 'Cancel'.text.color(Colors.red).make(),
),
),
Container(
width: 100,
child: TextButton(
onPressed: () {},
child: 'OK'.text.white.make().px(15),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.red),
),
),
),
],
),
],
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(50.0),
child: GestureDetector(
onTap: (){
showAlertDialog(context, "tit", "Content");
},
child: ClipPath(
clipper: MyClip(),
child: Container(
width: 200,
height: 300,
color: Colors.lightGreenAccent,
),
),
),
),
);
}
}
#Nobody,
As pskink mentioned, try to use Text(content), I just replaced
title: title.text.semiBold.make().centered()
for
title: Text(title)
and
content.text.make().centered().expand()
for
Row(mainAxisAlignment: MainAxisAlignment.center,
children: [Text(content)],)
and it works, I've never used velocity_x, but it seems that's the problem

Problems with a ListView

I make a application in flutter.
It's simple. In the principal layout exist an stack. In the first level are a background (what its a simple gradient), and in the second lever are the "body" of the application.
In this body of application i have a column (To put one item below another). this column are divided by separate widgets. One is for the "tile", and other is for a ListView, this ListView will show information from a database, but in this moment i only create 10 items for an example.
The code is this:
//This for a homepage
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Stack(
children: [
Background(),
HomeBody(),
],
),
);
The background (are in another file, in the homepage are imported):
#override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [0.2, 0.8],
colors: [
Color(0xff2E305F),
Color(0xff202333),
],
)),
);
And this is the "body":
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Column(
children: [
PageTitle(),
Changes(),
],
),
);
}
}
class PageTitle extends StatelessWidget {
const PageTitle({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.symmetric(horizontal: 20),
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
height: 25,
),
Text(
'Biggest Title',
style: TextStyle(
color: Colors.white,
fontSize: 55.0,
fontWeight: FontWeight.bold,
),
),
SizedBox(
//height: 1,
),
Text(
'low subtitle',
style: TextStyle(
color: Colors.white,
fontSize: 14.0,
fontWeight: FontWeight.w300,
),
),
],
),
),
);
}
}
class Changes extends StatelessWidget {
const Changes({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return ListView(
children: [
Text('Text0'),
Text('Text0'),
Text('Text0'),
Text('Text0'),
Text('Text0'),
Text('Text0'),
Text('Text0'),
Text('Text0'),
Text('Text0'),
Text('Text0'),
Text('Text0'),
],
);
}
}
The error is:
═══════ 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
lib/widgets/home_body_screen.dart:64
When the exception was thrown, this was the stack
#0 RenderViewport.computeDryLayout.<anonymous closure>
package:flutter/…/rendering/viewport.dart:1369
#1 RenderViewport.computeDryLayout
package:flutter/…/rendering/viewport.dart:1430
#2 RenderBox.performResize
package:flutter/…/rendering/box.dart:2332
#3 RenderObject.layout
package:flutter/…/rendering/object.dart:1758
#4 RenderProxyBoxMixin.performLayout
package:flutter/…/rendering/proxy_box.dart:116
...
The following RenderObject was being processed when the exception was fired: RenderViewport#33c99 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
RenderObject: RenderViewport#33c99 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
offset: ScrollPositionWithSingleContext#b9cb0(offset: 0.0, range: null..null, viewport: null, ScrollableState, AlwaysScrollableScrollPhysics -> ClampingScrollPhysics -> RangeMaintainingScrollPhysics, IdleScrollActivity#03740, ScrollDirection.idle)
anchor: 0.0
center child: RenderSliverPadding#e0507 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: paintOffset=Offset(0.0, 0.0)
constraints: MISSING
geometry: null
padding: EdgeInsets.zero
textDirection: ltr
child: RenderSliverList#2982b NEEDS-LAYOUT NEEDS-PAINT
parentData: paintOffset=Offset(0.0, 0.0)
constraints: MISSING
geometry: null
no children current live
RenderBox was not laid out: RenderViewport#33c99 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'
The relevant error-causing widget was
ListView
lib/widgets/home_body_screen.dart:64
════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderViewport#33c99 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'
The relevant error-causing widget was
ListView
lib/widgets/home_body_screen.dart:64
I'm a newest in flutter, i understand some things, but not all.
My opinion is: "this error is caused by her possition, yeah, its scrollable but he does not know where ends". Sorry if i wrong.
thanks all!
To use ListView inner SingleChildScrollView, you need to disable scrolling property of ListView.
ListView(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
primary: false,
children: []
)

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.

FlatButton margin changed after a Flutter Upgrade

I have run a Flutter Upgrade and it has caused a regression on one of my Layout.
Here is the code:
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
FlatButton(
child: Icon(
Icons.remove,
color: Colors.black,
),
onPressed: () {
setState(() {
if (_debitValue > 1) _debitValue--;
});
},
),
Slider(
value: _debitValue.toDouble(),
min: 1.0,
max: 100.0,
onChanged: (double value) {
setState(() {
_debitValue = value.toInt();
});
},
),
FlatButton(
child: Icon(
Icons.add,
color: Colors.black,
),
onPressed: () {
setState(() {
if (_debitValue <100) _debitValue++;
});
},
),
],
),
This is a row with a '-' button, then a slider, then a '+' button.
It was displayed fine. Yesterday I have done a Flutter Upgrade and it now exceeds the width of the screen by 8 pixels. It says:
I/flutter (13431): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (13431): The following message was thrown during layout:
I/flutter (13431): A RenderFlex overflowed by 8.0 pixels on the right.
I/flutter (13431):
I/flutter (13431): The overflowing RenderFlex has an orientation of Axis.horizontal.
I/flutter (13431): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/flutter (13431): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
I/flutter (13431): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
I/flutter (13431): RenderFlex to fit within the available space instead of being sized to their natural size.
I/flutter (13431): This is considered an error condition because it indicates that there is content that cannot be
I/flutter (13431): seen. If the content is legitimately bigger than the available space, consider clipping it with a
I/flutter (13431): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
I/flutter (13431): like a ListView.
I have added some colors to see the margins used by the FlatButtons. They look pretty big. I have tried to change them but I didn't succeed. I have tried:
FlatButton(materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, ...)
I have seen that I can use an Inkwell instead of a FlatButton. It works but the effect on the button is different and I would like to understand how to do it with a FlatButton.
Thanks for your advices
I haven't tested it but maybe something like this could work?
Row(
children: <Widget>[
Expanded(
child: FlatButton(
...,
),
flex: 1,
),
Expanded(
child: Slider(
...,
),
flex: 4, //maybe play with this value to see what looks best
),
Expanded(
child: FlatButton(
...,
),
flex: 1,
),
],
),