How do i present the elements of the list below in one view in flutter using the listview builder.
The list below has nested list. its length is two.
[[{name: beans, quantity: 20, {name:beans, quantity: 10}], [ {name:rice, quantity:5}]]
I need to display the three items in one listview builder as displayed down below it will be displayed thus
name: beans quantity: 20
name: beans quantity: 10
You can achieve this like this:
List lists = [["list1"],["list2"]];
return ListView(
children: [
for (var list in lists)
for (var element in list) ListTile(title: element),
],
);
You can use StickyGroupedListView List or groupListView to show nested item
https://pub.dev/packages/sticky_grouped_list
https://pub.dev/packages/grouped_list
import 'package:flutter/material.dart';
import 'package:grouped_list/grouped_list.dart';
void main() => runApp(MyApp());
List _elements = [
{'name': 'John', 'group': 'Team A'},
{'name': 'Will', 'group': 'Team B'},
{'name': 'Beth', 'group': 'Team A'},
{'name': 'Miranda', 'group': 'Team B'},
{'name': 'Mike', 'group': 'Team C'},
{'name': 'Danny', 'group': 'Team C'},
];
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Grouped List View Example'),
),
body: GroupedListView<dynamic, String>(
elements: _elements,
groupBy: (element) => element['group'],
groupComparator: (value1, value2) => value2.compareTo(value1),
itemComparator: (item1, item2) =>
item1['name'].compareTo(item2['name']),
order: GroupedListOrder.DESC,
useStickyGroupSeparators: true,
groupSeparatorBuilder: (String value) => Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
value,
textAlign: TextAlign.center,
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
),
itemBuilder: (c, element) {
return Card(
elevation: 8.0,
margin: EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
child: Container(
child: ListTile(
contentPadding:
EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
leading: Icon(Icons.account_circle),
title: Text(element['name']),
trailing: Icon(Icons.arrow_forward),
),
),
);
},
),
),
);
}
}
