Display ListView items in a row - flutter

I am having a hard time figuring out how to get my FilterChips in a row.
I would like to display all FilterChips per category in a row and not in a seperated column.
Tried different approaches but non of them seems to work.
Hopefully someone can help me with this, thanks for help!
Here is my code:
Widget _buildListView(List<Category> categories) {
return Column(
children: [
Expanded(
child: ListView.builder(
shrinkWrap: true,
itemCount: categories.length,
itemBuilder: (context, index) {
return _buildSection(categories[index]);
},
),
),
],
);
}
Widget _buildSection(Category category) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
category.title,
style: TextStyle(fontSize: 18),
),
// How can I get my FilterChips side by side?
Row(
children: [
Flexible(
child: ListView.builder(
shrinkWrap: true,
physics: ClampingScrollPhysics(),
itemCount: category.interests.length,
itemBuilder: (context, index) {
Interest interest = category.interests[index];
return FilterChip(label: Text(interest.interest), onSelected: (isSelected){
selectedInterests.add(interest.id);
});
return Text(interest.interest);
}),
),
],
),
],
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: FutureBuilder(
future: categories,
builder: (context, snapshot) {
if (snapshot.hasData) {
List<Category> categories = snapshot.data;
return _buildListView(categories);
}
return Center(child: CircularProgressIndicator());
},
),
);
}

class StackOver extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.only(
top: 60,
left: 10.0,
right: 10.0,
),
child: Wrap(
children: List.generate(
10,
(index) {
return FilterChip(
label: Text('index $index'),
onSelected: (val) {},
);
},
),
),
),
);
}
}
RESULT:

Related

How to use Listview inside SingleChildScrollView?

I am facting an issue related to scroll listview inside SingleChildScrollView which listview scroll controller is not working.
Getx Controller
var scrollController = ScrollController();
#override
void onInit() {
scrollController.addListener((){
if(scrollController.position.maxScrollExtent==scrollController.offset){
//fetch more data
}
});
}
Some code in Screen
Widget build(BuildContext context) {
return Obx(
() => SingleChildScrollView(
child: Column(
children: [
MyFormFilterWidget(),
Text("Found:${controller.aspList.length}"),
controller.aspIsLoading.value
? ProductLoading()
: controller.aspList.isNotEmpty
shrinkWrap: true,
padding: themePadding,
controller: controller.scrollController,
itemCount: controller.aspList.length + 1,
itemBuilder: (_, index) {
if (index < controller.aspList.length) {
return ProductCard(
product: controller.aspList[index]);
} else {
return controller.aspIsMoreLoading.value
? SizedBox(
width: 200,
child: Center(
child: Padding(
padding: EdgeInsets.all(10),
child: CircularProgressIndicator(
color: primaryColor),
),
),
)
: controller.aspLastPage.value
? SizedBox(
width: 200,
child: Padding(
padding: EdgeInsets.all(10),
child: Text("No more data",
textAlign: TextAlign.center),
),
)
: SizedBox.shrink();
}
},
separatorBuilder: (BuildContext context, int index) {
return const SizedBox(height: 10);
},
)
: const EmptyProduct(),
],
);
}
In this case, scrollController not working
If I remove SigleScrollView and only return ListView, it works as normal.
You can just have column instead of ListView here.
body: SingleChildScrollView(
child: Column(
children: [
Text("A"),
for (int i = 0; i < 10; i++)
Column(
children: [
Text("item $i"),
Text("Divider of $i"),
],
)
],
),
),
With shrinkWrap: true
SingleChildScrollView(
child: Column(
children: [
Text("A"),
ListView.builder(
shrinkWrap: true,
itemCount: 222,
itemBuilder: (context, index) => Text(" $index"),
)
],
),
),
Better and recomanded CustomScrollView
return Scaffold(
body: CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: Text("a"),
),
SliverList(
delegate: SliverChildBuilderDelegate((context, index) {
return Text("item $index");
}, childCount: 133),
)
],
),
);

How to make lazy loading with FutureBuilder in flutter

