Hello everyone I want to dispaly some informations inside scaffold but I got
The relevant error-causing widget was: Scaffold.
Even when I remove it I still got errors:
this is the code :
Widget build(BuildContext context) {
return Scaffold(
body: ExpansionTile(
title: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
widget.model.name,
overflow: TextOverflow.ellipsis,
),
Text(
widget.model.id.toString(),
style: Theme.of(context).textTheme.caption,
)
],
),
leading: SingleChildScrollView(
child: Column(
// children: [
// Text(widget.model.mtu.toString()),
children: <Widget>[
StreamBuilder(
stream: widget.model.mtu,
initialData: 0,
builder: (c, snapshot) => ListTile(
title: const Text('MTU Size'),
subtitle: Text('${snapshot.data} bytes'),
),
// ],
),
],
),
),
trailing: TextButton(
onPressed: () {
setState(() {
buttonText = 'Connecting...';
});
widget.viewModel.establishConnectAndEnableNotify(widget.model);
},
child: Text(
buttonText,
style: TextStyle(color: AppColors.blue),
).tr(),
)));
}
}
I would be very thankful if you can help me
The issue occurring because of using ListTile, it is trying to get infinite width. You can wrap it with SizedBox and provide width. Using LayoutBuilder on top level will be better to get the parent widget width.
return Scaffold(
body: LayoutBuilder(
builder: (_, constraints) => ExpansionTile(
title: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[],
),
leading: SingleChildScrollView(
child: Column(
// children: [
// Text(widget.model.mtu.toString()),
children: <Widget>[
StreamBuilder(
// stream: "widget.model.mtu",
initialData: 0,
builder: (c, snapshot) => SizedBox(
width:
constraints.maxWidth * .2, //depend on you or hard-coded value
child: ListTile(
title: Text(' w ${constraints.maxWidth}'),
subtitle: Text('${snapshot.data} bytes'),
),
),
// ],
),
],
),
),
Also, I think you don't want to have SingleChildScrollView on leading, maybe you like to use it on children
Related
I want to put a small PageView into a Column, but I got error RenderBox was not laid out: RenderRepaintBoundary#db5f8 relayoutBoundary=up14 NEEDS-PAINT. The PageView will hold inconsistent data so I cannot set the height for it. Can anyone help me? This is my code:
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
bottomNavigationBar: BottomAppBar(
child: Container(
height: 70,
color: Colors.white,
),
),
body: FutureBuilder(
future: Data.getProductDetails(id: widget.product.id),
builder: (context, AsyncSnapshot snapshot) {
if (!snapshot.hasData) {
return Center(child: CircularProgressIndicator(color: Colors.grey));
} else {
List iList = [];
iList.add(widget.product.mainImg);
for (ProductImages i in snapshot.data.imgList) {
iList.add(i.image);
}
return CustomScrollView(
slivers: [
SliverAppBar(...),
SliverToBoxAdapter(
child: SingleChildScrollView(
padding: EdgeInsets.all(15),
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(...),
Row(...),
SizedBox(height: 10),
brandField(snapshot),
SizedBox(height: 5),
categoryField(snapshot),
SizedBox(height: 5),
tagsField(snapshot),
SizedBox(height: 20),
pageIndicator(),
Expanded(
child: PageView(
children: [
Container(height: 400, color: Colors.red),
Container(height: 600, color: Colors.blue),
],
),
)
],
),
),
),
],
);
}
},
),
);
}
You get this error because PageView and other widgets like ListView require size constraints from its parents and Column do not provide constraints to its children. So to solve the issue you can wrap you PageView inside Flexible or Expanded like so:
Column(
children:[
Expanded(child:PageView(),),
]
)
For better understanding of constrains in flutter, read: Understanding Constrains: Flutter.dev
I have the following SingleChildScrollView and I would like to be able to scroll when the user moves their finger up and down where the ListTiles are displayed. It seems that the tap detection of the list tiles obscures the scrolling which makes sense in a way, but how do I get it to do both (tap and scroll)?
My code looks like below:
return Scaffold(
appBar: AppBar(title: Text('Exersizes'),),
body: Column(
children: [
Container(
height: MediaQuery.of(context).size.height * 0.7,
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Exersizes',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold
),
),
FutureBuilder(
future: DBProvider.getData('exerscises'),
builder: (ctx, AsyncSnapshot<List<Map<String, dynamic>>> snapshot) => snapshot.connectionState == ConnectionState.waiting
? CircularProgressIndicator()
: ListView.builder(
shrinkWrap: true,
itemCount: snapshot.data!.length,
itemBuilder: (ctx, i) => ListTile(
title: Text(snapshot.data![i]['exersizeName']),
subtitle: snapshot.data![i]['iscardio'] == 1 ? Text('Type: cardio') : Text('Type: weights'),
leading: CircleAvatar(
backgroundColor: Theme.of(context).primaryColor,
child: FittedBox(child: Text(_weekDays[snapshot.data![i]['weekday']]!)),
),
onTap: () {print(snapshot.data![i]['exersizeName']);},
)
),
),
],),
),
),
ElevatedButton(
onPressed: () => Navigator.of(context).pushNamed(FormScreen.routeName),
child: Text('Add Exersize')
)
],
),
);
If you're having SingleChildScrollView, then you should disable the scrolling of ListView.builder. Try adding NeverScrollableScrollPhysics to physics in the ListView.builder
i would like to show a list of radiobuttons? this radiobuttons are contained in ListTile widget, i tried some code but nothing appears :
when i put a single radiobutton , this appears but when i put a listview nothing appears on the page including others widgets
Widget build(BuildContext context) {
return StoreConnector<MMpataState, MMpataViewModel>(
converter: MMpataViewModel.convertStateToViewModel,
builder: (BuildContext context, MMpataViewModel vm) {
// print(vm.state.subscriptions2);
if (vm.state.isSubscriptions2loaded &&
vm.state.subscriptions2.length < 1) {
return Scaffold(
appBar: AppBar(
title: Text("Aucune donnée"),
),
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Center(
child: Text(
"Nous n'avons trouvé aucune souscription pour le produit
sélectionné.",
),
),
),
);
}
return Scaffold(
appBar: AppBar(
title: Text(!vm.state.isSubscriptions2loaded ? "Chargement ... " :
vm.state.subscriptions2[0].product.libelle),
),
body: MMpataLoader(
inAsyncCall: _isLoading || !vm.state.isSubscriptions2loaded,
child:
Column(
children: <Widget>[
Form(
child: new Container(
color: Color(0xffFFFFFF),
child:
Column( crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Column(crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget> [
Padding(padding:EdgeInsets.fromLTRB(25.0, 0.0,
0.0, 0.0),
child: Column(crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget> [
Text(""),
Text(vm.state.subscriptions2[0].product.libelle,
textAlign:TextAlign.left,style:TextStyle()),
Text(vm.state.subscriptions2[0].product.description,
textAlign: TextAlign.left),
Expanded(
child: ListView.builder(shrinkWrap:true,
itemCount: vm.state.subscriptions2.length,
itemBuilder: (context, index) {
return RadioListTile<double>(
title:Text(
"${vm.state.subscriptions2[index].quota.libelle}
(${vm.state.subscriptions2[index].amount} CDF)"),
value: vm.state.subscriptions2[index].amount,
groupValue:vm.state.subscriptions2[index].amount,
onChanged: (double value) {
setState(() {
vm.state.subscriptions2[index].amount = value;
});
},
);
}),
),
])
),
_getActionButtons(vm),
SizedBox(height: 100)
]) ],
),
),
)
],
),
),
);
},
);
}
i have this error while running : RenderBox was not laid out
I'm reseaching now for more hours and don't get why it's not possible to put an image and a card with a bunch of ListTiles in a Row.
The error what im getting is:
The following assertion was thrown during performLayout():
BoxConstraints forces an infinite width.
The offending constraints were:
BoxConstraints(w=Infinity, 0.0<=h<=Infinity)
But i dont really get what exactly has to be in a Box should it be the Card with the ListTiles?
Can someone help me with this?
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child:
/* card == null
? loadCards()
: ListTile() */
SingleChildScrollView(
child: Card(
child: Row(mainAxisSize: MainAxisSize.min, children: [
Image.network(
"widget.card.imageUrl",
loadingBuilder: (BuildContext context, Widget child,
ImageChunkEvent loadingProgress) {
if (loadingProgress == null) {
return child;
}
return Center(
child: CircularProgressIndicator(
backgroundColor: Colors.red,
),
);
},
),
Card(
child: Column(mainAxisSize: MainAxisSize.min, children: [
ListTile(
trailing: Icon(Icons.play_arrow),
title: Text("Black Lotus"),
subtitle: Text("Name"),
),
Container(
child: Row(
children: [Icon(Icons.play_arrow), Icon(Icons.polymer)],
),
),
ListTile(
title: Text("Hello"),
),
ListTile(
title: Text("Hello"),
),
]),
),
]),
),
),
),
);
}
Wrap Card with Expanded/Flexible which will solve your constraint problem, Also it's very important to give image width, as at remaining space you are putting other widgets.
return Scaffold(
appBar: AppBar(
title: Text('Sample'),
),
body: SingleChildScrollView(
child: Card(
child: Row(mainAxisSize: MainAxisSize.min, children: [
Image.network(
"https://cdn.pixabay.com/photo/2018/07/11/21/51/toast-3532016_1280.jpg",
width: 40,
loadingBuilder: (BuildContext context, Widget child,
ImageChunkEvent loadingProgress) {
if (loadingProgress == null) {
return child;
}
return Center(
child: CircularProgressIndicator(
backgroundColor: Colors.red,
),
);
},
),
Expanded(
child: Card(
child: Column(mainAxisSize: MainAxisSize.min, children: [
ListTile(
trailing: Icon(Icons.play_arrow),
title: Text("Black Lotus"),
subtitle: Text("Name"),
),
Container(
child: Row(
children: [Icon(Icons.play_arrow), Icon(Icons.polymer)],
),
),
ListTile(
title: Text("Hello"),
),
ListTile(
title: Text("Hello"),
),
]),
),
),
]),
),
),
);
Your ListTile needs constraints so it knows where its bounds are.
Just give it some constraints (eg. by wrapping in a SizedBox with a width) or, if you want to take it as much space as possible, just wrap each ListTile with a Flex widget such as Flexible or Expanded if you want to share space evenly with all tiles on that Column.
I need to have some structure like this
I use LayoutBuilder to get the height of content (between App Bar and TabsBottomNavigation). Here i build Profile Info Container and want to build ListView with some List Tiles, but when I try to build it in Layout Builder I have errors in console.
If I create ListView out of LayoutBuilder it works!
Please help me to solve it.
My code below:
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints viewportConstraints) {
return SingleChildScrollView(
child: Container(
child: Column(
children: <Widget>[
Container(
height: viewportConstraints.maxHeight * .44,
color: Theme.of(context).primaryColor,
padding: EdgeInsets.only(bottom: 2),
child: Align(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_buildProfileImage(context),
SizedBox(height: 17),
Text(userName)
],
),
),
),
Expanded(
child: ListView(
children: <Widget>[
ListTile(
leading: Icon(Icons.print),
title: Text('asdad'),
)
],
),
)
],
),
),
);
},
);
}
Use below build method will work in your case. (I have checked and it's working, so I hope it will work in your case also and will fit in your requirement.)
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints viewportConstraints) {
return Container(
child: Column(
children: <Widget>[
Container(
height: viewportConstraints.maxHeight * .44,
color: Theme.of(context).primaryColor,
padding: EdgeInsets.only(bottom: 2),
child: Align(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_buildProfileImage(context),
SizedBox(height: 17),
Text(userName),
],
),
),
),
SizedBox(height: 16),
Flexible(
child: ListView(
children: <Widget>[
Card(
child: ListTile(
leading: Icon(Icons.print),
title: Text('asdad'),
),
),
],
),
),
],
),
);
},
);
}
I think SingleChildScrollView is of no use in this case so I removed it but you can use it if you fill so.
You still need to do some UI improvement as per your wish as this is the basic structure as per your requirement.
Hope this will help you.
You are using the LayoutBuilder in a wrong way.
It's supposed to be used to change the layout with the size of the device and/or orientation.
What you are trying to do is best accomplished with MediaQuery:
MediaQuery.of(context).padding.top //APP bar height
MediaQuery.of(context).padding.bottom //Bottom bar height
MediaQuery.of(context).size.height //Screen height
Widget build(BuildContext context) {
return Column(
children:<Widget>[
Expanded(
child:LayoutBuilder(
builder: (BuildContext context, BoxConstraints viewportConstraints) {
return SingleChildScrollView(
child: Container(
child: Column(
children: <Widget>[
Container(
height: viewportConstraints.maxHeight * .44,
color: Theme.of(context).primaryColor,
padding: EdgeInsets.only(bottom: 2),
child: Align(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_buildProfileImage(context),
SizedBox(height: 17),
Text(userName)
],
),
),
),
Expanded(
child: ListView(
children: <Widget>[
ListTile(
leading: Icon(Icons.print),
title: Text('asdad'),
)
],
),
)
],
),
),
);
},
),
),
]
);
}
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints viewportConstraints) {
return SingleChildScrollView(
child: ListView(
shrinkWrap: true,
children: <Widget>[
new Container(
height: MediaQuery.of(context).size.height/3,
color: Theme.of(context).primaryColor,
padding: EdgeInsets.only(bottom: 2),
child: Align(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_buildProfileImage(context),
SizedBox(height: 17),
Text(userName)
],
),
),
),
new ListView(
shrinkWrap: true,
children: <Widget>[
ListTile(
leading: Icon(Icons.print),
title: Text('asdad'),
)
],
)
],
),
);
},
);
}
If you read the error log, it says non-zero flex incoming but constraints are unbounded. To understand that clearly, imagine Flutter is trying to draw pixels of something that not finite. That's the our problem.
Widgets like ListView or SingleChildScrollView are flex widgets and has no limits unlike Column or Row.
If you have children that sizes are not definite, then you have to define flex for your ListView. For that, you can use shrinkWrap or Flexible, Expanded widgets for both ListView itself or children.
And here is the my solution, simplified as much as possible:
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints viewportConstraints) {
return ListView(
shrinkWrap: true, // That's it
children: <Widget>[
Container(
color: Theme.of(context).primaryColor,
height: viewportConstraints.maxHeight * .44,
padding: EdgeInsets.only(bottom: 2),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_buildProfileImage(context),
SizedBox(height: 17),
Text(userName)
],
),
),
ListTile(
leading: Icon(Icons.print),
title: Text('asdad'),
),
ListTile(
leading: Icon(Icons.print),
title: Text('asdad'),
),
ListTile(
leading: Icon(Icons.print),
title: Text('asdad'),
)
],
);
},
);
}
Meanwhile, you have too many children that does nothing. If you want different scrolling behavior inside the Profile Info and ListTiles parts, tell me because we will must create yet another ListView for achieve that.
Also if you share your buildProfileImage widget, we can optimize your code even further, because you may even not need the LayoutBuilder widget in this case.