Flutter中用FutureBuilder跨屏复用API数据及SP报错排查

1. 先修复SharedPreferences类型转换错误 #

你遇到的type 'Future<String>' is not a subtype of type 'String?' in type cast错误，核心原因是SharedPreferences的方法都是异步的，你直接把Future<String?>当成了String?来强转。

错误代码示例（大概率是这种写法） #

@override
void initState() {
  super.initState();
  // 错误：直接在同步的initState里调用异步方法，还强行类型转换
  var prefs = SharedPreferences.getInstance();
  String? data = prefs.getString('api_data') as String?;
}

正确写法 #

因为initState是同步方法，不能直接用await，所以要单独写一个异步函数在initState里调用：

@override
void initState() {
  super.initState();
  _initData(); // 调用异步初始化方法
}

// 异步处理数据加载
Future<void> _initData() async {
  // 先获取SharedPreferences实例（必须await）
  final prefs = await SharedPreferences.getInstance();
  // 读取保存的数据（getString返回Future<String?>，await后才是String?）
  final String? savedData = await prefs.getString('api_data');

  if (savedData != null) {
    // 解析保存的JSON数据（假设你存的是JSON字符串）
    final parsedData = jsonDecode(savedData);
    setState(() {
      // 更新页面状态
      _globalData = parsedData;
    });
  } else {
    // 本地没有数据，调用API获取
    await _fetchApiData();
  }
}

// 调用API并保存数据
Future<void> _fetchApiData() async {
  try {
    final response = await http.get(Uri.parse('你的API地址'));
    if (response.statusCode == 200) {
      final apiData = jsonDecode(response.body);
      // 保存到SharedPreferences
      final prefs = await SharedPreferences.getInstance();
      await prefs.setString('api_data', jsonEncode(apiData));
      // 更新状态
      setState(() {
        _globalData = apiData;
      });
    } else {
      // 处理API请求失败
      print('请求失败，状态码：${response.statusCode}');
    }
  } catch (e) {
    // 处理网络错误
    print('网络请求错误：$e');
  }
}

2. 跨多屏复用数据的最优方案 #

如果是大量数据，只靠SharedPreferences读取不够高效，更推荐用状态管理工具（比如Provider、GetX、Riverpod）来全局共享数据，步骤如下：

步骤1：创建全局数据管理类 #

以Provider为例，创建一个保存API数据的类：

class DataProvider extends ChangeNotifier {
  dynamic _apiData;
  bool _isLoading = false;

  dynamic get apiData => _apiData;
  bool get isLoading => _isLoading;

  // 加载数据：先读本地，没有就调用API
  Future<void> loadData() async {
    _isLoading = true;
    notifyListeners();

    final prefs = await SharedPreferences.getInstance();
    final String? savedData = prefs.getString('api_data');

    if (savedData != null) {
      _apiData = jsonDecode(savedData);
    } else {
      await _fetchFromApi();
    }

    _isLoading = false;
    notifyListeners();
  }

  Future<void> _fetchFromApi() async {
    final response = await http.get(Uri.parse('你的API地址'));
    if (response.statusCode == 200) {
      _apiData = jsonDecode(response.body);
      final prefs = await SharedPreferences.getInstance();
      await prefs.setString('api_data', jsonEncode(_apiData));
    }
  }
}

步骤2：启动页初始化数据 #

在启动页的initState里调用Provider的loadData方法，确保进入主页面时数据已经加载完成：

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    _initApp();
  }

  Future<void> _initApp() async {
    // 获取Provider实例并加载数据
    final dataProvider = Provider.of<DataProvider>(context, listen: false);
    await dataProvider.loadData();
    // 数据加载完成后跳转到主页面
    Navigator.pushReplacement(context, MaterialPageRoute(builder: (_) => MainScreen()));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: CircularProgressIndicator()),
    );
  }
}

步骤3：其他页面复用数据 #

在任意页面通过Provider获取数据，直接根据加载状态渲染UI：

class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final dataProvider = Provider.of<DataProvider>(context);
    return Scaffold(
      appBar: AppBar(title: Text('数据展示')),
      body: dataProvider.isLoading
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: dataProvider.apiData.length,
              itemBuilder: (context, index) {
                // 渲染你的数据项
                return ListTile(title: Text(dataProvider.apiData[index]['title']));
              },
            ),
    );
  }
}

3. 注意事项 #

• 如果数据量极大，SharedPreferences会有性能问题，建议改用本地数据库（如Hive、sqflite）存储。
• 状态管理工具可以避免每个页面重复读取本地数据或调用API，更适合跨屏数据共享。

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