i'm working on a listview taking object from api. The api response the correct data, and the following ListView take the correct data (checked on debug mode) but after index 4 it goes automatically at index 15 causing an outofbound ex.
ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: state.works.length,
itemBuilder: (BuildContext context, int index) {
return WorkCard(
work: state.works[index],
);
},
),
my bloc event:
on<OnHomePageLoading>(
(event, emit) async {
var response = await apiService.apiWorkGetLastWorksPost();
if (response.body!.statusCode == Global.ResponseStatusCode.Ok.value) {
emit(
state.copyWith(
status: HomeStatus.loaded,
works: response.body?.data,
),
);
} else {
emit(
state.copyWith(
status: HomeStatus.fail,
),
);
}
},
);
and my Page:
@override
Widget build(BuildContext context) {
return Scaffold(
drawer: const DrawerShared(),
appBar: const AppBarShared(),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: const Icon(Icons.explore),
label: AppLocalizations.of(context)!.discover),
BottomNavigationBarItem(
icon: const Icon(Icons.menu_book),
label: AppLocalizations.of(context)!.myLibrary),
],
),
body: BlocProvider(
create: (context) => HomePageBloc()
..add(
OnHomePageLoading(),
),
child: BlocListener<HomePageBloc, HomePageState>(
listener: (context, state) {},
child: Center(
child: Padding(
padding: const EdgeInsets.only(top: 16.0),
child: Column(
children: <Widget>[
SizedBox(
width: MediaQuery.of(context).size.width * 0.9,
height: MediaQuery.of(context).size.height * 0.2,
child: Card(
elevation: 10,
child: FittedBox(
fit: BoxFit.fill,
child: ClipRRect(
borderRadius: BorderRadius.circular(30),
child: Image.network(
'https://c1.wallpaperflare.com/preview/127/366/443/library-book-bookshelf-read.jpg'),
),
),
),
),
Row(
children: <Widget>[
Expanded(
child: Container(
margin:
const EdgeInsets.only(left: 10.0, right: 20.0),
child: const Divider(
color: Colors.black,
height: 36,
)),
),
Text(AppLocalizations.of(context)!.lastNews),
Expanded(
child: Container(
margin:
const EdgeInsets.only(left: 20.0, right: 10.0),
child: const Divider(
color: Colors.black,
height: 36,
),
),
),
],
),
BlocBuilder<HomePageBloc, HomePageState>(
buildWhen: (previous, current) =>
current.status == HomeStatus.loaded,
builder: (context, state) {
return Container(
child: state.status == HomeStatus.loading
? const Center(
child: CircularProgressIndicator(),
)
: SingleChildScrollView(
physics: const BouncingScrollPhysics(),
child: BlocBuilder<HomePageBloc, HomePageState>(
buildWhen: (previous, current) =>
previous.works != current.works,
builder: (context, state) {
return Column(
children: [
ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: 4,
itemBuilder: (BuildContext context,
int index) {
return WorkCard(
work: state.works[index],
);
},
),
],
);
},
),
),
);
},
),
],
),
),
),
),
),
);
}
If I set manually the itemCount property to 4 it will display correctly 4 of the 10 object. Any advice?
PS: I dont know if it does matter but I'm using Bloc to manage state