Flutter Provider无法展示API数据问题求助

核心问题 #

你遇到的Consumer无法展示数据的原因有两个：

1. 重复创建Provider实例：CommentPage已经在顶层创建了CommentPageProvider，但MiddleSection又重新创建了一个全新的Provider实例，导致Consumer监听的是这个空的新实例，而非顶层已获取数据的实例。
2. 单例与Provider的冲突：你在Provider类中定义了static instance单例，但通过ChangeNotifierProvider创建的实例和这个单例不是同一个对象。initState里调用单例的getLikesData后，数据存在单例的data中，但Consumer监听的是Provider创建的另一个实例，自然拿不到数据。

解决步骤 #

1. 移除MiddleSection中的重复Provider #

删掉MiddleSection里的ChangeNotifierProvider，让它使用CommentPage顶层提供的Provider实例。

2. 移除Provider类的单例实现 #

Provider框架会自动管理实例的生命周期，不需要手动维护单例，避免实例不一致问题。

3. 修正initState中获取数据的方式 #

在MiddleSection的initState里，通过Provider.of获取顶层的Provider实例来调用getLikesData，而非使用单例。

4. 完善Provider的加载状态逻辑 #

恢复isLoading = false的设置，确保数据加载完成后更新状态。

修改后的代码示例 #

修正后的Provider类

class CommentPageProvider extends ChangeNotifier {
  List<LikeModelData> data = [];
  bool isLoading = false;

  Future<void> getLikesData() async {
    isLoading = true;
    notifyListeners();

    data = await LikeServiceCall().getdata();
    print("PROVIDER $data");
    print(data[1].postId);

    isLoading = false;
    notifyListeners();
  }
}

修正后的MiddleSection

class MiddleSection extends StatefulWidget {
  const MiddleSection({
    super.key,
    required this.likeCount,
    required this.commentCount,
  });

  final int likeCount;
  final int commentCount;

  @override
  State<MiddleSection> createState() => _MiddleSectionState();
}

class _MiddleSectionState extends State<MiddleSection> {
  bool isLikebuttonPressed = false;

  @override
  void initState() {
    super.initState();
    // 使用Future.microtask确保context已挂载完成
    Future.microtask(() {
      Provider.of<CommentPageProvider>(context, listen: false).getLikesData();
    });
  }

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;

    return Padding(
      padding: const EdgeInsets.all(15.0),
      child: Column(
        children: [
          Row(
            children: [
              IconButton(
                icon: const Icon(Icons.add),
                onPressed: () {
                  Provider.of<CommentPageProvider>(context, listen: false)
                      .getLikesData();
                },
              ),
              Consumer<CommentPageProvider>(
                builder: (context, value, child) {
                  // 添加加载状态反馈
                  if (value.isLoading) {
                    return const CircularProgressIndicator();
                  }
                  return SizedBox(
                    width: 60,
                    height: 80,
                    child: ListView.builder(
                      itemCount: value.data.length,
                      shrinkWrap: true,
                      scrollDirection: Axis.horizontal,
                      itemBuilder: (context, index) {
                        LikeModelData likeModelData = value.data[index];
                        print("mydata${likeModelData.favStatus}");
                        return Text(
                          likeModelData.postId.toString(),
                          style: const TextStyle(color: Colors.black),
                        );
                      },
                    ),
                  );
                },
              ),
              // 保留你原有的其他组件
            ],
          ),
          // 保留你原有的其他组件
        ],
      ),
    );
  }
}

CommentPage代码无需修改（保持顶层Provider创建）

class CommentPage extends StatelessWidget {
  CommentPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ChangeNotifierProvider<CommentPageProvider>(
        create: (context) => CommentPageProvider(),
        child: Padding(
          padding: EdgeInsets.all(10),
          child: ListView(
            children: const [
              Topsection(),
              MiddleSection(likeCount: 11, commentCount: 90),
              BottomSection(likeCount: 12, hourCount: 1),
            ],
          ),
        ),
      ),
    );
  }
}

关键说明 #

• 确保整个页面共享同一个Provider实例，Consumer才能正确监听数据变化。
• 避免同时使用单例和Provider管理实例，二者选其一即可，推荐使用Provider的生命周期管理。
• Future.microtask用于在initState中安全调用Provider.of，因为initState执行时context还未完全挂载完成。

内容的提问来源于stack exchange，提问作者Diljith