Flutter中如何向多个页面传递JSON数据？已掌握单组件传参

Hey there! 既然你已经搞定了单个Widget传数据，那多页面传递JSON其实就是把这个思路扩展，或者用一些全局状态管理的方案，我给你整理了几种实用的方法，你可以根据自己的场景选：

这种方法就是把JSON数据在页面跳转时一层一层往下传，适合页面层级不多的场景（比如A→B→C这种短链路）。

首先，让目标页面的构造函数接收JSON数据（一般用Map<String, dynamic>类型来存储JSON）：

// PageB 接收并传递JSON
class PageB extends StatelessWidget {
  final Map<String, dynamic> userData;

  const PageB({super.key, required this.userData});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Page B")),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 跳转到PageC时继续传递这份JSON
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => PageC(userData: userData),
              ),
            );
          },
          child: const Text("Go to Page C"),
        ),
      ),
    );
  }
}

// PageC 展示JSON数据
class PageC extends StatelessWidget {
  final Map<String, dynamic> userData;

  const PageC({super.key, required this.userData});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Page C")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("姓名: ${userData['name']}"),
            Text("年龄: ${userData['age']}"),
          ],
        ),
      ),
    );
  }
}

然后在起始页面（比如PageA）跳转时传入JSON：

// PageA 发起跳转并传参
Map<String, dynamic> jsonData = {"name": "张三", "age": 28, "email": "zhangsan@example.com"};

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => PageB(userData: jsonData),
  ),
);

这种方法简单直接，但如果页面链太长（比如A→B→C→D→E），逐层传递会非常繁琐，还容易出错，这时候就需要全局状态管理了。

如果多个页面都需要访问同一份JSON数据，不用每次跳转都手动传参，用全局状态管理会更高效。这里以常用的Provider为例（轻量易上手）：

步骤1：添加依赖 #

在pubspec.yaml中加入Provider依赖：

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.5

步骤2：创建数据提供者类 #

这个类用来保存JSON数据，并通知页面数据变化：

import 'package:flutter/foundation.dart';

class DataProvider extends ChangeNotifier {
  Map<String, dynamic>? _jsonData;

  // 对外暴露数据的 getter
  Map<String, dynamic>? get jsonData => _jsonData;

  // 设置JSON数据的方法
  void setJsonData(Map<String, dynamic> data) {
    _jsonData = data;
    notifyListeners(); // 通知所有监听的页面更新UI
  }
}

步骤3：全局注入Provider #

在main.dart中把Provider注入到整个应用的上下文：

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => DataProvider(),
      child: const MyApp(),
    ),
  );
}

步骤4：在页面中使用数据 #

在起始页面（PageA）设置JSON数据：

// PageA 中设置全局JSON数据
Map<String, dynamic> jsonData = {"name": "张三", "age": 28, "email": "zhangsan@example.com"};

// 注意这里listen要设为false，因为我们只是修改数据，不需要监听变化
Provider.of<DataProvider>(context, listen: false).setJsonData(jsonData);

// 跳转页面时不用传参了
Navigator.push(context, MaterialPageRoute(builder: (context) => const PageB()));

在PageB和PageC中直接获取全局数据：

// PageB 中获取全局数据
class PageB extends StatelessWidget {
  const PageB({super.key});

  @override
  Widget build(BuildContext context) {
    final dataProvider = Provider.of<DataProvider>(context);
    return Scaffold(
      appBar: AppBar(title: const Text("Page B")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("年龄: ${dataProvider.jsonData?['age']}"),
            ElevatedButton(
              onPressed: () {
                Navigator.push(context, MaterialPageRoute(builder: (context) => const PageC()));
              },
              child: const Text("Go to Page C"),
            ),
          ],
        ),
      ),
    );
  }
}

// PageC 中获取全局数据
class PageC extends StatelessWidget {
  const PageC({super.key});

  @override
  Widget build(BuildContext context) {
    final dataProvider = Provider.of<DataProvider>(context);
    return Scaffold(
      appBar: AppBar(title: const Text("Page C")),
      body: Center(
        child: Text("邮箱: ${dataProvider.jsonData?['email']}"),
      ),
    );
  }
}

这样不管多少页面需要这份JSON，直接从Provider中取就行，不用手动传递，非常适合复杂项目。

如果是快速开发小demo，也可以用全局变量来存JSON数据，虽然简单但不推荐在正式项目中使用（不利于维护，容易导致状态混乱）：

步骤1：定义全局变量 #

在单独的文件（比如global_data.dart）中定义：

// global_data.dart
Map<String, dynamic>? globalJsonData;

步骤2：赋值和使用 #

在PageA中赋值：

import 'global_data.dart';

// PageA 中设置全局变量
Map<String, dynamic> jsonData = {"name": "张三", "age": 28, "email": "zhangsan@example.com"};
globalJsonData = jsonData;

// 跳转页面
Navigator.push(context, MaterialPageRoute(builder: (context) => const PageB()));

在PageB和PageC中直接使用：

import 'global_data.dart';

class PageB extends StatelessWidget {
  const PageB({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Page B")),
      body: Center(
        child: Text("姓名: ${globalJsonData?['name']}"),
      ),
    );
  }
}

总结一下 #

• 页面层级少、场景简单：用路由逐层传递
• 多页面共享同一份数据：优先用全局状态管理（Provider/Riverpod/GetX都可以）
• 快速原型开发：可以临时用全局变量，但正式项目尽量避免

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