Trying to make http call via VxMutation & VxState in Flutter

Question

I'm trying to fetch banner data from JSON using HTTP.get. I did fetch the data successfully but there is something wrong which is causing this error:

It shows the following error for 2 seconds and then loads images. It doesn't show the loading widget I put. I believe the Build method is building widgets before getting HTTP data. Is this the case then why it's not showing CircularProgressIndicator?

after 2-3 seconds:

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  void initState() {
    FetchBanners(); //<--------is this right?
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final banner = (VxState.store as MyStore).bannerModel;
    VxState.watch(context, on: [FetchBanners]);
    return Scaffold(
      body: Column(
        children: [
          VxBuilder(
            mutations: {FetchBanners},
            builder: (context, store, status) => VxSwiper.builder(
              aspectRatio: 4 / 1.75,
              enableInfiniteScroll: true,
              itemCount: 4,
              itemBuilder: (context, index) => Container(
                  child: banner!.items![index].url != null
                      ? Image(
                          image: NetworkImage(banner.items![index].url!), //<-----Null check operator used on a null value
                        )
                      : CircularProgressIndicator()), //<---Why Error and Not This??
            ),
          ),
        ],
      ),
    );
  }
}

class FetchBanners extends VxMutation<MyStore> {
  Future perform() async {
    final url = "https://jsonplaceholder.typicode.com/albums/2/photos";
    var response = await http.get(Uri.parse(url));

    if (response.statusCode == 200) {
      final decodedData = jsonDecode(response.body);
      store?.bannerModel?.items =
          List.from(decodedData).map<BannerItem>((item) {
        return BannerItem.fromMap(item);
      }).toList();
     
      print(store?.bannerModel?.items![0].url); // But This Prints actual Result!!!
    } else {}
  }
}

I've used VelocityX Package here. and VxState for State-Management as part of VelocityX.

Hardik · Accepted Answer · 2021-08-12T14:33:52.700

Solved it. It was the null safety operator's confusion!!

Dart wanted to go to the next line ONLY if it's not null. and checking for Null should not contain "!" but "?" Problem was, I was checking with "!= null" instead of "== null"

 child: banner?.items?[index].url == null
                        ? CircularProgressIndicator()
                        : Image(
                            image: NetworkImage(banner!.items![index].url!),
                            fit: BoxFit.cover,
                          )

Trying to make http call via VxMutation & VxState in Flutter

1 Answers1