I got a SingleChildScrollView looking like this:
Widget build(BuildContext context) {
return SingleChildScrollView(
physics: BouncingScrollPhysics(),
scrollDirection: Axis.vertical,
child: Container(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// ... some other widgets come here ...
CommunityListView(),
],
),
),
);
}
And the CommunityListView() inside of that is another SingleChildScrollView. My Problem is, once is scroll inside of the CommunityListView(), i can't get out of it and the user is stuck in this ScrollView.
Does someone know how I can fix that?
Thank you !
Please add physics to inner List as NeverScrollableScrollPhysics()
SingleChildScrollView is take height of their immediate child ..If you put SingleChildScrollView in their child then he can find the proper height so put height of first SingleChildScrollView's child then you can use it well
Related
I have this view in my app
and this is the code for it:
return Container(
color: Colors.black,
child: ListView(
children: <Widget>[
Column(
children: <Widget>[
...
],
)
],
),
);
But if I click on my form I get stuck and the list of items is hidden by the keyboard, so I'd like to make my Container scrollable.
How can I do?
Instead of wrapping your Column with a ListView try with a SingleChildScrollView instead. You can also try adding a bottom padding equal to keyboard size MediaQuery.of(context).viewInsets.bottom.
How can i make a column with many other things in it scrollable
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
Expanded(
flex: 10,
child: Stack(
children: <Widget>[..
Wrap the Column in a SingleChildScrollView widget.
If you want to have many other things scrollable you can look at slivers in flutter.
I believe they are a good fit for this.
I am trying to restrict the items(Containers) in the Row to 8 and if there are more items, they should be wrapped. I have a list of Containers but I can not use listView as children of Wrap since listView scrolls. Is there any way to get this layout fixed?
I have tried using for loop but as it hits return for the first time, it gets out of loop.
I have tried gridView instead of wrap but it doesn't give me the result as gridView is scrollable.
Expanded(
flex: 4,
child: Wrap(
direction: Axis.horizontal,
spacing: 0.5,
runSpacing: 0.5,
crossAxisAlignment: WrapCrossAlignment.center,
children: <Widget>[
// I want something that works like following line
//Container(child: kids1)
//currently I can get results with following code
kids1[1],
kids1[2],
kids1[3], kids1[4], kids1[5], kids1[6],
kids1[7], kids1[8], kids1[9], kids1[10],
kids1[11]
],
),
),
kids is a list of Containers
Why don't you create the list of children before the return of the build function :
#override
Widget build(BuildContext context) {
List<Widget> children = List.generate(myContainerList.length, (e) => myContainerList[e]);
return Wrap(
children: children,
);
}
I have some widgets that I want to display on a screen.
If the screen is large enough, the widgets should be centered on it like this:
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [...],
)
On small screens, I don't want the Column to overflow (black & yellow stripes) but instead, let the user scroll through them, as if they were in a ListView, like this:
ListView(
children: [...],
)
If I knew the dimensions of the widgets beforehand, I could change the layout to one of the above in a LayoutBuilder based on the incoming constraints.
However, I don't know how their dimensions, so is there any easy way to achieve this on the widget layer?
Use SingleChildScrollView with physics: ClampingScrollPhysics() to avoid unwanted scrolling, wrapped in Center widget.
e.g.
Center(
child: SingleChildScrollView(
physics: ClampingScrollPhysics(), // To prevent the content from being always scrollable even when overall height is smaller than the screen.
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [/*...*/],
)
)
)
You can wrap your column with a SingheChildScrollView and it should work for you.
I have in my body a tab then a column and in it I call to build a dynamic list of card using the another widget class. All seems to be working fine but I am getting this error.
The following message was thrown during layout:
I/flutter ( 5090): A RenderFlex overflowed by 115 pixels on the bottom.
The issue is that the list is not able to scroll despite me wrapping it into a flexible widget. Here is the code snippet which builds the the list.I have also enable physics: AlwaysScrollableScrollPhysics(), yet the same issue. I know if I fix a particular height it will work but I dont want to to do that cause that defeats the whole idea.
Widget buildDynamicList(BuildContext context) {
return new Flexible(
//decoration: new BoxDecoration(border: new Border.all(width: 2.0)),
//height:double.infinity,
//fit: FlexFit.loose ,
child: ListView.builder(
physics: AlwaysScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: vehicles.length,
itemBuilder: (BuildContext ctxt, int index) {
return Row(
mainAxisSize: MainAxisSize.max,
//mainAxisSize: MainAxisSize.max,
children: <Widget>[
RouteTile(index: index)
// expansionConfigurableRouteTile(ctxt, index),
],
);
}
)
);
}
Flexible only makes your child height variable. It does not make your lists scrollable. In order to do that, wrap your Flexible widget with a SingleChildScrollView widget.
removing shrinkWrap: true will do the trick