I want to set,
user can scroll and see the admins --- inside red marked container (look at the picture).
"Admins" Text don't want to scroll
Listtiles in ListView.Builder only scroll inside red area marked in picture (red area = Container)
my try here :
Container(
height: 300,
child: Column(
children: [
const CustomText(
align: TextAlign.start,
size: 20,
text: "Admins",
textColor: Colors.white,
fontWeight: FontWeight.w500,
),
ListView.builder(
physics: AlwaysScrollableScrollPhysics(),
scrollDirection: Axis.vertical,
itemCount: itlength,
shrinkWrap: true,
itemBuilder: (context, index) {
return Container(
padding: const EdgeInsets.symmetric(
horizontal: 5, vertical: 10),
child: ListTile(
title: Text(name),
subtitle:
Text(sub),
),
);
},
),
],
),
)
Wrapping your ListView with Expanded to take all the available space will fix it but make sure that the parent of the container is Column not a Scrolling widget.
Related
I want to remove spacing inside my container and I cannot seem to get it right, I tried using height but it still does not work.
my code:
Widget build(BuildContext context) => SizedBox(
height: 440,
child: Container(
//grey color
color: CustomTheme().neutral100,
child: Padding(
padding: const EdgeInsets.fromLTRB(
xxLargePadding, xLargePadding, xxLargePadding, largePadding),
child: ListView.separated(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (_, index) => Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
officials[index].fullName,
style: TextStyle(
fontSize: 12, color: CustomTheme().neutral500),//white color
),
Text(
officials[index].type,
style: TextStyle(
fontSize: 12, color: CustomTheme().neutral400),
),
],
),
separatorBuilder: (_, index) => const Padding(
padding: EdgeInsets.symmetric(vertical: largePadding),
child: Divider(),
),
itemCount: officials.length),
),
),
);
The results looks like the screenshot below:
I want to remove the spacing at the top where I highlighted with red.
There seems to be something making that space, I just do not get it.
Your help will be highly appreciated.
This is because you are using padding inside the container, set 0 to top and bottom also set listview padding to 0:
Container(
//grey color
color: CustomTheme().neutral100,
child: Padding(
padding: const EdgeInsets.fromLTRB(xxLargePadding, 0, xxLargePadding, 0), // <--- change this
child: ListView.separated(
padding:EdgeInsets.zero, // <--- add this
...
)
a tip for your code for cleaner code, change your separatorBuilder to this:
separatorBuilder: (_, index) => Divider(
height: largePadding + 16,// largePadding + Divider's default height value
),
the padding property in the ListView takes by default an extra value, you need to set it to 0 like this:
ListView(
padding: const EdgeInsets.all(0),
// ...
I've got a ListView within a Column. In that Listview I want to place a couple of ListTiles. Unfortunately the tiles behave weird when scrolling. They are shown on top of the other widget placed in the Column
Is there a way to prevent that behaviour of ListTile?
Here is my code:
Column(children: [
const ChatHeader(),
Padding(
padding: const EdgeInsets.all(8),
child: SizedBox(
height: 300,
child: ListView.builder(
padding: const EdgeInsets.only(left: 8, right: 8),
scrollDirection: Axis.vertical,
itemCount: myCollection,
shrinkWrap: true,
physics: const BouncingScrollPhysics(),
itemBuilder: (BuildContext context, int index) {
var item = myCollection[index];
return Column(children: [
Row(
children: [
Container(
decoration: boxDecoration(
radius: 20, bgColor: d_colorPrimary)),
text("${item.value1}", fontSize: textSizeMedium)
],
),
ListTile(
dense: true,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(8))),
tileColor: quiz_light_gray,
title: SizedBox(
child: text(item.name,
fontSize: textSizeMedium,
textColor: d_textColorPrimary,
isLongText: true,
maxLine: 10)))
]);
}))),
16.height,
Container(color: greenColor, child: Text("text input here"))
]);
Replacing the ListTiles with a Container solves this problem. As far as I can see there is no property to prevent that behaviour. Still want to use ListTiles.
Perhaps this is because of the usage of BouncingScrollPhysics().
Try replacing it with Neverscrollablescrollphysics() or just wrap the whole Listview.builder with an Expanded widget. which will let you won't use shirnkWrap and physics properties.
If the Container widget fixes the issue then you can try wrapping Listile() with another Sizedbox() widget.
I've wrapped the SizedBox with the ListView in a Material widget. That solved the problem.
I want to display a Container with Text followed by a ListView of categories. In my current code, it works out except that I wasn't able to figure out, how to make the Text and Container scrollable as well (so it moves upside away out of the frame).
It looks currently like this:
The blue container is static and stays at its location while the red ListView is perfectly fine scrollable.
Current Code:
body: Container(
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Container(
padding: EdgeInsets.fromLTRB(15, 0, 0, 10),
child: Align(
alignment: Alignment.topLeft,
child: const Text("Browse through the individual categories...", style: TextStyle(fontSize: 32, color: Colors.black, fontWeight: FontWeight.w900)),
),
),
Expanded(
child: ListView.builder(
itemCount: 20,
itemBuilder: (context, index){
return Padding(
padding: const EdgeInsets.all(8.0),
child: Category(),
);
}
),
),
],
),
I tried to implement this answer.
body: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Container(
padding: EdgeInsets.fromLTRB(15, 0, 0, 30),
child: Align(
alignment: Alignment.topLeft,
child: const Text("Browse through the individual categories...", style: TextStyle(fontSize: 32, color: Colors.black, fontWeight: FontWeight.w900)),
),
),
Expanded(
child: ListView.builder(
shrinkWrap: true,
primary: false,
itemCount: 20,
itemBuilder: (context, index){
return Padding(
padding: const EdgeInsets.all(8.0),
child: Category(),
);
}
),
),
],
),
),
I get the following errors:
RenderFlex children have non-zero flex but incoming height constraints are unbounded.
RenderBox was not laid out: RenderFlex#12630 relayoutBoundary=up11 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
Add these lines in your listview
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
You can skip the Expanded widget for this solution.
Just removed SingleChildScrollView widget it will work.
Wrap with SingleChildScrollView widget and then add physics : NeverScrollableScrollPhysics() to ListView widget.
Idea is to put a ListView.builder and an Image together side by side horizontally.
So, I put the ListView.builder and the Image in a Row.
This Row is inside a ListView which has other children too.
The problem is that before I introduced the Row, the ListView.builder was showing up properly. Now with Row, ListView.builder and an Image are NOT being shown.
There are no errors, just the contents are invisible.
Row(
children: <Widget>[
ListView.builder
(
shrinkWrap: true,
physics: ClampingScrollPhysics(),
itemCount: list3.length,
itemBuilder: (BuildContext ctxt, int Index)
{
return new ListView
(
shrinkWrap: true,
padding: const EdgeInsets.all(1),
children: <Widget>
[
ListTile(
leading: CircleAvatar(
radius: 6.0,
backgroundColor: Colors.black,
),
title : Text(list3[Index], style: TextStyle(color: Colors.red, fontSize: 25,),)
),
]
);
},
),
Expanded(
child: Image(
image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
height: 15,
width: 15,
fit: BoxFit.cover,
)
),
],
),
Wrap your ListView.builder with Expanded.
The ListView is inside a Row and needs a width, so that the other element can expand in the remaining area. So wrap it inside a SizedBox.
SizedBox(
width: 300,
child: ListView.builder(),
)
I was able to implement the scrollable horizontal list view in flutter. But I need to put the scrollbar to be at the middle of the List. Right now is at the left which is the starting point of my list.
here is my current scrollable listview
Widget build(BuildContext context) {
return Container(
// padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 24.0),
margin: EdgeInsets.all(5.0),
height: MediaQuery.of(context).size.height * 0.25,
child: Scrollbar(
isAlwaysShown: true,
controller: _scrowllController,
thickness: 3.0,
child: ListView.builder(
controller: _scrowllController,
scrollDirection: Axis.horizontal,
itemCount: numbers.length,
itemBuilder: (context, index) {
return Container(
width: MediaQuery.of(context).size.width * 0.4,
child: Card(
color: Colors.blue,
margin: EdgeInsets.only(bottom:30.0, right: 10.0),
child: Container(
child: Center(
child: Text(
numbers[index].toString(),
style: TextStyle(color: Colors.white, fontSize: 36.0),
)),
),
),
);
},
),
),
);
}
here is what the code above showing
enter image description here
And this is what i want to be shown when you first open the app
enter image description here
Set the initialScrollOffset of your scrollController to be numbers.length / 2 * itemWidth
Also since your items are all the same width I recommend setting the itemExtent of the ListView since that has a big impact on performance