尝试通过 Flutter 中的 VxMutation 和 VxState 进行 http 调用

Question

我正在尝试使用 HTTP.get 从 JSON 获取横幅数据。我确实成功地获取了数据，但是有一些错误导致了这个错误：

显示以下错误2秒，然后加载图像。它没有显示我放置的加载小部件。我相信 Build 方法是在获取 HTTP 数据之前构建小部件。是这样吗，那为什么不显示 CircularProgressIndicator？

2-3 秒后：

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 {}
  }
}

我在这里使用了 VelocityX 包。和 VxState 作为 VelocityX 的一部分用于状态管理。

Answer 1

解决了。这是空安全操作员的困惑！！

Dart 仅在下一行不为空时才想转到下一行。并检查 Null 不应包含“！”但 ”？” 问题是，我正在检查“！= null”而不是“== null”

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

尝试通过 Flutter 中的 VxMutation 和 VxState 进行 http 调用

Trying to make http call via VxMutation & VxState in Flutter

httprequest

state-management

flutter

inherited-widget

flutter-provider