How to implement multiple horizontal lists inside a column - flutter

I want to implement multiple horizontal lists that contain cards with some details, and now all i get is just white screens(without errors)
This is my code:
Scaffold(
body: Column(
children: <Widget>[
Expanded(
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 50,
itemBuilder: (BuildContext context, int index) {
Card(
child: Column(
children: <Widget>[
Text('fsfssffs'),
],
),
);
},
),
),
SizedBox(
height: 20.0,
),
Expanded(
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 50,
itemBuilder: (BuildContext context, int index) {
Card(
child: Column(
children: <Widget>[
Text('fsfssffs'),
],
),
);
},
),
),
],
),
);
I want to achieve something like the facebook stories

Use => on List itemBuilder to return the items:
Scaffold(
body: Column(
children: <Widget>[
Expanded(
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 50,
itemBuilder: (BuildContext context, int index) =>
Card(
child: Column(
children: <Widget>[
Text('fsfssffs'),
],
),
);
},
),
),
SizedBox(
height: 20.0,
),
Expanded(
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 50,
itemBuilder: (BuildContext context, int index) =>
Card(
child: Column(
children: <Widget>[
Text('fsfssffs'),
],
),
);
},
),
),
],
),
);

You were not returning any widget from your itemBuilder method which is why you were unable to see anything on screen.
Basically, there are 2 solutions for this, I am giving you idea using a build() method you can do it in your itemBuilder.
(1) Use => (fat arrow notation)
Example:
Widget build(context) => Text("Hi");
(2) Use return.
Widget build(context) {
return Text("Hi");
}

Related

Why do I get this error when using Expanded

After many attempts and trying different things, I get the same error ( throw constraintsError ) as soon as I add Expanded, while the error disappears by deleting it,, i I want the upper part to be fixed and the other part to be Scrollable
thanks
SingleChildScrollView(
child: Column(
children: [
Column(
children: [
Container(), // fixed
Row(), // fixed
**Expanded**(
child: Container(
color: constants.kLightGrayColor,
child: ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
controller: controller.scrollController,
itemCount: data.posts.length,
itemBuilder: (context, index) {
firstly cannot used Expanded inside SingleChildScrollView.
to work normally pls remove SingleChildScrollView widget and remove outer Column,
used one of Column in green box.
it is small example
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
children: [
Container(
height: 200,
width: MediaQuery.of(context).size.width,
color: Colors.red,
child: const Center(child: Text("Fixed Box")),
),
Expanded(
child: ListView.builder(
shrinkWrap: true,
itemCount: 20,
itemBuilder: (context, index) {
return ListTile(
title: Text("$index"),
);
},
),
),
],
),
);
}

Flutter | How to add a SizedBox() as the last item of a ListView.builder()?

I'm trying to put some space or a SizedBox() as the last item of the ListView,
because the FloatingActionButton() is hiding some information from the last ListTile.
I want to scroll to the space/SizeBox() like WhatsApp for example.
body: ListView.builder(
itemCount: cardsList.length,
itemBuilder: (context, i) {
return Column(
children: [
ListTile( ... ),
Divider( ... ),
],
);
},
),
ListView has padding property
body: ListView.builder(
padding: const EdgeInsets.only(bottom: 100),
itemCount: cardsList.length,
itemBuilder: (context, i) {
return Column(
children: [
ListTile( ... ),
Divider( ... ),
],
);
},
),
You can wrap your ListView with the Column widget. In that widget add the SizedBox. Like this:
body: Column(
children: [
ListView.builder(
itemCount: cardsList.length,
itemBuilder: (context, i) {
return Column(
children: [
ListTile( ... ),
Divider( ... ),
],
);
},
),
SizedBox(height: 50.0)
]
)
I think you want this
ListView.builder(
itemCount: cardsList.length + 1,
itemBuilder: (context, index) =>
index < items.length ? myListTile() : SizedBox(),
),

Flutter: Add ReorderableList inside a ListView

The issue I have is adding a ReorderableList inside a ListView, the ReorderableList does not allow for reordering now. I can scroll the list but the long press for reodering is not active anymore. Here is my code:
Widget get _reorder => ReorderableList(
physics: ClampingScrollPhysics(),
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) => _cells[index],
itemCount: _cells?.length ?? 0,
onReorder: _setListOrder,
);
#override
Widget build(BuildContext context) {
return Container(
decoration: context.logoBackground,
child: SafeArea(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Expanded(
child: ListView.builder(
shrinkWrap: true,
itemCount: 1,
itemBuilder: (BuildContext context, int index) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
_reorder,
Text('End of List Widget')
],
);
}),
)
],
),
),
);
}
I did it with ReorderableListView instead of ReorderableList like this:
void _setListOrder(int oldIndex, int newIndex) {
print('old: $oldIndex, new: $newIndex'); // You need to implement the method!
}
var _cells = List.generate(30, (index) { // Your cells
return ListTile(
key: Key('$index'),
title: Text(
'$index',
),
);
});
Widget get _reorder => ReorderableListView.builder(
physics: ClampingScrollPhysics(),
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) => _cells[index],
itemCount: _cells?.length ?? 0,
onReorder: _setListOrder,
);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: SafeArea(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Expanded(
child: ListView( // I transformed it to simple ListView because you have one children
shrinkWrap: true,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height, // You need this height, or a custom height!
child: _reorder),
Text('End of List Widget')
],
)
],
),
)
],
),
),
),
);
}
If you want to check the documentation, you can do it here!

