Flutter中如何将main.dart的HTTP GET数据传递给其他文件的Widget

方案一：构造函数直接传参（最轻量化） #

这是小项目里最直接的方式，不需要额外依赖，代码改动最少。

1. 修改main.dart的_tab列表 #

把请求到的_jsonData作为参数传入各个页面：

// 注意：这里要把_tab的定义移到build方法里，或者在setState时更新列表
// 因为_initState异步加载数据后，_jsonData会变化，需要重新构建页面实例
@override
Widget build(BuildContext context) {
  final List<Widget> _tabs = [
    HomeScreen(data: _jsonData),
    TruckScreen(data: _jsonData),
    ProfileScreen(data: _jsonData),
  ];
  
  return Scaffold(
    // ... 原有代码
    body: _tabs[_currentIndex],
    // ... 原有代码
  );
}

2. 修改truck_screen.dart的构造函数 #

接收传入的数据，并处理空数据的加载状态：

import 'package:flutter/material.dart';

class TruckScreen extends StatelessWidget {
  final List data;

  // 定义必填参数
  const TruckScreen({super.key, required this.data});

  @override
  Widget build(BuildContext context) {
    // 数据未加载完成时显示加载指示器
    if (data.isEmpty) {
      return const Center(child: CircularProgressIndicator());
    }
    
    return Scaffold(
      body: ListView.builder(
        itemCount: data.length,
        itemBuilder: (context, i) {
          final row = data[i];
          return Text("Name: ${row["truckName"]}");
        },
      ),
    );
  }
}

同理，HomeScreen和ProfileScreen也做相同修改，添加required this.data的构造参数即可。

方案二：ValueNotifier + ValueListenableBuilder（支持实时更新） #

如果后续数据可能发生变化，这个方案可以让页面自动响应数据更新，无需手动调用setState。

1. 在main.dart中替换数据存储方式 #

// 用ValueNotifier包裹数据，支持监听变化
final ValueNotifier<List> _jsonData = ValueNotifier([]);
final url = "https:xxxxxxx";

// 修改getItems方法
void getItems() async {
  try {
    final response = await get(Uri.parse(url));
    final jsonResponse = jsonDecode(response.body) as List;
    // 更新ValueNotifier的值，页面会自动监听变化
    _jsonData.value = jsonResponse;
  } catch (err) {}
}

2. 修改_tab列表传入ValueNotifier #

final List<Widget> _tabs = [
  HomeScreen(dataNotifier: _jsonData),
  TruckScreen(dataNotifier: _jsonData),
  ProfileScreen(dataNotifier: _jsonData),
];

3. 修改truck_screen.dart监听数据 #

import 'package:flutter/material.dart';

class TruckScreen extends StatelessWidget {
  final ValueNotifier<List> dataNotifier;

  const TruckScreen({super.key, required this.dataNotifier});

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder<List>(
      valueListenable: dataNotifier,
      builder: (context, data, child) {
        if (data.isEmpty) {
          return const Center(child: CircularProgressIndicator());
        }
        return Scaffold(
          body: ListView.builder(
            itemCount: data.length,
            itemBuilder: (context, i) {
              final row = data[i];
              return Text("Name: ${row["truckName"]}");
            },
          ),
        );
      },
    );
  }
}

方案三：全局状态管理库（适合中大型项目） #

如果项目后续复杂度提升，多个页面需要共享多种状态，可以使用Provider、Riverpod或Bloc这类库，但对于当前场景来说稍显冗余，不过是长期维护的优选方案。比如用Provider的核心步骤：

1. 在pubspec.yaml添加provider依赖
2. 创建继承自ChangeNotifier的数据管理类，封装HTTP请求和数据更新
3. 在main.dart中用ChangeNotifierProvider包裹根Widget
4. 在页面中通过Consumer或Provider.of获取数据

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