Error: type 'String' is not a subtype of type 'int' of 'index' - flutter

Question

(Edit: I have 3 files
main , trending and text. Let me show them.) I am showing you 2 of them here - where the mainly important portions are.
I think the problem is within 'trending' page where trending[index] is not accepting as String. The api is from tmdb which is a list of maps and has 'poster path'. Donot know what the problem is.
Main =>
class _HomeState extends State<Home> {
#override
void initState() {
loadmovies();
super.initState();
}
List trendingmovies = [];
List topratedmovieslist = [];
List tvlist = [];
final String apikey = '974ecf335095695927b80cb92fbe6200';
final readaccesstoken = 'eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI5NzRlY2YzMzUwOTU2OTU5MjdiODBjYjkyZmJlNjIwMCIsInN1YiI6IjYzMzAwZmJkYWJkYWZjMDA3Y2Q5OWRkZCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.LZkUXKdyN5YCWJcfV6wYLVejGvYp22BzAQowBUWe5Ys';
loadmovies() async{
final tmdb = TMDB(
ApiKeys(apikey, readaccesstoken),
logConfig: const ConfigLogger(
showLogs: true,//must be true than only all other logs will be shown
showErrorLogs: true,
),);
Map result = await tmdb.v3.trending.getTrending();
Map topratedmovies = await tmdb.v3.movies.getTopRated();
Map tv = await tmdb.v3.tv.getTopRated();
setState(() {
trendingmovies = result['results'];
topratedmovieslist = topratedmovies['results'];
tvlist = tv['results'];
});
print(trendingmovies);
print(topratedmovieslist);
print(tvlist);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: const modified_text(text:'Film Library', color: Colors.white70, size: 20,
),
backgroundColor: Colors.transparent,
),
body: ListView(
children: [
TrendingMovies(trending: [trendingmovies],)
],
),
);
}
}
Edit: This is the trending file. I have noted that initialized list doesn't contain poster_path like with tmdb but the main file has extracted it to a list.
Trending ->
import 'package:film_library/utils/text.dart';
import 'package:flutter/material.dart';
class TrendingMovies extends StatelessWidget {
const TrendingMovies({Key? key, required this.trending}) : super(key: key);
final List trending;
#override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const modified_text (text:'Trending Movies', size: 30, color: Colors.white,),
SizedBox(height: 300,
child: ListView.builder(itemCount: trending.length,
scrollDirection: Axis.horizontal,
itemBuilder: (context,index){
return InkWell(
onTap: (){
},
child: SizedBox(
width: 140,
child: Column(
children: [
Container(
height: 200,
decoration: BoxDecoration(
image: DecorationImage(image: NetworkImage(
'http://image.tmdb.org/t/p/w500' + trending[index] ['poster_path']))
)
),
modified_text(text: trending[index]['title'], color: Colors.brown, size: 20,)
],
),
),
);
}),
)
],
),
);
}
}
Edit: There is text file as well but it is nothing but just used as some Font class. I have created model class like - List trending but it too says that - Error: A value of type 'List' can't be assigned to a variable of type 'Trending Movies', and shows error on same poster_path. Maybe the syntax is wrong with calling it as #jacksparrow, did while it doesnt show the error here with [index] ['poster_path'] but that one of the title.

Answer 1

I would suggest that please create model class from json response of your Trending movies API and then create list of trending movies using that model like as below :
List<TrendingMovies> trending ;

Answer 2

It is better to fetch data from API by making model class and fromJson method of that particular json response. It makes more easier to understand use data in it.
import 'package:film_library/utils/text.dart';
import 'package:flutter/material.dart';
class TrendingMovies extends StatelessWidget {
const TrendingMovies({Key? key, required this.trending}) : super(key: key);
List<TrendingMovies> trendingMoviesList ;
#override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const modified_text (text:'Trending Movies', size: 30, color: Colors.white,),
SizedBox(
height: 300,
child: ListView.builder(
itemCount: trending.length,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
final trendingMovie= trendingMoviesList[index];
return InkWell(
onTap: () {},
child: SizedBox(
width: 140,
child: Column(
children: [
Container(
height: 200,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"http://image.tmdb.org/t/p/w500${trendingMovie.poster_path}"),
),
),
),
modified_text(text: trendingMovie.title, color: Colors.brown, size: 20,)
],
),
),
);
}),
)
],
),
);
}
}