Flutter How to render ListView items in sections
Hi, Developer in this flutter tutorial I am sharing how to create a listview with the card. And device the list into a section like showing n image. How to render ListView items in sections by (section-id) from JSON file.
So Let’s Start to create a flutter app to design a screen where I show a list of data on card view. And also devised this list into 2 sections. So start your android studio and create a flutter App and follow the below code.
Flutter ListView data
Table of Contents
List<Map<String, String>> entities = [
{
"section-id": "1",
"section-title": "Active",
"title": "item1",
},
{
"section-id": "1",
"section-title": "Active",
"title": "item2",
},
{
"section-id": "2",
"section-title": "Inactive",
"title": "item3",
},
{
"section-id": "2",
"section-title": "Inactive",
"title": "item4",
},
{
"section-id": "2",
"section-title": "Inactive",
"title": "item5",
}
];
In this example, I used the above list to show the data so that I am the devices list into sections using the key section-title. So in Ui, you can see a group of time based on the section-title key like Active item and Inactive item.
Flutter How to render ListView items in sections
below you can see the list parsing date and add a section in the list.
Expanded(
child: ListView.builder(
padding: EdgeInsets.all(16),
itemBuilder: (BuildContext ctxt, int index) {
Widget item = Card(
shape: RoundedRectangleBorder(
//<-- SEE HERE
side: BorderSide(
color: COLOR_LIGHT_GRAY,
),
borderRadius: BorderRadius.circular(8.0),
),
child: Padding(
padding: EdgeInsets.all(15),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding:
const EdgeInsets.fromLTRB(10, 0, 10, 0),
child: Text(entities[index]['title']!),
),
Padding(
padding: const EdgeInsets.all(10.0),
child: Image.asset("assets/images/swaping.png",height: 20,width: 20,),
)
],
),
Padding(
padding: EdgeInsets.fromLTRB(10, 0, 0, 8),
child: Row(
children: [
Expanded(
child: Row(
children: [
Container(
height: 15,
width: 15,
decoration: BoxDecoration(
shape: BoxShape.circle,
color:COLOR_THEME,
border: Border.all(width: 0, color: Colors.white)
),
),
Padding(
padding: const EdgeInsets.fromLTRB(8, 0, 0, 0),
child: Text("Connected"),
),
],
),
flex: 5,
),
Expanded(
child: Image.asset("assets/images/reply_forword.png",height: 20,width: 20,),
flex: 1,
)
],
),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 0, 10, 8),
child: Row(
children: [
Icon(Icons.person,
color: COLOR_GRAY,size: 18,),
Padding(
padding: const EdgeInsets.fromLTRB(8,0,0,0),
child: Text("Private"),
),
],
),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 0, 10, 8),
child: Row(
children: [
Icon(Icons.verified_user,
color: COLOR_GRAY,size: 18,),
Padding(
padding: const EdgeInsets.fromLTRB(8,0,0,0),
child: Text("Free Plan",),
),
],
),
),
],
),
),
);
if (index == 0 ||
entities[index - 1]['section-id'] != entities[index]['section-id']) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(entities[index]['section-title']!,style:themeData.textTheme.headline5,),
),
item,
],
);
} else {
return item;
}
},
itemCount: entities.length,
),
),
Flutter How to render ListView items in sections Full-Screen Code
class MyChargerList extends StatefulWidget {
const MyChargerList({Key? key}) : super(key: key);
@override
_MyChargerListState createState() => _MyChargerListState();
}
class _MyChargerListState extends State<MyChargerList> {
List<Map<String, String>> entities = [
{
"section-id": "1",
"section-title": "Active",
"title": "item1",
},
{
"section-id": "1",
"section-title": "Active",
"title": "item2",
},
{
"section-id": "2",
"section-title": "Inactive",
"title": "item3",
},
{
"section-id": "2",
"section-title": "Inactive",
"title": "item4",
},
{
"section-id": "2",
"section-title": "Inactive",
"title": "item5",
}
];
List<bool> isSelected = [true, false];
@override
Widget build(BuildContext context) {
final Size size = MediaQuery.of(context).size;
final ThemeData themeData = Theme.of(context);
return Scaffold(
backgroundColor: COLOR_BACKGROUND,
body: SingleChildScrollView(
child: Container(
width: size.width,
height: size.height,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
padding: EdgeInsets.fromLTRB(20, 50, 20, 0),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
BorderBox(
child: Icon(Icons.arrow_back_ios_new),
// Image.asset('assets/images/frame_green_logo.png'),
width: 44,
height: 44,
isAction: 1,
tabHandler: () {
Navigator.pop(context);
},
),
BorderBox(
child: Icon(Icons.control_point),
// Image.asset('assets/images/frame_green_logo.png'),
width: 44,
height: 44,
isAction: 1,
),
]),
SizedBox(
height: size.height * 0.04,
),
Row(
children: [
Text(
"My Device",
style: themeData.textTheme.headline1,
// textAlign: TextAlign.left,
),
],
),
SizedBox(
height: size.height * 0.04,
),
],
),
),
Expanded(
child: ListView.builder(
padding: EdgeInsets.all(16),
itemBuilder: (BuildContext ctxt, int index) {
Widget item = Card(
shape: RoundedRectangleBorder(
//<-- SEE HERE
side: BorderSide(
color: COLOR_LIGHT_GRAY,
),
borderRadius: BorderRadius.circular(8.0),
),
child: Padding(
padding: EdgeInsets.all(15),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding:
const EdgeInsets.fromLTRB(10, 0, 10, 0),
child: Text(entities[index]['title']!),
),
Padding(
padding: const EdgeInsets.all(10.0),
child: Image.asset("assets/images/swaping.png",height: 20,width: 20,),
)
],
),
Padding(
padding: EdgeInsets.fromLTRB(10, 0, 0, 8),
child: Row(
children: [
Expanded(
child: Row(
children: [
Container(
height: 15,
width: 15,
decoration: BoxDecoration(
shape: BoxShape.circle,
color:COLOR_THEME,
border: Border.all(width: 0, color: Colors.white)
),
),
Padding(
padding: const EdgeInsets.fromLTRB(8, 0, 0, 0),
child: Text("Connected"),
),
],
),
flex: 5,
),
Expanded(
child: Image.asset("assets/images/reply_forword.png",height: 20,width: 20,),
flex: 1,
)
],
),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 0, 10, 8),
child: Row(
children: [
Icon(Icons.person,
color: COLOR_GRAY,size: 18,),
Padding(
padding: const EdgeInsets.fromLTRB(8,0,0,0),
child: Text("Private"),
),
],
),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 0, 10, 8),
child: Row(
children: [
Icon(Icons.verified_user,
color: COLOR_GRAY,size: 18,),
Padding(
padding: const EdgeInsets.fromLTRB(8,0,0,0),
child: Text("Free Plan",),
),
],
),
),
],
),
),
);
if (index == 0 ||
entities[index - 1]['section-id'] != entities[index]['section-id']) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(entities[index]['section-title']!,style:themeData.textTheme.headline5,),
),
item,
],
);
} else {
return item;
}
},
itemCount: entities.length,
),
),
],
),
),
),
);
}
}
Read More:-
- Codeplayon Jetpack Compose Tutorial
- Codeplayon Android Tutorial
- Codeplayon Flutter Tutorial
- Codeplayon on Github
