颤振：找不到正确的提供程序<ManageBloc>

Question

我正在创建一个带有bloc的flutter应用程序，但我无法使用块提供程序。

我的主要作品：

class _MyHomePageState extends State<MyHomePage> {
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return MultiBlocProvider(
providers: [
BlocProvider(create: (_) => ManageBloc()),
BlocProvider(create: (_) => MonitorBloc()),
],
child: Builder(
builder: (context) => Scaffold(
appBar: AppBar(
title: Row(children: [
const Icon(Icons.wallet),
Text(widget.title),
]),
bottom: const TabBar(tabs: [
Tab(icon: Icon(Icons.home)),
Tab(icon: Icon(Icons.compare_arrows)),
Tab(icon: Icon(Icons.monetization_on))
]),
),
body: const TabBarView(
children: [
HomeScreen(),
OperationsView(),
PricesScreen(),
]),
floatingActionButton: FloatingActionButton(
onPressed: () {
showModalBottomSheet(context: context, builder: (BuildContext context) {
return NewOperation();
});
},
hoverColor: Colors.white,
backgroundColor: Colors.white10,
child: const Icon(Icons.add, color: Colors.lightBlue,),
),
),
));
}
}

当我单击浮动按钮并尝试查看NewOperation组件时，我收到了错误。新操作：

class NewOperation extends StatelessWidget {
final GlobalKey<FormState> _formKey = GlobalKey();
final Operation operation = Operation();
bool _isEntry = false;
@override
Widget build(BuildContext context) {
return BlocBuilder<ManageBloc, ManageState>(builder: (context, state) {
Operation operation;
if (state is UpdateState) {
operation = state.previousOperation;
} else {
operation = Operation();
}
return Form(
key: _formKey,
child: Column(
children: [
TextFormField(
keyboardType: const TextInputType.numberWithOptions(
decimal: true),
validator: (String? inValue) {
if (inValue != null) {
if (double.parse(inValue) <= 0.0) {
return "Valor inválido!";
}
}
return null;
},
decoration: const InputDecoration(
hintText: "00.0",
labelText: "Valor da Operação",
),
),
TextFormField(
keyboardType: TextInputType.multiline,
validator: (String? inValue) {
if (inValue != null) {
if (inValue.length < 3) {
return "Addiction uma descrição mais detalhada!";
}
}
return null;
},
decoration: const InputDecoration(
hintText: "Conta de luz",
labelText: "Descrição",
),
),
Row(children: [
const Text("Entrada"),
Switch(value: _isEntry, onChanged: (bool inValue) {
// handleIsEntry(inValue);
}),
const Text("Saída"),
]),
ElevatedButton(onPressed: () {
if (_formKey.currentState!.validate()) {
_formKey.currentState!.save();
BlocProvider.of<ManageBloc>(context).add(SubmitEvent(operation: operation));
_formKey.currentState!.reset();
}
}, child: const Text("Salvar"))
],
));
});
}
}

怎么了？

我试着把浮动按钮放在MultiBlocProvider中，但没有成功。

Github

Answer 1

您需要像处理对话框一样向模态提供块。

试着把集团提供给模态。你可以这样做：

showModalBottomSheet(
context: context,
builder: (modalContext) => BlocProvider.value(
value: BlocProvider.of<ManageBloc>(context),
child: NewOperation(),
),

Answer 2

您仅在"；我的主页"；。您试图提供的Blob将进入MyHomePage的小部件树。

当您显示模式底部工作表时，实际上是在为它创建一个新的上下文，它不在MyHomePage小部件树的下面，因此Blob不会到达底部工作表。

您有两个选项：

1. 再次手动将Blob提供到底部页。参考Robert Sandberg的回答

2. 为整个应用程序提供Blob。这意味着使用MultiBlocProvider包装MaterialApp。这将使您的Blob在任何地方都可用

return MultiBlocProvider(
providers: [
BlocProvider(create: (_) => ManageBloc()),
...
],
child: MaterialApp(...),
)

有关BuildContext和提供商的更多信息，请参阅此视频：https://www.youtube.com/watch?v=iNgwFMm3opE&t=2s