Showing API Data in Tabular Form Flutter

talal habib 0
Viewed 10

I am Fetching Data from API Where I am showing in the Card that work fine for me now I wanna show that data in the table form can anyone help me with that my code that I am using now.

class DataFromApi extends StatefulWidget {
  const DataFromApi({Key? key}) : super(key: key);

  @override
  _DataFromApiState createState() => _DataFromApiState();
}

class _DataFromApiState extends State<DataFromApi> {
  String url = '';
  getUserData() async {
    var response = await http.get(Uri.parse(
        'MYAPI')); // my api
    var jsonData = jsonDecode(response.body);
    List<User> users = [];
    for (var u in jsonData) {
      User user = User(u["name"], u["email"], u["region"]);
      users.add(user);
    }
    print(users.length);
    return users;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('User Data'),
      ),
      body: Container(
          child: Card(
              child: FutureBuilder(
                  future: getUserData(),
                  builder: ((context, AsyncSnapshot snapshot) {
                    if (snapshot.data == null) {
                      return Container(
                          child: const Center(
                        child: Text('Loading....'),
                      ));
                    } else {
                      return ListView.builder(
                          itemCount: snapshot.data.length,
                          itemBuilder: (context, i) {
                            return ListTile(
                              title: Text(snapshot.data[i].name),
                              subtitle: Text(snapshot.data[i].region),
                            );
                          });
                    }
                  })))),
    );
  }
}

class User {
  final String? name;
  final String? email;
  final String? region;
  User(this.name, this.email, this.region);
}

I have used some other method that I found but didn't succeed because I don't have any experience with the flutter just going throught the learning phase.

api flutter
1 Answers

There is a table widget in flutter, you can use it to generate tabulated data

Wrap(
      children: [
        for (var element in elements)
          Table(
            border: TableBorder.all(),
            children: [
              TableRow(
                children: [
                  Expanded(
                    child: Center(
                      child: Text(
                        "OH MY",
                        textAlign: TextAlign.center,
                    
                      ),
                    ),
                  ),
                  Expanded(
                    child: Center(
                      child: Text(
                        "GOD",
                        textAlign: TextAlign.justify,

                      ),
                    ),
                  ),
                ],
              )
            ],
          )
      ],
    );

For more examples look here

usernHLM0
Related