Flutter类型转换错误：Future<bool?>无法转为bool，求UI适配方案

1. 修正checkFavourite方法的返回类型与逻辑 #

将原方法返回类型从Future<bool?>改为Future<bool>，确保所有代码路径都返回明确的布尔值：

Future<bool> checkFavourite(int id) async {
  final url = Uri.parse('https://quotes.limpidsol.com/api/favourite');
  var pref = await SharedPreferences.getInstance();
  final response = await http.post(
    url,
    body: {'qoute_id': id.toString()},
    headers: {"Authorization": "Bearer ${pref.getString('token')}"},
  );
  if (response.statusCode == 200) {
    final Map<String, dynamic> responseData = jsonDecode(response.body);
    String message = responseData['message'];
    return message == 'Qoute favourite successfully';
  }
  return false;
}

2. 修正调用逻辑，异步更新UI #

不能直接强制转换Future对象，需通过async/await等待异步结果，并调用setState触发UI重建（需确保当前组件为StatefulWidget）：

页面切换时更新状态 #

在PageView的onPageChanged回调中加载当前页面的收藏状态：

PageView(
  onPageChanged: (int index) async {
    int quoteId = quoteList[index]['id'];
    bool isFavourite = await checkFavourite(quoteId);
    setState(() {
      checkFav = isFavourite;
    });
  },
  // 其他配置项
)

初始化时加载默认状态 #

在组件初始化时，加载第一个页面的收藏状态：

@override
void initState() {
  super.initState();
  if (quoteList.isNotEmpty) {
    _loadFavouriteStatus(quoteList[0]['id']);
  }
}

void _loadFavouriteStatus(int id) async {
  bool isFavourite = await checkFavourite(id);
  setState(() {
    checkFav = isFavourite;
  });
}

3. 优化建议：避免全局变量维护单个状态 #

全局变量checkFav在多item的PageView中易出现状态混乱，建议给quoteList中的每个quote对象添加isFavorite字段，单独维护每个item的收藏状态：

// 初始化时给每个quote添加收藏状态字段
quoteList = quoteList.map((quote) {
  quote['isFavorite'] = false;
  return quote;
}).toList();

// 加载状态时更新对应quote的字段
void _loadFavouriteStatus(int index) async {
  int quoteId = quoteList[index]['id'];
  bool isFavourite = await checkFavourite(quoteId);
  setState(() {
    quoteList[index]['isFavorite'] = isFavourite;
  });
}

// UI中使用对应item的状态
IconButton(
  onPressed: () {
    bool currentState = quoteList[index]['isFavorite'];
    currentState
        ? handleRemoveToFav(quoteList[index]['id'])
        : handleAddToFav(quoteList[index]['id']);
    // 点击后即时切换状态，同步接口逻辑
    setState(() {
      quoteList[index]['isFavorite'] = !currentState;
    });
  },
  icon: Icon(
    quoteList[index]['isFavorite']
        ? Icons.favorite_outlined
        : Icons.favorite_border,
    color: quoteList[index]['isFavorite'] ? Colors.red : Colors.grey,
    size: 30.0,
  ),
)

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