How do I display fetched Data from MariaDB to a listview

Question

So basically what i want to do is to display the data i get from my DB in a ListView, but I'm only able to show one attribute of my Object Device.

This my Class for device

class Devices {
  final int iD;
  final String location;
  final String type;
  Devices({required this.iD, required this.location, required this.type});
  factory Devices.fromJson(Map<String, dynamic> json) {
    return Devices(
        iD: json['id'] as int,
        location: json['Ort'] as String,
        type: json['Typ'] as String);
  }
}

The json i get from my PHP script looks like this

     {"id":1,"Ort":"Wohnzimmer","Typ":"Sensor"}

Code to show my Class

class DeviceList extends StatelessWidget {
  List<Devices> dList;
  DeviceList({super.key, required this.dList});

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: dList.length,
      itemBuilder: (context, index) {
        // return Text(dList[index].location,
        //     style: const TextStyle(color: Colors.white, fontSize: 40));
        return (ListTile(title: Text(dList[index].iD.toString())));
      },
    );
  }
}

I want to show all attributes of my Class at the same and not only the iD of it, but i have no clue how to do it.

Munsif Ali · Accepted Answer · 2023-01-15 15:35:09Z

1

in ListTile widget you can display your data like this

 ListView.builder(
      itemCount: dList.length,
      itemBuilder: (context, index) {
        return Card(
          elevation: 4,
          child: ListTile(
            leading: CircleAvatar(
              child: Text("${dList[index].iD}"),
            ),
            title: Text(dList[index].type),
            subtitle: Text(dList[index].location),
          ),
        );
      },
    ),

which will look like this

there are a lot of other ways to display that data.

answered Jan 15, 2023 at 15:35

Munsif Ali

7,9377 gold badges35 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Denzen Over a year ago

thank u for ur answer it helped a lot and also love the design !

Hydra · Accepted Answer · 2023-01-14 23:03:53Z

1

It depends on how you want to display the other attributes

if you want to use ListTile you probably want to make the use of the leading and trailing

return ListTile(
  leading: Text(
    dList[index].iD.toString(),
  ),
  title: Text(
    dList[index].location,
  ),
  trailing: Text(
    dList[index].type,
  ),
);

or use a Row inside the title, it's up to you

answered Jan 14, 2023 at 23:03

Hydra

6534 silver badges6 bronze badges

1 Comment

Denzen Over a year ago

i eventually also came up with the idea to use a row but that wasn't what i really wanted, but also thank u for ur solution it helped a lot !

Collectives™ on Stack Overflow

How do I display fetched Data from MariaDB to a listview

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related