Flutter Riverpod：未点击悬浮按钮却显示FutureProvider内容的问题修复

问题描述 #

我是Flutter及Riverpod库的新手，期望仅在点击floatingActionButton时，通过FutureProvider显示文本内容，但按钮从未点击时内容就已显示。请问该现象的原因是什么？应如何修复？

初始代码 #

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

void main() {
  runApp(const ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'FutureProvider',
      theme: ThemeData(
        textTheme: const TextTheme(bodyText2: TextStyle(fontSize: 50)),
      ),
      home: HomePage(),
    );
  }
}

final futureProvider = FutureProvider<dynamic>((ref) async {
  await Future.delayed(const Duration(seconds: 3));
  return 'Hello World';
});


class HomePage extends ConsumerWidget {

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final asyncValue = ref.watch(futureProvider);
    return Scaffold(
      appBar: AppBar(title: const Text('TEST')),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.refresh),
        onPressed: () {
          ref.refresh(futureProvider);
        },
      ),
      body: Center(
        child: asyncValue.when(
          error: (err, _) => Text(err.toString()),
          loading: () => const CircularProgressIndicator(),
          data: (data) {
            print(data);
            return Text(data.toString());//here
          },
        ),
      ),
    );
  }
}

原因分析 #

• Riverpod的ref.watch()方法会在组件构建阶段立即触发关联Provider的初始化与执行。初始代码中HomePage的build方法直接调用了ref.watch(futureProvider)，导致页面一加载，FutureProvider内的异步任务就自动启动，3秒后返回数据并显示，完全不受按钮点击控制。
• ref.refresh()仅用于刷新Provider的现有状态，无法改变Provider已经被启动的事实，所以点击按钮只是重新执行异步任务，不能实现“仅点击后才显示”的需求。

修复方案 #

通过StateProvider维护一个布尔状态作为开关，只有当按钮点击后将开关设为true，才去watch FutureProvider，从而控制异步任务的启动时机。同时优化布局，避免初始状态返回null导致的布局异常。

修复后代码 #

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'dart:math';

void main() {
  runApp(const ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'FutureProvider',
      theme: ThemeData(
        textTheme: const TextTheme(bodyText2: TextStyle(fontSize: 50)),
      ),
      home: HomePage(),
    );
  }
}

// 用于控制是否加载FutureProvider的开关
final pressProvider = StateProvider<bool>((ref) => false);

final futureProvider = FutureProvider<String>((ref) async {
  var intValue = Random().nextInt(100);
  await Future.delayed(const Duration(seconds: 1));
  return intValue.toString();
});


class HomePage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final isPressed = ref.watch(pressProvider);
    return Scaffold(
      appBar: AppBar(title: const Text('TEST')),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.refresh),
        onPressed: () {
          // 打开开关，触发FutureProvider的watch
          ref.read(pressProvider.notifier).state = true;
          // 刷新Provider获取新数据
          ref.refresh(futureProvider);
        },
      ),
      body: Center(
        child: isPressed
            ? Consumer(
                builder: (context, ref, child) {
                  final asyncValue = ref.watch(futureProvider);
                  return asyncValue.when(
                    error: (err, _) => Text(err.toString()),
                    loading: () => const CircularProgressIndicator(),
                    data: (data) => Text(data),
                  );
                },
              )
            : const Text('点击按钮加载内容'), // 初始显示占位文本
      ),
    );
  }
}

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