How to passing new items on top List view - json

Question

I am making an app and it depends to give data from API, so I have List view to show new news to the top list view the first when build List view it was showing new items to the end list view so I do Reverse :true after that it is showing new items to the top but when open page show me the end list ....
How can I Pass new items to the top list view and when open aloes show me the top list view like the list view news
This my function get data if you need
Future<List<Ravs>> fetchRav() async {
String token = await read();
final String url= 'listravs';
String FullURL = Serveurl+url;
var response =await http.post(FullURL,
headers: {HttpHeaders.contentTypeHeader: "application/json", HttpHeaders.authorizationHeader: "Bearer $token"});
print('Token : ${token}');
print(response);
if (response.statusCode==200){
final items =jsonDecode(response.body).cast<Map<String,dynamic>>();
List<Ravs> listrav =items.map<Ravs>((json){
return Ravs.fromjson(json);
}).toList();
return listrav;
}
else{
throw Exception('Failed to load data from Server.');
}
}
This my list
return Directionality(
textDirection: TextDirection.rtl,
child:Scaffold(
body:ListView(
reverse: true,
children: snapshot.data
.map((data) =>
Card(
child: InkWell(
onTap:(){
Navigator.push(context, MaterialPageRoute (builder:(context)=>Showpage(id:data.id.toString()),
),
);
},
child: Column(
children: <Widget>[
new Container(
padding: const EdgeInsets.only(top: 10),
width: 200,
alignment: Alignment.topLeft,
child: Image.network(data.image)
),
new Container(
padding: const EdgeInsets.all(10.0),
alignment: Alignment.topRight,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(data.nameravs,textDirection: TextDirection.rtl, style: Theme.of(context).textTheme.title),
Text(data.date_from,textAlign: TextAlign.right, style: TextStyle(color: Colors.black.withOpacity(0.5))),
Text(data.detalis , textAlign: TextAlign.right,),
],
)
)
],
),
),
)
)
.toList(),
)
)
);}, );

Answer 1

Since you are fetching news, I would recommend using ListView.builder. It is a more efficient way in showing a list of objects compared to ListView. The example below is how you can use it to display your data. Align is used to place your list items on top instead of in the bottom because setting the ListView.builder's reverse to true will make the list start at the bottom as well as position that whole list at the bottom.
Align(
alignment: Alignment.topCenter,
child: ListView.builder(
reverse:true,
itemCount: news.length,
itemBuilder: (context, index) {
return ListTile(
title: Text('${news[index]}'),
);
},
);
)
Here is the official docs on ListView.builder(): https://flutter.dev/docs/cookbook/lists/long-lists
Here is a great tutorial that can help you get started with ListView.builder(): https://www.youtube.com/watch?v=TdWhYERuv7g