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

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:-

 

You may also like...