使用BLoC传递TextField文本至另一页面时触发NoSuchMethodError问题

让我来帮你拆解这个错误的原因，然后给出针对性的修复方案：

问题诊断 #

你遇到的The getter 'state' was called on null错误，核心原因有这几点：

• BlocBuilder使用不当：你在SecondPage里用了BlocBuilder，但你的TextBloc并没有继承Bloc库的Bloc或Cubit类。BlocBuilder是专门为Bloc/Cubit设计的组件，它会自动尝试获取对应的Bloc实例并访问其state属性，而你的自定义TextBloc既没有这个属性，也没通过BlocProvider正确提供实例，所以它拿到的是null。
• BlocProvider配置缺失：你注释掉了MyApp中的BlocProvider代码，而且跳转到SecondPage时的BlocProvider.value也没传入Bloc实例，导致子树里根本找不到Bloc。
• 全局实例的冲突：虽然你创建了全局的TextBloc，但这种方式和Bloc库的组件不兼容，而且也不是Bloc推荐的状态管理方式。

推荐解决方案：改用标准Cubit实现 #

Cubit是Bloc库的简化版本，适合这种简单的文本状态管理场景，代码更简洁也更符合规范：

1. 重构TextBloc为Cubit #

替换你原来的TextBloc类：

import 'package:bloc/bloc.dart';

class TextCubit extends Cubit<String> {
  TextCubit() : super(''); // 初始状态设为空字符串

  // 定义更新文本的方法
  void updateText(String newText) => emit(newText);
}

2. 在根组件提供Cubit实例 #

取消MyApp中注释的BlocProvider代码，让它作为MaterialApp的父组件，这样整个应用都能访问到这个Cubit：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => TextCubit(), // 创建Cubit实例
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Bloc Text',
        home: MyHomePage(),
      ),
    );
  }
}

3. 修改MyHomePage使用Cubit #

移除全局bloc实例，通过BlocProvider.of获取Cubit，并用BlocBuilder监听状态变化，同时修复TextEditingController的生命周期问题：

class _MyHomePageState extends State<MyHomePage> {
  late TextEditingController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController(); // 初始化Controller
  }

  @override
  void dispose() {
    _controller.dispose(); // 销毁Controller，避免内存泄漏
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final textCubit = BlocProvider.of<TextCubit>(context);

    return Scaffold(
      appBar: AppBar(backgroundColor: Colors.green[200], title: const Text('Store Text')),
      body: Center(
        child: Column(
          children: <Widget>[
            Container(
              margin: const EdgeInsets.all(8.0),
              width: 300,
              color: Colors.amber,
              padding: const EdgeInsets.all(18.0),
              // 用BlocBuilder监听Cubit状态
              child: BlocBuilder<TextCubit, String>(
                builder: (context, state) {
                  return Text(
                    state,
                    style: const TextStyle(fontSize: 20),
                  );
                },
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(18.0),
              child: TextField(
                controller: _controller,
                onChanged: textCubit.updateText, // 调用Cubit方法更新状态
                decoration: InputDecoration(
                  fillColor: Colors.grey[100],
                  filled: true,
                  enabledBorder: OutlineInputBorder(
                    borderSide: const BorderSide(color: Colors.grey),
                    borderRadius: BorderRadius.circular(6.0),
                  ),
                  focusedBorder: OutlineInputBorder(
                    borderSide: const BorderSide(color: Colors.blueAccent, width: 0.0),
                    borderRadius: BorderRadius.circular(6.0),
                  ),
                ),
              ),
            ),
            SizedBox(
              height: 50,
              width: 200,
              child: RaisedButton(
                child: const Text('Open Next Page'),
                onPressed: () {
                  Navigator.of(context).push(
                    MaterialPageRoute(builder: (context) {
                      // 传递已有的Cubit实例到下一页
                      return BlocProvider.value(
                        value: textCubit,
                        child: const SecondPage(),
                      );
                    }),
                  );
                },
              ),
            )
          ],
        ),
      ),
    );
  }
}

4. 修改SecondPage展示文本 #

用BlocBuilder直接获取Cubit的状态：

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Second Page')),
      body: BlocBuilder<TextCubit, String>(
        builder: (context, state) {
          return Center(
            child: Text(state, style: const TextStyle(fontSize: 20)),
          );
        },
      ),
    );
  }
}

备选方案：修复原有StreamController实现（不推荐） #

如果你想继续用自己的TextBloc（基于StreamController），可以这么改：

1. 移除SecondPage中的BlocBuilder
   改用StreamBuilder监听全局bloc的流：

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Page')),
      body: Center(
        child: StreamBuilder(
          initialData: '',
          stream: bloc.textStream,
          builder: (context, snapshot) {
            return Text('${snapshot.data ?? ''}', style: TextStyle(fontSize: 20));
          },
        ),
      ),
    );
  }
}

2. 保留全局Bloc实例
   确保你的全局TextBloc能被正确访问：

final TextBloc bloc = TextBloc();

class TextBloc {
  final StreamController<String> textStreamController = BehaviorSubject<String>();
  Stream<String> get textStream => textStreamController.stream;
  Function(String) get textChangedStream => textStreamController.sink.add;
}

3. 简化MyApp代码
   因为用的是全局实例，不需要BlocProvider：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Bloc Text',
      home: MyHomePage(),
    );
  }
}

额外提醒 #

• 全局Bloc实例容易导致内存泄漏，推荐用BlocProvider管理Bloc的生命周期，它会在组件销毁时自动关闭Bloc。
• 原代码中每次build都会创建新的TextEditingController，这会导致输入框状态丢失，一定要在initState初始化、dispose销毁。

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