Flutter - listview.builder automatically jump to index 15 after index 4 causing an out of bound error

32 Views Asked by At

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

0

There are 0 best solutions below