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(),
)
Related
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.
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.
[enter image description here][1]
Inside My column, there is a stack, a carousel slider,a gridview builder. I want to scroll all of them together. I tried to use singlechildscrollview as you can see in the code below. Please Someone help me how can I scroll those things together.
[1]: https://i.stack.imgur.com/FYexC.png` enter code here`
Scaffold(
backgroundColor: Colors.orange,
// Color(0xFFFFF176),
body: SingleChildScrollView(
child: Column(
children: [
Expanded(
child: Stack(
alignment: Alignment.bottomCenter,
children: [
CarouselSlider(
items: slideImage
.map((image) =>
Builder(builder: (BuildContext context) {
return Container(
height: 200,
width: 500,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
image: DecorationImage(
image: AssetImage(image),
fit: BoxFit.fill),
),
);
}))
.toList(),
options: CarouselOptions(
onPageChanged: (index, reason) {
setState(() {
activeIndex = index;
});
},
height: 300,
viewportFraction: 1,
autoPlay: true,
),
),
Padding(
padding: const EdgeInsets.all(10.0),
child: AnimatedSmoothIndicator(
activeIndex: activeIndex, count: slideImage.length),
),
],
),
),
SizedBox(
height: 10,
),
Expanded(
child: GridView.builder(
shrinkWrap: true,
// physics: NeverScrollableScrollPhysics(),
itemCount: menuImage.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 0.8,
crossAxisSpacing: 8,
mainAxisSpacing: 8,
),
itemBuilder: (context, index) => Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
color: Color(0xFFFFFDE7),
elevation: 10,
child: GridTile(
child: Column(
children: [
Image.asset(
menuImage[index],
fit: BoxFit.fill,
),
Text(
title[index],
style: TextStyle(fontSize: 18),
),
],
),
),
),
),
),
],
),
),
);
}
}
It would be best if you gave height to the column you are using singlechildeScrollview.
Wrap column widget in container or sizedbox widget and give it height.
column widget has children widget GridView.builder that is wrapped in expanded so gridview.builder will try to take all available height in the column which will be infinite because it's not defined and you will get column covering screen taking infinite screen height in short blank screen.
In flutter, Column will take height as much as it can, SingleChildScrollView child dont have height (infinite). Combine together, Flutter don't know how to render them correctly and causing error.
To solve it, try to determine the height of Column by widgget like SizedBox or determine the mainSize.min.
Another way to solve it is wrap Column by IntrinsicHeight but not recommend cause it heavy.
If it takes too much height. so give height to the column.
like this..
SingleChildScrollView(
child: SizedBox(
height: 500,
child: Column(
children: const [...],
),
),
)
your expanded widget is taking whole space of column try removing it or replacing it with Sizedbox.
I have ListView Builder widget and it has pictures. When user click add button , it adds a picture to ListView. It is a card game. I want ListView builder horizontally but its overflow. I dont want that.
I want ListView Builder dont overflow. I want new line for listview Builder.
Heres my code :
Expanded(
flex: 2,
child: Column(
children: [
Expanded(
child: ReusableCard(
colour: Colors.green,
cardChild: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: cardBrain.mycards.length,
itemBuilder: (context, i) => Image(
height: 10,
width: 55,
image: AssetImage(
'${cardBrain.mycards[i].image}',
),
),
),
),
),)
you can use gridView.builder
when you added a item to list then call setState
I am using a CustomScrollView. I have added a few slivers in it but one of my children has to be a stack which has a list as on of its two children. I tried using SliverToBoxAdapter but that makes the list in the stack non scrollable which is the obvious behaviour. Is there a way to to write some kind of SliverToSliverAdapter? I tried reading the SliverPadding but its looks too complicated for me to understand. Below is my code:
CustomScrollView(
key: PageStorageKey<String>(name),
slivers: <Widget>[
SliverOverlapInjector(
handle:
NestedScrollView.sliverOverlapAbsorberHandleFor(context)),
SliverToBoxAdapter(
child: Stack(
children: <Widget>[
Container(
width: double.infinity,
height: 50,
decoration: BoxDecoration(color: pink),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 30),
child: ListView.builder(
padding: const EdgeInsets.all(0),
shrinkWrap: true,
itemBuilder: (context, index) {
return buildSongRow(songs[index]);
},
itemCount: songs.length,
),
)
],
)),
],
);
Stack widget use parent's size by default. While parent widget is CustomScrollView that decide it's size mean, it will get infinite height. To solve this issue, we can wrap Stack with SizedBox(height:x).
Next issue comes on Stack about scrolling and widget visibility. Widget render prioritize bottom to top and same for the scroll event. While Container(height:50) is the first child of Stack, it will be paint behind ListView and in this case we can have full-scroll event on ListView.
We can move Container<height:50> at the bottom to paint it over ListView. In this case, scroll-event won't work on Container<h:50> portion.
We can wrap Container<h:50> and ListView with SizedBox by providing height and use Align or Positioned widget to place them on Stack. Also, we can increase itemCount+1 and use an empty SizedBox(height:50)(on index 0) that will take same amount of height as Container(height:50) and help to view only for 1st time on Stack.
I am using LayoutBuilder to get the size/constraints of screen.
return Scaffold(
body: LayoutBuilder(
builder: (context, constraints) => CustomScrollView(
slivers: [
const SliverAppBar(
title: Text("Stack On CustomScrollView"),
),
SliverToBoxAdapter(
child: SizedBox(
height: constraints.maxHeight * .3, // used by stack
child: Stack(
children: [
Align(
alignment: Alignment.topCenter,
child: Container(
// dont need to use sizedBox here, height is fixed by container's height:50
height: 50,
color: Colors.pink,
alignment: Alignment.center,
child: const Text("Stack Child: Container<height: 50>"),
),
),
Align(
alignment: Alignment.bottomCenter,
child: SizedBox(
height: constraints.maxHeight * .3 - 50,
child: ListView.builder(
itemCount: 4,
itemBuilder: (context, index) => Container(
alignment: Alignment.center,
height: 50,
color: index.isEven
? Colors.deepOrange
: Colors.deepPurple,
child: Text("ListViewItem:$index"),
),
),
),
),
],
),
),
),
SliverList(
delegate: SliverChildListDelegate(
[
...List.generate(
44,
(index) => Container(
height: 100,
alignment: Alignment.center,
color: index.isEven ? Colors.cyanAccent : Colors.blueGrey,
child: Text("SliverList $index"),
),
),
],
),
),
],
),
),
);