GestureDetector on ListView.builder in Flutter

I am trying to add a GestureDetector on my ListView widget which contains Images but it does not seem to work. A similar question has been asked about it before but that did not help either.
Here is my code:
ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext ctx, int index) {
return Container(
width: 160,
child: Card(
child: Wrap(
children: <Widget>[
GestureDetector( onTap: () => Print_on_layout(index),
child: Image.network(a[index], fit: BoxFit.fill,)
)
],
),
),
);
},
itemCount: a.length,
),
I suppose this has something to do with the wrap Widget, which might be messing with the space where the tap can be detected. Try removing it. If that doesn't work, please tell us if you get an error.
Use gesturedetector as a parent of the container not on image.
as in the list you are only returning a single widgit so you should container with gesture detector.
Try this code:
ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext ctx, int index) {
return
GestureDetector(onTap: () => Print_on_layout(index),
child: Container(
width: 160,
child: Card(
child: Wrap(
children: <Widget>[
Image.network(a[index], fit: BoxFit.fill,)
],
),
),
),
);
},
itemCount: a.length,
),

How to create a combined, scrollable List in a Drawer in Flutter

I wan´t to have a combination of text-widgets and lists inside a drawer. This content should be scrollable.
Here´s my sourcecode:
return Drawer(
child: Expanded(
child: Column(
children: <Widget>[
AppBar(title: Text('Test'),),
Text('Example 1:'),
ListView.separated(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: _brands.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
....);
},
separatorBuilder: (BuildContext context, int index) =>
const Divider(height: 5),
),
Text('Another heading')
],
),
),
);
What I want to achive:
The AppBar is fixed at the top
The other content below should be scrollable
I´ve tried different ways with Expanded, Columns etc. but I wasn´t able to get this layout up and running as expected. Thanks in advance for any input!
you can use a single column with the listview places inside an expanded widget
return Drawer(
child: Column(
children: <Widget>[
AppBar(),
Expanded(
child: ListView.separated(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: 100,
itemBuilder: (context, index) {
return Text(index.toString());
},
separatorBuilder: (BuildContext context, int index) =>
const Divider(height: 5),
),
),
],
),
);
yeilds
For short you can wrap your ListView with Expanded widget, it will fill all available space, but you will able to scroll it. In another case you should wrap ListView with Container and set height property.
For your example:
Drawer(
child: Column(
children: <Widget>[
AppBar(title: Text('Test'),),
Text('Example 1:'),
Expanded(
child: ListView.separated(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: List.generate(100, (index) => index).length,
itemBuilder: (BuildContext context, int index) {
return ListTile(leading: Text("$index"),);
},
separatorBuilder: (BuildContext context, int index) =>
const Divider(height: 5),
),
),
Text('Another heading')
],
),
),