LateInitializationError: Field '_' has not been initialized

Question

So, I'm trying to display an Item on my app using the bloc pattern but I'm getting this error:

The following LateError was thrown building ItemDetailsScreen(state: _ItemDetailsScreenState#55c51): LateInitializationError: Field 'item' has not been initialized.

The relevant error-causing widget was: ItemDetailsScreen ItemDetailsScreen:file:/mobile/lib/src/autoroute/app_router.gr.dart:70:40

Below the app_router.dart

AutoRoute(
        path: '/item/:itemId',
        page: ItemDetailsScreen,
        name: 'ItemDetailsRoute',
        meta: {'hideBottomNav': true},
        guards: [AuthGuard],
      ),

and the app_router.gr.dart

ItemDetailsRoute.name: (routeData) {
      final pathParams = routeData.inheritedPathParams;
      final args = routeData.argsAs<ItemDetailsRouteArgs>(
          orElse: () =>
              ItemDetailsRouteArgs(itemId: pathParams.getInt('itemId')));
      return MaterialPageX<dynamic>(
          routeData: routeData, child: ItemDetailsScreen(args.itemId));
    },

And view code in itemDetails.dart file as bellow

class ItemDetailsScreen extends StatefulWidget {
  final int itemId;

  const ItemDetailsScreen(@pathParam this.itemId, {Key? key}) : super(key: key);

  @override
  _ItemDetailsScreenState createState() => _ItemDetailsScreenState();
}

class _ItemDetailsScreenState extends State<ItemDetailsScreen> {
  @override
  void initState() {
    super.initState();
  }
@override
  Widget build(BuildContext context) {
    //final auth = Provider.of<KeycloakAuth>(context);
    return BlocBuilder<ItemBloc, ItemState>(builder: (context, state) {
      if (state is ItemLoadingState) {
        return const MyCircularProgressIndicator();
      }
      if (state is ItemLoadedState) {
        Item showItem = state.item;
        return Scaffold(
          appBar: AppBar(
            title: Text(showItem.name),
          ),
          body: ListView(
            children: [
              CarouselSlider(
                  options: CarouselOptions(
                    height: 300.0,
                    enableInfiniteScroll: false,
                    aspectRatio: 16 / 10,
                    viewportFraction: 1.0,
                  ),
                  items: showItem.pictures.whereNotNull().map((String e) {
                    return CachedNetworkImage(
                      imageUrl: "${e}_SMALL.jpg",
                      placeholder: (context, url) =>
                          const CircularProgressIndicator(),
                      errorWidget: (context, url, error) =>
                          const Icon(Icons.error),
                      width: MediaQuery.of(context).size.width,
                      fit: BoxFit.cover,
                    );
                  }).toList()),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 15),
                child: Column(
                  children: [
                    const SizedBox(
                      height: 15,
                    ),
                    Text(
                      showItem.name,
                      style: MyTheme.bigBlack,
                    ),
                    const SizedBox(
                      height: 15,
                    ),
                  ],
                ),
              )
            ],
          ),
        );
      }
      if (state is ItemLoadingErrorState) {
        return Center(
          child: Text(state.error.toString()),
        );
      }
      return Container();
    });
 }
}

Any idea how I can fix it ? thank you in advance for your answers.

Answer 1

in file itemDetails.dart you declared final int itemId; inside class ItemDetailsScreen

when you called ItemDetailsScreen in AutoRoute you did not pass a value for final int itemId;

Answer 2

When you write your code in null safety you should declare something to the variable's .So declare some values to final int itemid