Can't show the list from my API in flutter-CodePudding

iam new to flutter and i tried to make an app using my own API, i tried running the app but the listview just showing anything besides no error occured, someone said i should use FutureListView but idk how to implemented in my code.

here is my homepage code

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:http/http.dart';
import 'package:medreminder/TipsAndTricks/models/tips.dart';
import 'package:medreminder/TipsAndTricks/models/tips_model.dart';
import 'package:medreminder/TipsAndTricks/screens/tips_details.dart';
import 'package:medreminder/TipsAndTricks/tips_repo.dart';

class TipsList extends StatefulWidget {
  const TipsList({super.key});

  @override
  State<TipsList> createState() => _TipsListState();
}

class _TipsListState extends State<TipsList> {
  List<Tips> listTips = [];
  Repo repo = Repo();

  getData() async {
    listTips = await repo.getData();
  }

  @override
  void initState() {
    getData();
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Get.isDarkMode?Colors.grey[600]:Colors.white,
        leading: IconButton(
          onPressed: ()=>Get.back(),
          icon: Icon(Icons.arrow_back_ios,
          color: Get.isDarkMode?Colors.white:Colors.black
          ),
        ),
        title:  Text("Healthy Tips & Tricks", style: TextStyle(
          color: Get.isDarkMode?Colors.white:Colors.black
        ),),
      ),
      body: ListView.builder(
        itemCount: listTips.length, 
        itemBuilder: (context, index){
          Tips tips = listTips[index];
          return Card(
            child: ListTile(
              title: Text(listTips[index].title),
              subtitle: Text(listTips[index].source),
              leading: Image.network(listTips[index].imageUrl),
              trailing: Icon(Icons.arrow_forward_ios),
              onTap: (){
                Navigator.push(context, MaterialPageRoute(builder: (context) => TipsDetails(listTips[index])));
              },
            ),
          );
      })
    );
  }
}

my model class

class Tips {
  final String title;
  final String desc;
  final String imageUrl;
  final String source;

  const Tips({
    required this.title,
    required this.desc,
    required this.imageUrl,
    required this.source,
  });

  factory Tips.fromJson(Map<String, dynamic> json) {
    return Tips(
      source: json['source'],
      desc: json['desc'],
      title: json['title'],
      imageUrl: json['imageUrl']
    );
  }
}

my repository code

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:medreminder/TipsAndTricks/models/tips_model.dart';

class Repo{
  final _baseUrl = 'http://10.0.2.2:8000/tips';

  Future getData() async{
    try {
      final response = await http.get(Uri.parse(_baseUrl));

      if(response.statusCode == 200){
        print(response.body);
        Map<String, dynamic> apiRespose = jsonDecode(response.body);
        Iterable<dynamic> it = apiRespose['tips'];
        //Iterable it = jsonDecode(response.body);
        List<Tips> tips = it.map((e) => Tips.fromJson(e)).toList();
        return tips;
      }
    } catch (e) {
      print(e.toString());
    }
  }
}

if you guys needs to see more of my code, please let me know. any help would mean so much to me. thankyou guys

CodePudding user response：

The quick fix would be this:

getData() async {
  listTips = await repo.getData();

  // add this line to make sure your UI gets rebuild once the date is available
  setState((){}); 
}

The long version is What is a Future and how do I use it?