I searched in a lot of topics but couldn't find solution to my problem. I try to make lazy loading with FutureBuilder to listview. All topics I found the code different from what I have. I don't want to apply it from a package. Sorry about that but I'm still not a professional in flutter. Can someone help me.
thank you
My code:
class _HomePageState extends State<YourPost> {
#override
void initState() {
super.initState();
}
Future ApiUserPost() async {
final String url = '*************';
var response = await http.post(Uri.parse(url));
var responsebody = jsonDecode(response.body);
if (responsebody.length > 0) {
return responsebody;
} else {
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
FutureBuilder(
future: ApiUserPost(),
builder: (context, AsyncSnapshot snapshot) {
if (snapshot.hasData) {
return ListView.builder(
physics: ScrollPhysics(),
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: snapshot.data.length.clamp(0, 6),
itemBuilder: (context, index) {
return Card(
// elevation: 1,
child: Container(
padding: EdgeInsets.all(6),
child: Row(
children: <Widget>[
Flexible(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
MergeSemantics(
child: Row(
children: <Widget>[
Flexible(
child: Text(
"${snapshot.data[index]['name']}",
),
)
],
),
),
SizedBox(height: 5),
],
),
)
],
),
),
);
});
} else if (snapshot.hasError) {
Center(
child: CircularProgressIndicator(
valueColor:
new AlwaysStoppedAnimation<Color>(Colors.black),
),);
}
return SizedBox(
height: MediaQuery.of(context).size.height / 1.3,
child: Center(
child: CircularProgressIndicator(
valueColor:
new AlwaysStoppedAnimation<Color>(Colors.black),
),
),
);
})
],
),
),
),
));
}
}
I think the main problem is that you're not indicating the generic types (Class)on some places. When you working with Futures and FutureBuilder you have to specify what type you're working with..
Future<TypeYouExpected> apiUserPost() async {
//Try to specify the type of the variables too
}
The FutureBuilder widget also has to know that type..
body: FutureBuilder<TypeYouExpected>(
future: apiUserPost(),
builder: ..

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!

How to use Expansion Tile with ListView inside Column in Flutter

I am trying to create a custom drawer.
I want to make DrawerHeader fixed. However, I want ExpansionTile and ListView scrollable.
https://imgur.com/a/lWeDWOO ,
https://imgur.com/a/tR68ECK
class _NavigationDrawerState extends State<NavigationDrawer> {
#override
Widget build(BuildContext context) {
return Drawer(
child: Column(
children: <Widget>[
DrawerHeader(
child: Column(....),
ExpansionTile(
title: Text('Roles'),
children: [
ListView.builder(
itemBuilder: _buildRolesList,
itemCount: roles.length,
shrinkWrap: true,
)
],
),
ListView.builder(
shrinkWrap: true,
itemBuilder: _buildList,
itemCount: myList.length,
),
],
),
);
}
Widget _buildList(BuildContext context, int index) {
return ListTile(
leading: Icon(icons[myList[index].toLowerCase()]),
title: Text(myList[index]),
);
}
Widget _buildRolesList(BuildContext context, int index) {
return ListTile(
dense: true,
title: Text(roles[index]),
onTap: () {},
);
}
}
Try this:
class _NavigationDrawerState extends State<NavigationDrawer> {
#override
Widget build(BuildContext context) {
return Drawer(
child: Column(
children: <Widget>[
ExpansionTile(
title: Text('Roles'),
children: [
SizedBox(
height: MediaQuery.of(context).size.height - 100,
child: ListView.builder(
itemBuilder: _buildRolesList,
itemCount: roles.length,
shrinkWrap: true,
),
)
],
),
Expanded(
child: ListView.builder(
shrinkWrap: true,
itemBuilder: _buildList,
itemCount: myList.length,
),
),
],
),
);
}
Widget _buildList(BuildContext context, int index) {
return ListTile(
leading: Icon(icons[myList[index].toLowerCase()]),
title: Text(myList[index]),
);
}
Widget _buildRolesList(BuildContext context, int index) {
return ListTile(
dense: true,
title: Text(roles[index]),
onTap: () {},
);
}

How to implement Nested ListView in Flutter?

What is the preferred way to achieve a nested ListView, or in other words, ListView Widgets that could be included within a scrollable parent?
Imagine a "Reports" page, where a section is an itemized list.
For child ListView, use that parameter:
shrinkWrap: true,
physics: ClampingScrollPhysics(),
Adding physics: ClampingScrollPhysics() and shrinkWrap: true did the trick for me.
sample code:
#override
Widget build(BuildContext context) {
return Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Expanded(
child: ListView.builder(
shrinkWrap: true,
itemCount: 123,
itemBuilder: (BuildContext context, int index) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Parent'),
ListView.builder(
itemCount: 2,
physics: ClampingScrollPhysics(),
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return Text('Child');
}),
],
);
}),
)
],
),
);
}
If you want to have the inner ListView be scrollable independently of the main scroll view, you should use NestedScrollView. Otherwise, use a CustomScrollView.
Here is some code illustrating the NestedScrollView approach.
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
body: new NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
new SliverAppBar(
pinned: true,
title: new Text('Flutter Demo'),
),
];
},
body: new Column(
children: <Widget>[
new FlutterLogo(size: 100.0, colors: Colors.purple),
new Container(
height: 300.0,
child: new ListView.builder(
itemCount: 60,
itemBuilder: (BuildContext context, int index) {
return new Text('Item $index');
},
),
),
new FlutterLogo(size: 100.0, colors: Colors.orange),
],
),
),
);
}
}
For inner Listview I have just added below code and it solved for me
shrinkWrap: true,
physics: ScrollPhysics(),
Screenshot:
Code:
var _container = Container(
height: 200,
color: Colors.blue,
margin: EdgeInsets.symmetric(vertical: 10),
);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("ListView")),
body: Padding(
padding: const EdgeInsets.all(40.0),
child: ListView( // parent ListView
children: <Widget>[
_container,
_container,
Container(
height: 200, // give it a fixed height constraint
color: Colors.teal,
// child ListView
child: ListView.builder(itemBuilder: (_, i) => ListTile(title: Text("Item ${i}"))),
),
_container,
_container,
_container,
],
),
),
);
}
Thanks to Serdar Polat:
ListView.builder( // outer ListView
itemCount: 4,
itemBuilder: (_, index) {
return Column(
children: [
Container(
color: Colors.blue,
alignment: Alignment.center,
child: Text('Header $index'),
),
ListView.builder( // inner ListView
shrinkWrap: true, // 1st add
physics: ClampingScrollPhysics(), // 2nd add
itemCount: 10,
itemBuilder: (_, index) => ListTile(title: Text('Item $index')),
)
],
);
},
)
shrinkWrap to wrap your content and ClampingScrollPhysics to use the parent scroll
ListView.builder(
shrinkWrap: true,
physics: const ClampingScrollPhysics(),
itemCount: yourList.length,
itemBuilder: (context, index) => YourWidget(items[index]),
),
I use this:
scrollController.addListener(onScroll);
void onScroll(){
if(scrollController.offset == 0.0
|| scrollController.position.extentBefore == 0.0
|| scrollController.position.extentAfter == 0.0){
scrollPhysics = NeverScrollableScrollPhysics();
Future.delayed(Duration(seconds: 1), (){
scrollPhysics = ClampingScrollPhysics();
setState((){});
});
setState((){});;
}
}
Expanded(
child: ListView.builder(
shrinkWrap: true,
padding: const EdgeInsets.all(8),
itemCount: requestList.length,
itemBuilder: (BuildContext context, int index) {
int que = index;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
padding: const EdgeInsets.only(
left: 20,
top: 10,
bottom: 10,
right: 20),
child: Text(
'${que++} . ${requestList[index].question}',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 14,
color: HexColor(HexColor.black),
fontFamily: 'montserrat_regular',
decoration: TextDecoration.none,
),
)),
ListView.builder(
itemCount: requestList[index].questionOptions!.length,
physics: ClampingScrollPhysics(),
shrinkWrap: true,
itemBuilder: (BuildContext context, int subindex) {
return Row(
children: <Widget>[
Radio(
value: 1,
groupValue: radio_value[index],
onChanged: (values) async {
setState(() {
radio_value[index] = 1;
qutionCheckModel[index].response =
"yes";
});
}),
Container(
child: Text(
requestList[index].questionOptions![subindex],
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 14,
color: HexColor(HexColor.black),
fontFamily: 'montserrat_regular',
decoration: TextDecoration.none,
),
),
),
],
);
}),
],
);
}),
),